[NodeJS] Passport로 카카오 로그인 구현하기

이번 글에서는 Passport 모듈을 이용하여 카카오 로그인을 구현하는 것에 대해서 정리하려 합니다.  

 

먼저 카카오 개발자 페이지로 먼저 들어가보겠습니다.

그리고 [내 어플리케이션]을 클릭해보겠습니다.

여기서 [애플리케이션 추가하기]를 클릭해서 하나 만들어보겠습니다. 이것을 만들면 REST API Key를 발급받을 수 있는데 이것이 있어야 카카오 로그인을 구현할 수 있습니다.

 

그러면 위와 같이 [앱 키]를 발급 받을 수 있습니다. 우리가 사용할 것은 [REST API 키] 이다. 그리고 나서 Redirect URI 등록을 해줘야 한다. 이유는 아래 코드를 보면서 설명하겠습니다. 

 

 

Redirect URI 등록

위와 같이 본인이 사용할 URI를 설정하면 되는데 필자는 [http://localhost:3000/auth/kakao/callback]이라고 했다.

그리고 아래는 나중에 [동의 화면]을 사용자에게 받는데 자신의 서비스에 맞게 필요한 것을 설정하면된다. 

 

 

동의 화면 설정

 

이제 코드로 카카오 로그인을 구현해보면서 위의 내용들을 확인해보자. 

 

 

 

프로젝트 세팅

Express 프로젝트 이름
Express kakao_login
cd kakao_login
npm install passport passport-kakao

위와 같이 Express 프로젝트를 만든 후에 필요한 모듈을 설치를 하겠습니다.

 

 

routes/index.js

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

router.use('/auth', require('./auth'));

module.exports = router;

index.js에 우리가 카카오 로그인 구현 코드를 넣은 auth.js를 위와 같이 연결하자.

 

 

routes/auth.js

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

passport.use('kakao', new KakaoStrategy({
    clientID: '카카오에서 발급받은 REST API Key 넣기',
    callbackURL: '/auth/kakao/callback',     // 위에서 설정한 Redirect URI
  }, async (accessToken, refreshToken, profile, done) => {
    //console.log(profile);
    console.log(accessToken);
    console.log(refreshToken);
}))


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

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

module.exports = router;

위의 코드의 로직은 아래와 같습니다.

 

1. /auth/kakao로 요청을 보내면 new KakaoStrategy를 통해서 ClientID를 담아 카카오 서버로 인증을 요청합니다.
2. 인증이 성공하면 /auth/kakao/callback으로 응답이 오게 됩니다. (accessToken, refreshToken, profile)

 

 

그리고 npm start를 통해서 서버를 시작한 후에 크롬에서 요청을 보내보겠습니다.

 

 

카카오 로그인 페이지

그러면 위와 같이 [로그인 페이지]가 응답으로 오는 것을 확인할 수 있습니다. 그리고 로그인을 하면 accessToken, refreshToken도 카카오 서버로부터 받아 콘솔에 찍히는 것도 확인할 수 있습니다.