login on Catch Mind

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

#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

// sign-up
globalRouter.get(routes.signUp, onlyPublic, getSignUp);
globalRouter.post(
  routes.signUp,
  onlyPublic,
  uploadAvatar,
  postSignUp,
  postLogin
);

// Login
globalRouter.get(routes.login, onlyPublic, getLogin);
globalRouter.post(routes.login, onlyPublic, postLogin);

login 관련 라우터를 생성하고 sign-up과 login에 onlyPublic과 onlyPrivate이라는 라우터 보안 함수를 추가했다.

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

middlewares.js

export const localMiddleware = (req, res, next) => {
  res.locals.loggedUser = req.user || null;
  next();
};

export const onlyPublic = (req, res, next) => {
  if (req.user) {
    res.redirect(routes.home);
  } else {
    next();
  }
};

export const onlyPrivate = (req, res, next) => {
  if (req.user) {
    next();
  } else {
    res.redirect(routes.home);
  }
};

  onlyPublic과 onlyPrivate으로 라우터 보안을 강화했다. req.user, 즉 사용자의 로그인 유무에 따라 사용할 수 있는 기능을 제한한다. 그리고 localMiddleware에 loggedUser를 추가했다. home.pug에 if문으로 loggedUser가 생성되었는지의 유무에 따라 생성하는 html 소스 코드가 달라진다. 만약 로그인이 되었을 경우 else문이 실행된다. 나중에 이 영역에 게임을 추가할 것이다. 즉, 로그인을 해야지 비로소 게임이 가능해진다.

// home.pug

extends layouts/main

block content
  if !loggedUser
    ul.loginBox
      li.login
        button
          a(href=routes.login) Login
      li.signUp
        button
          a(href=routes.signUp) Sign up
  else
    p home

참고 자료

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

소스 코드

github.com/zpskek/guessMind-v3/commit/5ae05a355c19e5bdcff122f068057ea5e3328388