node.js

node.js에서 passport를 이용한 로그인 구현하기(part2. 카카오 계정으로 로그인하기)

솜틀공장/ editor

  • 20 comments
  • 2,216 views
  • 2017년 8월 3일

node.js의 passport모듈을 이용해서 카카오 계정으로 인증하는 방법을 소개합니다.
npm에서 이미 모듈이 있기 때문에 사용자 환경에 따른 설정만으로 간단하게 구현이 가능합니다.
기존에 passport를 이용한 로그인을 구현하셨던 분들은 쉽게 따라하실 수 있을거라고 생각합니다. ㅎㅎ

node.js에서 passport를 이용하여 로그인을 구현하는 글에 이어서 이번에는 카카오 계정으로 로그인 하는 방법을 알아보도록 하겠습니다.

먼저 카카오에서는 oauth2.0을 이용한 인증방식을 사용하고 있고, api를 통해서 접근할 수 있습니다.

나의 홈페이지에서 oauth2.0을 적용하게 되면 인증은 카카오에서 하고 우리는 코드만 받아서 확인하는 방식으로 됩니다. 즉 사용자의 비밀번호 같은 보안정보를 소유할 필요가 없다는거죠.

oauth2.0방식을 간단하게 설명드리면,

해당 api공급자에게 나의 어플리케이션을 등록하면 id와 secret을 발급해줍니다. 다른 사람이 나의 홈페이지에서 카카오 계정을 이용한 인증을 받게 되면 먼저 나는 카카오에게 등록된 어플리케이션이라는 증거로 id와 secret을 카카오로 보내줍니다. 확인이 되면 토큰을 발행해주고 개인정보를 우리에게 넘겨줍니다. 토큰은 사용자 확인을 위해서 카카오 서버와 왔다갔다 하면서 인증해줍니다. 토큰이 발행되어야 해당 개인정보에 접근할 수 있습니다. ㅎㅎ

간략하게 설명 드렸는데, 자세하게 알 필요는 없는것 같고 대략적으로 이렇게 돌아간다는 것만 알고 계시면 혹시 인증과정에 생기는 문제의 원인을 파악하는데 도움이 될거에요.

그럼 이제부터 심플하게 카카오 계정으로 로그인 하는 방법에 대해서 집중적으로 알아보도록 하겠습니다.

이전 튜토리얼을 해보지 않고 바로 이것을 하면 막히는 부분이 많이 있을 수 있습니다.

왜냐면 node.js에서 passport를 이용하여 로그인을 구현 을 바탕으로 작성되어서 기존 설정된 값들은 그대로 쓰고, 카카오인증을 위한 부분만 새롭게 추가가 되었기 때문입니다. 아니면 많이 헷갈리실거에요~

사전작업


제일 처음 해야 할 일은 카카오 개발자 홈페이지에서 어플리케이션을 등록하는 일입니다.

웹개발 시작 버튼을 누르고, 앱을 만듭니다.

저는 대충 이름을 임시테스트용이라고 썼는데, 뭐 아무렇게나 만드셔도 됩니다.

그럼 앱키가 나오는데요, 저기에 있는 키가 우리가 사용하게 될 client ID 입니다. 용도에 맞게 선택하면 되는데요, 우리는 node.js를 이용해서 인증을 할 예정이기 때문에 REST API키를 사용하겠습니다.

그 다음에 할 일은 플랫폼을 추가 해야 합니다.

웹으로 추가를 하면 되고, url과 callback주소를 입력해줍니다.

redirect path는 인증 후 응답을 받을 주소입니다. 인증이 성공했는지 안했는지 저 주소로 받게 됩니다.

 

그 다음은 시크릿을 추가하면 됩니다. 카카오에서는 시크릿을 옵션으로 주고 있는데, 사실 페이스북, 구글, 네이버 등등 auth2.0을 제공하는 업체들은 secret을 필수로 하고 있습니다. auth2.0규격이 그렇거든요. 따라서 추가를 해주는게 좋습니다.

상태에서 ‘on’시키고 ‘적용’을 누릅니다.

사전작업은 여기에서 끝입니다. ㅎㅎ

 

모듈 설치하기


이제 node.js에서 카카오 인증을 위한 모듈을 설치하도록 하겠습니다.

> npm install passport-kakao --save

이것으로 추가되는 모듈도 끝났네요.

참 쉽죠 ㅎㅎ

이제부터는 설정만 하면 모듈에서 알아서 인증해줄거에요 ㅎㅎ

 

설정하기


이전에 썼던 node.js에서 passport를 이용하여 로그인을 구현을 따라서 했다면 기본적인 파일은 전부 마련되어 있을 것이고, 이 프로그램을 베이스로 해서 코드를 추가하여 구현하도록 하겠습니다.

카카오 인증도 passport의 기본 구조를 그대로 따라해야 합니다.

passport에서 username과 password를 이용해서 인증했듯이 여기에서도 id와 secret을 이용해서 인증해 줘야 합니다.

client ID는 REST API를 사용하면 되고, secret은 아까 추가로 설정했던 client secret을 사용합니다.

그리고 callbackURL이 필요한데, 저는 ‘/oauth/kakao/callback’으로 설정했네요. 입맛에 따라서 마음대로 설정해도 됩니다. ㅎ

 

‘/config/passport.js’에 추가합니다.

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

passport.use('kakao-login', new KakaoStrategy({
    clientID: 'Client_ID',
    clientSecret: 'Client_Secret',
    callbackURL: 'http://localhost:3000/oauth/kakao/callback'
},
function(accessToken, refreshToken, profile, done) {
    console.log(profile);
    return done(null, profile);
}));

