블로그 이미지
평범하게 살고 싶은 월급쟁이 기술적인 토론 환영합니다.같이 이야기 하고 싶으시면 부담 말고 연락주세요:이메일-bwcho75골뱅이지메일 닷컴. 조대협


Archive»


빠르게 훝어보는 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 참고할것)

 

본인은 구글 클라우드의 직원이며, 이 블로그에 있는 모든 글은 회사와 관계 없는 개인의 의견임을 알립니다.

댓글을 달아 주세요

  1. 방문객 2015.03.07 19:58  댓글주소  수정/삭제  댓글쓰기

    앱의 프로필 이미지 권한같은것은 어떻게 요청하나요?

  2. 준엽 2015.10.27 03:59  댓글주소  수정/삭제  댓글쓰기

    홈페이지를 VPS에 올리기전에는 localhost 로해서하니깐 페이스북 로그인이 되는데
    vps업로드후에는 localhost에서 어떻게 바꿔주어야하나요?

  3. 질문자 2015.11.23 15:52  댓글주소  수정/삭제  댓글쓰기

    이거 프록시 뒤에서 하면 바로 안되나요??? 별도의 셋팅이 필요한 것인지 질문 드립니다.

    • 질문자 2015.11.23 17:19  댓글주소  수정/삭제

      클라이언트 쪽에서 net::ERR_CONNECTION_RESET 라고 나오는데 어찌 해결해야할지 ㅠㅠ