passport를 사용하여 Kakao OAuth 로그인하기

1. 앱 만들기

https://developers.kakao.com/apps/new 에서 앱을 만든다.

1. 설정 > 일반에서 플랫폼을 웹으로 설정한 후, 도메인을 입력한다.
2. 설정 > 사용자 관리에서 로그인 동의항목과 redirect URI를 설정한다. 리액트 서버를 사용해서 테스트할 수도 있기 때문에 http://localhost/oauth http://localhost/oauth 두 개를 설정했다.
3. 고급 > Client Secret에서 코드를 발급 받는다. (혹시 배포한다면 유출되지 않도록 조심)

2. passport-kakao 라이브러리 사용

passport-kakao 는 카카오 로그인을 사용하게 해주는 passport 관련 모듈이다. passport 가 없다면 카카오에서 제공하는 REST API를 하나하나 따라가야 한다.

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

const appKey = 'YOUR_APP_REST_API_KEY';
const appSecret = 'YOUR_APP_CLIENT_SECRET_KEY';

// passport 에 Kakao Oauth 추가
passport.use(
  'kakao',
  new KakaoStrategy(
    {
      clientID: appKey,
      clientSecret: appSecret,
      callbackURL: '<http://localhost:3000/oauth>', // 카카오 로그인 시도 후 내 앱으로
    },
    function(accessToken, refreshToken, params, profile, done) {
      // authorization 에 성공했을때의 액션
      return done(null, profile._json);
    }
  )
);
passport.serializeUser(function(user, done) {
  done(null, user);
});
passport.deserializeUser(function(obj, done) {
  done(null, obj);
});

const app = express();
app.use(passport.initialize());
app.get('/login', passport.authenticate('kakao'));
app.get('/oauth', passport.authenticate('kakao'), function(req, res) {
  res.end();
});
app.listen(3000);

카카오 예제 코드 https://github.com/rotoshine/passport-kakao/blob/master/sample/sample.js

app.get('/login', passport.authenticate('kakao')) 로 되어 있기 때문에 로그인 버튼에 http://myhomepage/login 으로 href 를 달아 두면 된다.

카카오 로그인이 성공하면 http://myhomepage/oauth 로 리다이렉트 되며 KakaoStrategy 에서 추가 작업을 할 수 있다.