카카오 개발자 홈페이지에서 준 정보를 바탕으로 위와 같이 작성하면 끝입니다.

이제 해야 할 일은 라우터를 작성해서 카카오로 접근하고 정보를 받아올 수 있는 길을 만들어 주는 일입니다.

 

‘/routes/index.js’에서 추가합니다.

router.get('/kakao', passport.authenticate('kakao-login'));
router.get('/oauth/kakao/callback', passport.authenticate('kakao-login',{
    successRedirect : '/profile',
    failureRedirect : '/'
}));

이제는 /kakao로 접근하면 client ID와 secret등의 정보를 카카오로 보내고 인증은 카카오에서 해줍니다. 이 후 인증이 완료되면 토큰과 사용자 정보는 callback주소로 보내주고 이 정보를 바탕으로 사용자의 정보를 알 수 있습니다.

이 정보를 바탕으로 사용자 가입을 하게 만들고 각종 정보를 가공하여 운용하면 됩니다.

인증이 성공적으로 되면 ‘/profile’로 리다이렉션 합니다.

 

현재 passport-kakao가 업데이트가 안되서 그냥 하면 bad client라고 뜹니다..;;

그 이유는 이 모듈이 제작될 당시에는 secret이 필요 없어서 임시로 써놔서 제대로 secret 을 보내지 않아서 생긴 문제입니다.

이것도 간단하게 해결이 가능한데요,

‘/node_modules/passport-kako/lib/strategy.js’에서 19번째, 34번째 라인을 주석처리 하면 됩니다. 이 부분이 clientSecret을 임시로 덮고 삭제하는 부분이라서, 주석처리하면 해결됩니다.

언제 업데이트가 될지는 모르겠지만, 업데이트 하기 전까지는 위와 같은 방식으로 사용하는 수 밖에 없습니다 ㅎㅎ

 

이제는 보이는 화면을 만들어줘야 겠죠?

이게 제일 간단합니다. a태그에 href 만 붙여주면 끝나요 ㅎ 왜냐면 /kakao라는 주소에만 접근하면 되거든요.

‘/views/index.ejs’에서

<a href="/kakao"> 카카오 계정 </a>

위의 코드 하나 추가해주세요 ㅎ

화면에서 링크만 클릭하면 카카오 로그인 페이지가 나오고, 카카오 아이디와 비밀번호를 입력하면 알아서 인증절차가 진행되고, 인증이 완료되면 ‘/profile’의 주소로 리다이렉션 됩니다.

 

궁금한 점이나 잘 이해가 안되는 부분이 있으면 댓글 주세요~!

솜틀공장

이해가 안되시나요? 그럼 질문해주세요. 도움이 되셨나요? 그럼 응원글 하나 남겨주세요 ^^

20
Leave a Reply

avatar
4 Comment threads
16 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
솜틀공장LEEleeseungyeon다랑쉬nanujoaha Recent comment authors
newest oldest most voted
nanujoaha
Guest

우와~정말 올려주셨네요!! 감사합니다. 바로 코딩해봐야겠어요. 어쩐지 그냥 passport-kakao로 하면 에러나더라니…친절한 설명 너무 감사드립니다!

nanujoaha
Member

안녕하세요. 지금 올려주신대로 코딩중인데 에러가 나서요….
routes.index에서

var express = require(‘express’);
var passport = require(‘passport-kakao’);
var router = express.Router();

/* GET home page. */
router.get(‘/’, function(req, res, next) {
res.render(‘index’, { title: ‘Express’ });
});

module.exports = router;

//connect to kakao, and get info from kakao
//connect to /kakao, send clientID and secret info to kakao. Then kakao authenticate it.
//After kakao authenticate info, kakao send token and user’s info to callback url
router.get(‘/kakao’, passport.authenticate(‘kakao-login’));
router.get(‘/oauth/kakao/callback’, passport.authenticate(‘kakao-login’,{
successRedirect:’/profile’,
failureRedirect:’/’
}));
라고 하면 서버 올릴때 TypeError: passport.authenticate is not a function에러나 나고

passport를 require(‘passport’); 로 하면 올라가긴 하지만

링크 클릭시 Error: Unknown authentication strategy “kakao-login” 에러가 나는데 뭐가 잘못된건지 모르겠습니다…

다랑쉬
Guest
다랑쉬

감사합니다. 많은도움이 되었습니다. 현재 passport를 이용한 kakao로그인을 구현했다고 추정하는 상태인데.. 일단 로그인 했을때 db에 카카오에서 주는 정보들이 저장되는거랑 redirect 되는거 봐서는 로그인 된거 같기도 한데요. 이상한게 local Strategy에서는 받아올 수 있던 req.user가 kakao로 로그인 했을때는 받아오지를 못하네요..

더이상한건 세션데이터 역시 db에 저장시켜봤는데 정상적으로 저장이 됩니다…….

serialize랑 deserialize에 콘솔로그 하면 또 세션데이터가 뜨기도 하고요..

어째서 이런 현상이 발생하는걸까요

leeseungyeon
Guest
leeseungyeon

정말 감사합니다. 코딩을하다가 궁금한게 생겼는데 kakao 로그인한 것을 schema에 저장하려면 어떻게 해야 하나요 ?

LEE
Guest
LEE

안녕하세요 카카오로 로그인 구현을 하려고하는데 동의 버튼을 누르면 create_access_token_internal_error에러가 뜹니다. 이건 어떻게 해야 하는지 힌트좀 주시면 안될까요?