23/11/26 TIL __ passport 로 카카오 로그인 기능 구현하기 1

 

 

🏞️ 상황

 

나는 사실 아주 예전부터

카카오톡 로그인 기능 과 같은 소셜 로그인기능을 꼭 해보고 싶었다. 

사용자로서도 너무 편리한 기능이였고, 

앞으로도 많이 구현하게 될 기능 같아 필수적이라고 생각했다.

 

물론 그 전에 기초적인 쿠키, 토큰, 세션, refreshToken  등등을 알아야 했지만,

코딩을 처음 시작하던 그때에는 겁이 없었고, 일단 사이트에서 뒤져봤었다.

하지만 그 당시에는 기초지식이 부족해 잘 알아듣지 못했고, 결국 못했다.

 

부트캠프를 통해 공부하면서, 인증 인가와 같은 개념들을 배우고 나니,

이제 진짜 할 수 있을 것 같았다. 

그래서 팀프로젝트 필수기능은 모두 구현을 한 뒤에,

밤을 새면서라도 구현을 해야겠다 마음 먹었다. 

 

 

일단 지금까지 정리된 내용을 적어보겠다. 

공부는 생활코딩님 강의와, 

인파님 블로그 및 다른 많은 블로그를 보았다. 

 

 

---

 

🐣  passport 

• 인증 및 인가 작업에 있어서 좀더 편리하게 개발할 수 있도록 도와주는 모듈이다.
• 소셜 로그인을 구현할때 많이 사용된다.
• passport 에는 2가지 종류가 있다고 보면 된다.  로컬 방식, 소셜로그인 방식.

 

나의 경우 소셜로그인을 위해 passport를 도입한 것임으로, 로컬방식은 지나가겠다.

일단 4개의 파일을 만들었다. 그리고 기존에 있던 app.js 파일에도 코드들을 추가했다. 

 

일단 app.js에 추가한 코드는 아래와 같다. 

const passport = require('passport');
const kakaoStrategy = require('passport-kakao').Strategy;
const passportConfig = require('./passport');
const session = require('express-session');

passportConfig();

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

app.use(passport.initialize()); //req에 passport설정 심음.
app.use(passport.session()); //req에 passport 정보 저장.


app.use('/api', [
	authRouter,
	UsersRouter,
	PostsRouter,
	CommentsRouter,
]);

 

 

카카오 로그인 기능을 넣기 위해 만들었던 파일은 아래와 같다. 

 

passport 라는 파일 안에 

     index.js

     kakaoStrategy.js

 

routers 파일 안에

     auth.js 

 

 

일단 routers/auth.js 파일 먼저 보겠다.

require('dotenv').config();

const express = require('express');
const passport = require('passport');
const router = express.Router();
const jwt = require('jsonwebtoken');

//이 주소로 요청이 들어오면 authenticate 함수를 호출한다. 
//그럼 kakaoStrategy로 이동해 전략을 실행한다. 
//카카오 로그인에서는 카카오 로그인 페이지로 이동한다. 
router.get('/kakao', passport.authenticate('kakao'));

//카카오 로그인 페이지에서 로그인 버튼을 누르면 카카오에서 설정한 redirect uri로 이동한다. 
router.get(
	'/kakao/callback',
	passport.authenticate('kakao', {
    	//호출의 결과가 실패라면 아래의 경로로 리다이렉트 한다. 
		failureRedirect: '/api/login',
	}),
    //호출의 결과가 성공이라면 아래 일련의 과정을 처리한다. 
	async (req, res) => {
		const userId = req.user.dataValues.id;
		const token = jwt.sign(
			{ userId: userId },
			process.env.SECRET_KEY,
			{
				expiresIn: '12h',
			},
		);
		res.cookie('Authorization', `Bearer ${token}`);
		res.locals.user = { userId: req.user.dataValues.id };
		res.redirect('/api/main');
	},
);

module.exports = router;

 

 

 

 

다음으로 authenticate가 호출되면서 실행되는 

kakaoStrategy.js 파일을 살펴보겠다.

require('dotenv').config();

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

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

const kakaoLogin = () => {
    passport.use(
        new kakaoStrategy(
            {
                clientID: process.env.KAKAO_ID,
                callbackURL: '/api/kakao/callback',
            },
            async (accessToken, refreshToken, profile, done) => {
                try {
                    const exUser = await Users.findOne({
                        where: { email: profile._json.kakao_account.email },
                    });

                    const hashPwd = await bcrypt.hash('profile.id', 11);
                    
                    //회원가입이 되어있는 경우
                    if (exUser) {
                    	//이 done이 실행되면서, routers/auth.js 파일의 authentication 내부의 콜백함수가 실행된다.
                        //또한 done() 함수의 인자로 넘긴 값을 그대로 넘어간 파일에서 받는다. 
                        done(null, exUser);
                    } else {
                        //회원이 아닌경우 회원가입 시키기
                        const newUser = await Users.create({
                            email: profile._json.kakao_account.email,
                            name: profile.displayName,
                            password: hashPwd, //수정
                            provider: 'kakao',
                        });
                        done(null, newUser);
                    }
                } catch (err) {
                    //그외 에러 발생시 에러 전달.               	
                    done(err);
                }
            },
        ),
    );
};

module.exports = kakaoLogin;

 

 

 

인파님 블로그로 알게된 사실인데,  done 함수의 인자값이 아래와 같은 역할을 한다는 걸 알면 좀더 이해가 쉬웠다. 

//로그인이 성공한 경우
                              done(null,  exUser)
passport.authenticate('kakao', (authError, user, info)=>{})


//로그인이 실패한 경우
                              done(null,   false,  [message: ])
passport.authenticate('kakao', (authError, user, info)=>{})


//서버 에러난 경우
                              done(error)
passport.authenticate('kakao', (authError, user, info)=>{})

 

 

 

 

 

다음은 passport/index.js 파일이다. 

const passport = require('passport');
const kakao = require('./kakaoStrategy.js');

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

module.exports = () => {
	//req.session 객체에 데이터 저장.
	passport.serializeUser((user, done) => {
		done(null, user.id);
	});
    //서버 요청이 올때마다 항살 실행되며, req.user에 저장한다. 
	passport.deserializeUser((id, done) => {
    	//유저 아이디를 테이블에서 찾은 경우, 성공한 경우 던 함수 실행.
		Users.findOne({ where: { id } }).then(user => done(null, user));
	});

	kakao();
};

 

 

 

 

🧡  느낀점

이런식으로 블로그들을 따라가다 보니

드디어 카카오톡 로그인 기능구현에 성공하였다!!

너무 기분이 좋았지만, passport에 대해 정말 잘 알고 있니? 라고 물어본다면 노! 할꺼 같다..

아직은 좀더 보고, 만져봐야 내것으로 만들 수 있을 것 같다. 

어쨋던 과제 제출 전에 구현해서 정말 다행이다.