Node.js, MongoDB 로 웹서비스 만들기 - 12. 로그인(1) - passport

로그인은 Node.js Express 의 인증 미들웨어인 Passport.js 를 이용해 구현할거임

먼저 설치 ㄱㄱ

npm install passport passport-local express-session

member.js

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session');

var router = require('express').Router();

router.use(session({secret:'비밀코드', resave: true, saveUninitialized: false}));
// '비밀코드' -> 세션을 만들 때 쓰는 비밀번호
router.use(passport.initialize());
router.use(passport.session());

설치한 애들을 선언해주고 

원래라면 미들웨어는 app.use~ 이렇게 사용할텐데 

라우터로 쓰이는 member.js 위에서의 코드이기 때문에 

router.use~ 로 쓰인 점 참고

 

로그인 검사 기능

passport.use(new LocalStrategy({
    usernameField: 'id',  // input name 이 id 인 값
    passwordField: 'pw',  // input name 이 pw 인 값
    session: true,  // 로그인 후 세션 저장할건지
}, (input_id, input_pw, done)=>{
    db.collection('login').findOne({id: input_id}, (error, user)=>{
        if(error) return done(error);
        if(!user) {
            console.log('로그인실패: 아디없음');
            return done(null, false, {message: '존재하지 않는 아이디'});
        }
        bcrypt.compare(input_pw, user.pw, (error, result)=>{  // 기존 로그인 확인 코드
            try {
                if(result) {
                    console.log('로그인성공');
                    return done(null, user);
                } else {
                    console.log('로그인실패: 비번틀림');
                    return done(null, false, {message: '비번틀림'});
                }
            } catch(error) {
                return done(error);
            }
        })
    })
}));

이전 로그인 기능에서 사용했던 코드를 가져와 합쳤다. 

리턴시키는 done 함수는 

done(서버에러, 성공시사용자db데이터, 에러메시지) 의 뜻으로 사용했음

성공시엔 done(null, user정보) 를 리턴시켜주었다. 

 

/login 으로 POST 요청을 받을 때 위 로그인 기능이 써지게끔 코드를 수정해보자 

router.post('/login', passport.authenticate('local', {
    failureRedirect: '/member/loginFail'
}), (req, res) => {
    res.send({code: 1});
})

router.get('/loginFail', (req, res)=>{
    res.send({code: 0});
})

POST 요청 시 passport.authenticate 를 통해 위 로그인 기능이 발동됨 

실패 시 failureRedirect 를 통해 '/member/loginFail' 로 보내지게 해놨는데 

리액트를 쓴다면 failureFlash 라는 기능을 써서 바로 클라이언트쪽에서의 처리를 할텐데

해당 방법은 리액트를 배운 나중에 적용해볼거라 패스

 

로그인 POST 요청이 Ajax 로 되고 있으니 res.send 를 통해 code 값을 리턴시켜준다. 기존 로그인 코드 참고

그럼 원래 목적인 로그인 시 사용자 정보 session 은 어떻게 저장되는가? 

 

passport 엔 로그인 성공 시 발동되는 놈이 있는데 

passport.serializeUser 얘가 세션 데이터를 만들고 세션의 id 정보를 쿠키로 보낸다고 한다. 

passport.serializeUser((user, done)=>{  
    done(null, user.id);
});

작성하면 다음과 같은 코드가 된다. 

 

로그인에 성공했을 때 return done(null, user); 

된 값에서 user 가 저 파라미터로 들어간거고 

 

serializeUser 가 로그인 성공 시 발동된다면 

다른 모든 페이지에 접근할 때 발동되는게 또 있는데 

deserializeUser 다. 

passport.deserializeUser((id, done)=>{
    db.collection('login').findOne({id: id}, (error, result)=>{
        done(error, result);
    })
});

페이지에 접근할 때 위에서 세션에 저장한 user.id 를 불러와

login 컬렉션에서 해당 사용자 정보를 찾아 뱉어내는 구조다. 

 

정리하면 

로그인 -> LocalStrategy -> 로그인성공 -> serializeUser(세션저장) -> 페이지이동 -> deserializeUser(유저정보겟) -> 페이지출력

이런느낌? 

나보다 더 잘 설명한 블로그가 있다. 

https://p-iknow.netlify.app/backend/node/passport-local-strategy

passport, localStrategy의 동작에 대해 이해하기

 

나머진 다음글

 

 

 

 

https://4sii.tistory.com/34

Node.js, MongoDB 로 웹서비스 만들기 - 13. 로그인(2)