passport-kakao

kakao oauth2 로그인과 passport 모듈 연결체.

install

npm install passport-kakao

how to use

• https://developers.kakao.com/ 에서 애플리케이션을 등록한다.
• 방금 추가한 애플리케이션의 설정 - 사용자 관리에 들어가서 사용을 ON으로 한 뒤 저장한다.
• 설정 - 일반에서, 플랫폼 추가를 누른 후 웹 플랫폼을 추가한다.
• 웹 플랫폼 설정의 사이트 도메인에 자신의 사이트 도메인을 추가한다. (ex : http://localhost:3000)
• 프로그램 상에서는 아래와 같이 사용한다.

clientSecret을 활성화 한 경우 해당 파라메터를 같이 넘겨줘야한다.

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

passport.use(new KakaoStrategy({
    clientID : clientID,
    clientSecret: clientSecret, // clientSecret을 사용하지 않는다면 넘기지 말거나 빈 스트링을 넘길 것
    callbackURL : callbackURL
  },
  function(accessToken, refreshToken, profile, done){
    // 사용자의 정보는 profile에 들어있다.
    User.findOrCreate(..., function(err, user) {
      if (err) { return done(err); }
      done(null, user);
    });
  }
));

기본 callbackPath는 /oauth 이고 https://developers.kakao.com 에서 수정할 수 있다. 하지만 callbackURL은 사이트 도메인/oauth 로 설정하는 것을 권장함. (ex : http://myhomepage.com:3000/oauth )

##

profile property

profile에는 아래의 property들이 설정되어 넘겨진다.

key	value	비고
provider	String	kakao 고정
id	Number	사용자의 kakao id
_raw	String	사용자 정보 조회로 얻어진 json string
_json	Object	사용자 정보 조회로 얻어진 json 원본 데이터

simple sample

설치 & 실행

1. ./sample/sample.js 의 appKey 를 https://developers.kakao.com 에서 발급받은 JS appKey 값으로 셋팅.
2. command line 에서 아래의 커맨드 실행
3. 브라우져를 열고 127.0.0.1:3000/login 을 입력 후 이후 과정을 진행한다. cd ./sample npm install node app

mean.io 와 쉽게 연동하기

수정해야하는 파일들은 아래와 같다.

file path	설명
server/config/env/development.js	개발환경 설정파일
server/config/env/production.js	운영환경 설정파일
server/config/models/user.js	사용자 모델
server/config/passport.js	passport script
server/routes/users.js	사용자 로그인 관련 routes file
public/auth/views/index.html	로그인 화면

(1) mean.io app을 생성 한다. (ex : mean init kakaoTest)

(2) 해당 모듈을 연동할 mean.io app에 설치한다.(npm install passport-kakao --save)

(3) server/config/env/development.js 와 production.js 에 kakao 관련 설정을 아래와 같이 추가한다.

'use strict';

module.exports = {
    db: 'mongodb',
    app: {
        name: 'passport-kakao'
    },
    // 그외 설정들....,
    kakao: {
        clientID : 'kakao app rest api key',
        callbackURL: 'http://localhost:3000/oauth'
    }
};

(4) server/config/models/users.js 의 사용자 스키마 정의에 kakao: {} 를 추가한다.

(5) server/config/passport.js 파일에 아래 구문을 추가한다.

// 최상단 require되는 구문에 추가
var KakaoStrategy = require('passport-kakao').Strategy;

passport.use(new KakaoStrategy({
        clientID: config.kakao.clientID,
        callbackURL: config.kakao.callbackURL
    }, function(accessToken, refreshToken, profile, done){
        User.findOne({
            'kakao.id' : profile.id
        }, function(err, user){
            if(err){
                return done(err);
            }
            if(!user){
                user = new User({
                    name: profile.username,
                    username: profile.id,
                    roles : ['authenticated'],
                    provider: 'kakao',
                    kakao: profile._json
                });

                user.save(function(err){
                    if(err){
                        console.log(err);
                    }
                    return done(err, user);
                });
            }else{
                return done(err, user);
            }
        });
    }
));

(6) server/routes/users.js 에 아래와 같은 구문을 추가한다.

app.get('/auth/kakao', passport.authenticate('kakao',{
    failureRedirect: '#!/login'
}), users.signin);

app.get('/oauth', passport.authenticate('kakao', {
    failureRedirect: '#!/login'
}), users.authCallback);

(7) public/auth/views/index.html 에 kakao login을 연결한다.

<!-- 아래는 예시 -->
<div>
    <div class="row">
        <div class="col-md-offset-1 col-md-5">
            <a href="/auth/facebook">
                <img src="/public/auth/assets/img/icons/facebook.png"/>
            </a>
            <a href="/auth/twitter">
                <img src="/public/auth/assets/img/icons/twitter.png"/>
            </a>

            <!-- kakao login -->
            <a href="/auth/kakao">
                <img src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
            </a>
        </div>
    </div>
    <div class="col-md-6">
        <div ui-view></div>
    </div>

</div>

(8) grunt로 mean.io app 실행 후, 실제 로그인 연동 테스트를 해본다.

기타

passport-oauth 모듈과 passport-facebook 모듈을 참고함.