12.[소셜로그인] passport를 이용한 kakao login 기능구현

1. passport관련 패키지 설치

npm i passport passport-local passport-kakao bcrypt

2. app.js와 미리 연결

//app.js
(다른 모듈 import)
const passport = require('passport');

const  passportConfig  = require('./passport'); //passport 폴더 안에 index.js

//express-session 설정 하단부에 passport session 설정해준다.

app.use(session({
    resave: false,
    saveUninitialized:false,
    secret: process.env.COOKIE_SECRET,
    cookie:{
        httpOnly: true,
        secure: false,
    },
}));

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

passport.initialize 미들웨어는 요청(req객체) 에 passport 설정을 저장하고,

passport.session 미들웨어는 req.session(express-session) 객체에 passport 정보를 저장한다.

따라서, express-session미들웨어보다 passport session을 뒤에 연결해야 함.

3. passport폴더 안에 index.js 파일 만들기

const local = require('./localStrategy'); //로컬로그인
const kakao = require('./kakaoStrategy'); //카카오로그인
const { User } = require('../models');

module.exports = (passport) => {
    passport.serializeUser((user, done) => {
        done(null, user.id);
    });
    
    passport.deserializeUser((id, done) => {
        User.findOne({ where: { id }})
        .then(user => done(null, user))
        .catch(err => done(err));
    });

    local(passport);
    kakao(passport);
}

passport는 세션에 불필요한 데이터를 담아두지 않기 위해 사용하며,

serializeUser, deserializeUser가 핵심이다.

 

serializeUser는 세션에 사용자 정보를 저장하는 것이며, 

deserializeUser는 매 요청시마다 실행되며, serializeUser에서 세션에 저장했던 아이디를 받아 DB에서 사용자 정보를 조회한다.

조회된 사용자 아이디를 req.user 객체에 저장하면, 라우터에서 req.user 객체를 사용 가능하다. 

 

4. passport폴더 밑에 KakaoStrategy.js 작성

const KakaoStrategy = require('passport-kakao').Strategy;

const passport = require('passport');
const { User } = require('../models');

module.exports = (passport) => {
    passport.use(new KakaoStrategy({
        clientID: process.env.KAKAO_ID,
        callbackURL: '/auth/kakao/callback',
    }, async (accessToken, refreshToken, profile, done) => {
        try {
            const exUser = await User.findOne({where: { snsId: profile.id , provider: 'kakao'}});
            if (exUser) {
                done(null, exUser);
            } else {
                const newUser = await User.create({
                    email: profile._json && profile._json.kaccount_email,
                    nick: profile.displayName,
                    snsId: profile.id,
                    provider: 'kakao',
                })
                done(null, newUser);
            }
        } catch (error) {
            console.error(error);
            done(error);
        }
    }))
}

KAKAO_ID는 developers.kakao.com에서 내 애플리케이션을 생성 후 REST API키를 가져와서 .env 파일에 작성해주면 된다.

5. routes 폴더 밑에 auth.js에 kakao 컨트롤러 작성

//회원가입 라우터
const express = require('express');
const passport = require('passport');
const bcrypt = require('bcrypt');
const { isLoggedIn, isNotLoggedIn } = require('./middlewares');
const { User } = require('../models');

const router = express.Router();

(...로컬 로그인 관련부분 생략)

router.get('/kakao', passport.authenticate('kakao'));

router.get('/kakao/callback', passport.authenticate('kakao', {
  failureRedirect: '/',
}), (req, res) => {
  res.redirect('/');
});

module.exports = router;

 

6. app.js에서 routes 연결

(...생략)

const passport = require('passport');

require('dotenv').config();

const pageRouter = require('./routes/page');
const authRouter = require('./routes/auth');

(...생략)

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

app.use('/', pageRouter);
app.use('/auth', authRouter);

(...생략)

 

7. nodemon 실행 후 카카오 로그인하면 끝.