[유튜브 클론코딩] 6.3 Loggin the User In (로그인 시키기)

6.3 Loggin the User In (로그인 시키기)

지난 시간 까지 사용자를 가입시킬 수 있었고, 이제 로그인을 시켜볼 것이다.

 

userController에서 postJoin을 미들웨어로 바꾸기(next만 넣으면 된다)

userController로 와서 join을 처리하는 controller를 middleware로 탈바꿈 시킬 것이다.

 

export const postJoin = async (req,res,next) => {

    // console.log(req.body);

    const{

        body:{name, email, password, password2}

    } = req;

    if(password !== password2){

        res.status(400);

        res.render("join", {pageTitle: "Join"});

    }else{

       try{

           const user = await User({

               name,

               email

           });

           await User.register(user,password);

           next();

       }catch(error){

           console.log(error);

           res.redirect(routes.home);

       }

        //To Do: Log User In

    }

↑ userController.js

일단 postJoin에서 해당 부분에 next()를 붙여준다.

미들웨어로 하려고 next를 붙여준 것이다. 그러므로 res.redirect(routes.home)도 성공했을 때에는 쓰지 않는다.

이게 미들웨어니까 성공하면 바로 다른 컨트롤러로 넘겨주고, 거기서 로그인을 시켜줄려고 한다.

 

globalRouter.post(routes.join, postJoin, postLogin);

↑ globalRouter.js

globalRouter에서 postJoin이 미들웨어가 되도록 다음 컨트롤러로는 postLogin을 넣어준다. 먼저 postJoin에서 가입을 시키고 postLogin에서 로그인을 시키는 것이다.

 

사용자를 로그인 시켜주는 postLogin 수정하기

이제 사용자를 로그인 시켜주기 위해 postLogin을 수정해준다.

먼저 postJoin에서 가입을 시키고 postLogin에서 로그인을 시키는 것이라고 했는데,

다시 말해, postJoin에서 받은 username(여기서는 email)과 password 정보들을 postLogin으로 보내도록 할 것이다.

 

import passport from "passport";

우선, userController.js에 passport를 import 시킨다.

 

export const postLogin = passport.authenticate('local', {

    failureRedirect: routes.login,

    successRedirect: routes.home

});

다음으로 postLogin을 다음과 같이 수정한다.

local은 우리가 설치해준 Strategy(로그인 방식)의 이름이다.

여기엔 몇 가지 옵션을 줄 수 있는데, passport 공식 문서에서 찾아볼 수 있다.

실패했을 때는 routes.login으로 redirect해주고, 성공했을 때에는 routes.home으로 redirect 해주는 것이다.

현재로서 passport 인증 방식은 username(여기서는 email)과 password를 찾아보도록 설정되어 있다.

middleware가 정보를 다음 으로 넘겨준다는 것을 기억해야 한다.

즉, postJoin은 이메일, 패스워드 등 정보를 받아서 사용자를 가입시키고 next()가 호출되어서 다음 것으로 가고 같은 정보를 전달하게 되는데 다음 것인 postLogin은 사용자를 로그인 시켜주는 것이다.

 

middlewares.js로 가서 예전에 설정한 부분 수정하기

export const localsMiddleware = (req, res, next) => {

    res.locals.siteName = "MyTube";

    res.locals.routes =  routes;

    res.locals.user = req.user || null;

    next();

};

↑ middlewares.js

다음과 같이 수정한다.

왜냐면 passport가 사용자를 로그인시킬 때 passport는 쿠키나 serialize, deserialize 등의 기능을 다 지원해줌은 물론이고 user가 담긴 object를 request에도 올려줄 것이기 때문이다.

먼저 이렇게 작성해야 우리 template들이 이 user에 접근 가능하게 할 수 있다.

 

app.js로 가서 passport.js 파일이랑 passport를 import 해주고 use 하기

import express from "express";

import morgan from "morgan";

import helmet from "helmet";

import cookieParser from "cookie-parser";

import bodyParser from "body-parser";

import passport from "passport";

import userRouter from "./routers/userRouter";

import videoRouter from "./routers/videoRouter";

import globalRouter from "./routers/globalRouter";

import routes from "./routes";

import { localsMiddleware } from './middlewares';

import "./passport";

 

const app = express();

app.use(helmet());

app.use(function(req, res, next) {

    res.setHeader("Content-Security-Policy", "script-src 'self' https://archive.org");

    return next();

    });

app.set("view engine", "pug");

app.use("/uploads", express.static("uploads"));

app.use("/static", express.static("static"));

app.use(cookieParser());

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended: true}));

app.use(morgan("dev"));

app.use(passport.initialize());

app.use(passport.session());

app.use(localsMiddleware);

app.use(routes.home, globalRouter);

app.use(routes.users, userRouter);

app.use(routes.videos,videoRouter);

 

export default app;

↑ app.js

이 위치에 써준 이유는 위에서 실행된 cookieParser로부터 쿠키가 쭉 여기까지 내려와서  passport는 초기화 되고

그 다음엔 passport가 제 스스로 쿠키를 들여다봐서, 그 쿠키 정보에 해당하는 사용자를 찾아줄 것이다.

그리고 passport는 자기가 찾은 그 사용자를 요청(request)의 object, 즉 req.user로 만들어 준다.

그러면 그 user object를 template에 추가시켜줄 수 있다.

 

여기까지 하면 일단 뭔가 안되는데, 그 이유는 세션을 설치하지 않아서 그렇다. 세션은 다음 시간에 설치 하겠다.