login - controller

  join을 통해서 저장한 사용자 정보로 이제 로그인을 해야 한다. 웹 애플리케이션에 로그인을 하면 서버는 세션 키를 준다. 이 세션 키를 가지고 있음으로써 로그인이 유지가 된다. 만약 내가 브라우저를 다 끄고 다시 키 애플리케이션에 접속하면 키 값은 소멸되어서 다시 로그인을 해야 한다. 이러한 기능을 구현하기 위해서 설치할 두 가지가 있다.

#npm install express-session connect-mongo

express-session은 cookie-password를 생성하고 connect-mongo는 쿠키 값을 mongoDB에 저장하게 한다.

 

app.js

import session from "express-session";
import MongoStore from "connect-mongo";
import mongoose from "mongoose";

import './passport';

const CookieStore = MongoStore(session);

app.use(
  session({
    secret: process.env.COOKIE_SECRET,
    resave: false,
    saveUninitialized: true,
    store: new CookieStore({ mongooseConnection: mongoose.connection }),
  })
);

app.use(passport.initialize());
app.use(passport.session());

  여기서 secret 키는 아무거나 줘도 상관없다. 하지만 길고 랜덤한 값으로 주고 .env 파일에 저장하자. 다른 사람에게 노출되면 안 되기 때문이다. 또한 app.js에서 passport.js를 import해야 한다. 그럼으로써 passport.js에 있는 API들이 실행이 된다.

 

passport.js

  passport.use(User.createStrategy())는 사용자가 local에서 로그인할 수 있도록 하는 LocalStrategy를 createStrategy로 간략히 줄인 메소드다.

import passport from 'passport';
import User from './models/User';

passport.use(User.createStrategy());


// 어떤 정보를 쿠키에게 줄 것인지를 의미한다.
passport.serializeUser(User.serializeUser());

// 그 쿠키의 정보를 어떻게 사용자로 전환할 것인가를 의미한다.
passport.deserializeUser(User.deserializeUser());

 

globalRouter.js

// 수정 전
globalRouter.get(routes.login, login);

// 수정 후
globalRouter.get(routes.login, getLogin);
globalRouter.post(routes.login, postLogin);

 

userController.js

  postLogin을 보면 사용자가 local 정보로 로그인을 하고 성공을 하면 home으로 redirect시키고 실패하면 다시 login페이지로 redirect 시킨다.

export const getLogin = (req, res) => {
  try {
    res.render('login', { pageTitle: 'Login' });
  } catch (error) {
    console.log(error);
    res.redirect(routes.home);
  }
};

export const postLogin = passport.authenticate('local', {
  successRedirect: routes.home,
  failureRedirect: routes.login,
});

 

login이 성공적으로 되었다면 connect.sid라는 쿠키 값이 생성이 된다.

cookie

참고 자료

• 노마드 코더의 유튜브 클론 강의
• passport docs
• passport-local-mongoose
• express-session npm
• connect-mongo npm

소스 코드

https://github.com/zpskek/wetube-v3/commit/ae933b3e0d5568f1f411c7eb70ff857fce5baf75