passport-kakao
v1.0.1
Published
kakao oauth2 login module
Downloads
81,683
Maintainers
Readme
passport-kakao
kakao oauth2 로그인과 passport 모듈 연결체.
install
npm install passport-kakao
how to use
- https://developers.kakao.com/ 에서 애플리케이션을 등록한다.
- 방금 추가한 애플리케이션의 설정 - 사용자 관리에 들어가서 사용을 ON으로 한 뒤 저장한다.
- 설정 - 일반에서, 플랫폼 추가를 누른 후 웹 플랫폼을 추가한다.
- 웹 플랫폼 설정의 사이트 도메인에 자신의 사이트 도메인을 추가한다. (ex : http://localhost:3000)
- 프로그램 상에서는 아래와 같이 사용한다.
clientSecret을 활성화 한 경우 해당 파라메터를 같이 넘겨줘야한다.
const passport = require('passport')
const KakaoStrategy = require('passport-kakao').Strategy
passport.use(new KakaoStrategy({
clientID : clientID,
clientSecret: clientSecret, // clientSecret을 사용하지 않는다면 넘기지 말거나 빈 스트링을 넘길 것
callbackURL : callbackURL
},
(accessToken, refreshToken, profile, done) => {
// 사용자의 정보는 profile에 들어있다.
User.findOrCreate(..., (err, user) => {
if (err) { return done(err) }
return 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
설치 & 실행
./sample/sample.js
의appKey
를 https://developers.kakao.com 에서 발급받은 JS appKey 값으로 셋팅.- command line 에서 아래의 커맨드 실행
- 브라우져를 열고
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 모듈을 참고함.