빠르게 훝어보는 node.js
#16 - Passport를 이용한 OAuth 2.0 API 인증 (Facebook 2/2)
조대협 (http://bcho.tistory.com)
node.js에서 페이스북 로그인하기
앞에서(http://bcho.tistory.com/913) 설명한 Facebook 로그인 시나리오를 기반으로 하여 node.js와 passport-facebook 모듈을 이용해서, 간단한 로그인 서비스를 만들어보자.
시나리오
만들고자 하는 시나리오는 다음과 같다.
/login 페이지에서 페이스북 로그인 버튼이 출력된다.
페이스북 로그인 버튼을 누르면 /auth/facebook 페이지로 이동한다.
/auth/facebook 페이지에서는 페이스북에 로그인을 하기 위한 OAuth 요청을 passport-facebook 모듈을 이용해서 만든후, 페이스북 로그인 페이지로 Oauth 요청과 함께 redirect한다.
페이스북 로그인 페이지에서 계정과 비밀번호를 입력하면 해당 앱에 대한 권한을 허용할것인지를 페이스북이 물어본다.
확인을 누르면, 로그인이 성공하고, 로그인 결과를 /auth/facebook/callback으로 redirect한다.
이 페이지에서는 페이스북에서 전달해온 사용자 정보를 받아서, node.js의 세션에 저장한다. 그 후에, /login_success 페이지로 이동한다.
/login_success 페이지에서는 세션에 저장된 페이스북 사용자 정보를 JSON 문서 형태로 출력한다.
이것이 우리가 지금부터 구현하고자 하는 흐름이다.
2. passport-facebook 모듈을 이용하여 구현하기
그러면 node.js를 이용해서 구현을 해보자.
개발환경에서,
npm –g install passport
npm –g install passport-facebook
명령을 이용하여 passport와 passport-facebook 모듈을 설치한다.
다음으로 https://developers.facebook.com에 로그인해서, 새로운 앱을 등록한다.
Settins 메뉴로 이동하여 “+Add Platform” 버튼을 클릭한다. 여기서는 웹사이트를 Facebook 계정으로 연동할 예정이기 때문에, WebSite를 선택한다.
WebSite 플랫폼을 추가하면 아래와 같이 WebSite 메뉴가 생성되고, Site URL을 넣을 수 있는 페이지가 나온다. 여기서는 개인 노트북 개발환경에서 node.js를 띄워놓고 개발할것이기 때문에, 로컬 사이트의 URL을 적어 놓자. 이 예제에서는 노트북에서 3000번 포트에 node.js를 띄울 것이기 때문에, URL을 아래와 같이 “http://localhost:3000”으로 적어놓는다.
다음으로 코드를 구현한다.
Express 애플리케이션을 생성한다. (이 예제는 3.x버전을 기준으로 하고 있다.)
다음으로 /public 디렉토리에 index.html을 다음과 같이 구현한다.
|
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button onclick="location.href='/auth/facebook'">Facebook login</button> </body> </html> |
다음으로 코드를 구현해보자. 아래는 /app.js의 소스코드이다.
|
var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path');
var passport = require('passport') , FacebookStrategy = require('passport-facebook').Strategy;
// serialize // 인증후 사용자 정보를 세션에 저장 passport.serializeUser(function(user, done) { console.log('serialize'); done(null, user); });
// deserialize // 인증후, 사용자 정보를 세션에서 읽어서 request.user에 저장 passport.deserializeUser(function(user, done) { //findById(id, function (err, user) { console.log('deserialize'); done(null, user); //}); });
passport.use(new FacebookStrategy({ clientID: ' 페이스북 개발자 사이트에서 찾아서 넣으세요 ', clientSecret: '페이스북 개발자 사이트에서 찾아서 넣으세요', callbackURL: "http://localhost:3000/auth/facebook/callback" }, function(accessToken, refreshToken, profile, done) { console.log(profile); done(null,profile); } )); var app = express();
// all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); app.use(express.methodOverride()); app.use(express.session({ secret: 'your secret here' })); app.use(passport.initialize()); app.use(passport.session()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public')));
// development only if ('development' == app.get('env')) { app.use(express.errorHandler()); }
app.get('/auth/facebook', passport.authenticate('facebook')); app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/login_success', failureRedirect: '/login_fail' })); app.get('/login_success', ensureAuthenticated, function(req, res){ res.send(req.user); }); app.get('/logout', function(req, res){ req.logout(); res.redirect('/'); }); function ensureAuthenticated(req, res, next) { // 로그인이 되어 있으면, 다음 파이프라인으로 진행 if (req.isAuthenticated()) { return next(); } // 로그인이 안되어 있으면, login 페이지로 진행 res.redirect('/'); }
http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
|
Passport와 passport-facebook을 이용하기 위해서 다음과 같이 모듈을 import한다.
var passport = require('passport')
, FacebookStrategy = require('passport-facebook').Strategy;
다음으로 이전 글의 LocalStrategy (http://bcho.tistory.com/920 참고) 에서 했던것 처럼, passport의 serializer와 deseriazlier를 구현한다.
// serialize
// 인증후 사용자 정보를 세션에 저장
passport.serializeUser(function(user, done) {
console.log('serialize');
done(null, user);
});
// deserialize
// 인증후, 사용자 정보를 세션에서 읽어서 request.user에 저장
passport.deserializeUser(function(user, done) {
//findById(id, function (err, user) {
console.log('deserialize');
done(null, user);
//});
});
Serailizer는 LocalStrategy 예제 부분에서도 언급했지만, 로그인이 성공하였을 때, 인증 후에, 세션에 사용자 정보를 저장하는 기능을 한다. 로그인 성공후 값이 user라는 인자를 통해서 전달되는데, 이 값을 done(null,user)로 넣으면 HTTP session내에 저장된다. 이 예제에서는 페이스북에서 로그인 후에 넘어온 정보를 그대로 저장했지만 정보의 양이 많을 경우 메모리를 절약하기 위해서 사용자 키 정도만 세션에 저장하는 것이 좋다.
다음으로 Deserialize는 매번 각 페이지 접근시 마다, 세션에 저장된 사용자 정보를 읽어서 HTTP request 객체에 user라는 객체를 추가로 넣어서 리턴한다.
이는 앞서 LocalStrategy 부분에서도 설명했지만, 세션에 많은 데이타를 넣게 되면 메모리 소모가 많기 때문에,세션에는 사용자 ID정도를 저장하고 상세 사용자 정보는 DB나 별도의 외부 캐쉬 (Redis와 같은) 곳에 정보를 저장해놓고 세션에 저장된 사용자 ID로, 추가 사용자 정보를 읽어서, 그 정보를 user 객체에 넣어서 done(null,user) 를 호출해주면, request.user를 통해서 값을 전달할 수 있다.
Passport Facebook Strategy를 불러와서 정의한다.
passport.use(new FacebookStrategy({
clientID: ' 페이스북 개발자 사이트에서 찾아서 넣으세요 ',
clientSecret: ' 페이스북 개발자 사이트에서 찾아서 넣으세요 ',
callbackURL: "http://localhost:3000/auth/facebook/callback"
},
function(accessToken, refreshToken, profile, done) {
console.log(profile);
done(null,profile);
}
));
FacebookStrategy를 정의할때 인자로 client ID,clientSecret 등을 넣어야 하는데, 이 값들은 페이스북 개발자 사이트에서 등록된 애플리케이션 정보를 보면 AppID와 App Secret이라는 값이 있는데,
App ID의 값을 client ID에, 그리고App Secret의 값을 client Secret에 입력하면 된다.
그리고, 코드내에서는 콜백함수를 정의하는데, 콜백함수에는 크게 4가지 인자가 전달된다.
accessToken : OAuth용 accessToken이다. 이 토큰을 이용해서 필요하다면 페이스북의 오픈 API (REST API)를 호출할 수 있다. 만약에 개발하고자하는 웹서비스가 페이스북 API를 호출할 경우 accessToken도 session등에 저장해놓고 사용하기 바란다.
RefreshToken : OAuth용 refreshToken으로, accessToken이 만료되었을 때 재발급을 요청하는 용도로 사용된다.
profile : 로그인한 페이스북의 사용자 정보를 리턴한다. 이 예제에서는 이 값을 모두 세션에 저장해놓고 사용했지만 앞에 seriazlier에서도 설명했듯이 가능하면 id 정도만 세션에 저장해서 메모리 사용량을 절약하기를 바란다.
다음으로 passport를 사용하기 위해서 passport 미들웨어를 use로 연결한다.
app.use(passport.initialize());
app.use(passport.session());
미들웨어는 HTTP 요청이 들어왔을때 정의된 순서에 따라서 순차적으로 실행되기 때문에 이때 순서에 주의하도록한다.
여기까지 준비되었으면, passport-facebook 모듈을 사용하기 위한 모든 준비가 다 되었다. 이제 각 페이지를 구현해보자
app.get('/auth/facebook', passport.authenticate('facebook'));
/auth/facebook 페이지에 대한 구현으로, 이 페이지에 들어오면 passport facebook strategy 모듈이 OAuth 요청을 만들어서 페이스북 로그인 페이지로 이 OAuth 요청을 Query String에 실어서 redirect한다.
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { successRedirect: '/login_success',
failureRedirect: '/login_fail' }));
다음으로 페이스북 로그인 페이지에서 로그인에 대한 결과를 처리하는 페이지로, /auth/facebook/callback 페이지로, 로그인 성공을 하면 /login_sucess 페이지로 리다이렉트하고, 실패하면 /login_fail 페이지로 리다리렉트 한다.
app.get('/login_success', ensureAuthenticated, function(req, res){
res.send(req.user);
});
다음은 로그인 성공 페이지로, 로그인이 성공하면 세션에 저장된 페이스북 사용자 정보를 화면에 출력한다. 여기에 ensureAuthenticated라는 메서드를 중간에 인자로 넘겼는데, LocalStrategy 예제와 마찬가지로
function ensureAuthenticated(req, res, next) {
// 로그인이 되어 있으면, 다음 파이프라인으로 진행
if (req.isAuthenticated()) { return next(); }
// 로그인이 안되어 있으면, login 페이지로 진행
res.redirect('/');
}
인증이 되었는지 여부를 체크하고, 만약에 인증이 안되어 있다면 / 페이지로 리다이렉트 한다. 이는 로그인이 안된 상태에서 직접 /login_success 페이지로 접근할 경우, 다시 로그인 페이지를 보여주기 위함이다.
app.get('/logout', function(req, res){
req.logout();
res.redirect('/');
});
마지막으로 로그아웃페이지를 구현한다. /logout으로 들어가면 현재 로그인 되어 있는 세션을 로그아웃 처리한다. 이때 req.logout() 메서드를 호출하게 되면 passport에서 로그아웃 처리가 된다.
지금까지 간단하게나마, passport-facebook 모듈을 이용한 페이스북 로그인 서비스를 구현하였다. 빠르게 설명하기 위해서 가장 간단한 필수 기능만을 구현하였다 추가적인 사용정보를 받아들여서 저장하는 부분등은 직접 구현하기 바란다. J
이 예제에 대한 소스코드는
https://github.com/bwcho75/node.js_study/tree/master/passport-facebook 에 있다. (모듈 디렉토리 제외 되어있음. app.js와 index.html 만 참고할것)
'클라우드 컴퓨팅 & NoSQL > Vert.x & Node.js' 카테고리의 다른 글
| node.js에서 multipary와 multer를 이용한 파일 업로드 하기 (3) | 2016.03.10 |
|---|---|
| REST JWT(JSON Web Token)소개 - #2 node.js에서 JWT 사용하기 (3) | 2015.02.03 |
| 빠르게 훝어보는 node.js 온라인 강좌 (0) | 2014.07.18 |
| 빠르게 훝어 보는 node.js - #15 - Passport를 이용한 OAuth 2.0 API 인증 (Facebook 1/2) (3) | 2014.06.30 |
| 빠르게 훝어 보는 node.js - #14 - Passport를 이용한 사용자 인증 구축 (5) | 2014.06.30 |