nodejs 페이스북 회원가입

개요

클라이언트에서 웹페이지의 버튼 클릭 등으로 이미 구축해 놓은 server의 url에 페이스북 토큰과 함께 로그인 요청을 보내면, 서버는 passport 모듈을 통해 받은 토큰을 facebook에 보내어 인증을 거치고 페이스북에서 거친 인증값을 담아 서버의 callback 라우터에 요청을 보낸다.
서버는 요청을 받고 accessToken을 저장하며 accessToken과 유저정보들을 jwt 암호화를 거쳐 jwt를 발급하여 클라이언트에게 다시 보내어 준다.
클라이언트는 받은 jwt를 localStorage에 저장하고 앞으로 자동 로그인시에 해당 jwt 토큰을 사용한다.

passport 설치

npm install --save passport
npm install --save passport-facebook

모듈 import 하기

var NaverStrategy = require('passport-naver').Strategy;
var FacebookStrategy = require('passport-facebook').Strategy;
var KakaoStrategy = require('passport-kakao').Strategy;

필요한 모듈을 import 해준다.

개발자 정보를 비롯한 기밀 정보들 별도 파일에 저장

module.exports = {
  'secret' :  '',
  'db_info': {
    local: { // localhost
    ...
    },
    real: { // real
    ...
    },
    dev: { // dev
    ...
    }
  },
  'federation' : {
    'naver' : {
      'client_id' : '',
      'secret_id' : '',
      'callback_url' : '/auth/login/naver/callback'
    },
    'facebook' : {
      'client_id' : '',
      'secret_id' : '',
      'callback_url' : '/auth/login/facebook/callback'
    },
    'kakao' : {
      'client_id' : '',
      'callback_url' : '/auth/login/kakao/callback'
    }
  }
};

federation 객체에 네이버, 카카오, 페이스북 Developers 정보를 입력한다.
secret.js 민감한 정보를 갖고있는 파일들은 프로젝트 디렉토리에 포함시키지 않는 것이 바람직하다.

서버코드 작성

var secret_config = require('../commons/secret');
  var secret_config = require('../_commons/secret');
  var FacebookStrategy = require('passport-facebook').Strategy;
  passport.serializeUser(function(user, done) {
    done(null, user);
  });
  passport.deserializeUser(function(user, done) {
    done(null, user);
  });
  passport.use(new FacebookStrategy({
      clientID: secret_config.federation.facebook.client_id,
      clientSecret: secret_config.federation.facebook.secret_id,
      callbackURL: secret_config.federation.facebook.callback_url,
      profileFields: ['id', 'emails', 'name'] //This
    },
    function (accessToken, refreshToken, profile, done){
      console.log("profile", profile);
      console.log("accessToken:", accessToken);
      var _profile = profile._json;
      loginByThirdparty({
        'auth_type': 'facebook',
        'auth_id': _profile.id,
        'auth_name': _profile.first_name+" "+_profile.last_name,
        'auth_email': _profile.email,
        'auth_token': accessToken
      }, done);
    }
  ));



  router.get('/facebook',
    passport.authenticate('facebook',{authType: 'rerequest', scope: ['public_profile', 'email']})
  )

  // facebook 로그인 연동 콜백
  router.get('/facebook/callback', passport.authenticate('facebook',{failureRedirect: '/login/null/null'}),function(req,res){
    console.log("REQ",req);
    console.log("RES",res);
        res.redirect('http://localhost/login/'+req.user.email+"/"+req.user.jwt)
      }
  );

passport.use를 통해 OAuth 요청을 만들어서 네이버 로그인 처리를 진행하고 요청결과를 callback url로 라우팅 시켜줌을 설정한다.
먼저 auth/login/facebook으로 요청이 오면 페이스북으로 로그인 요청을 보내고 결과값을 callback url로 보내준다.
callback url을 처리하는 라우터는 로그인이 성공할 경우 인덱스 페이지로 리다이렉트 시켜주고 실패할 경우에는 다시 로그인 페이지로 리다이렉트 시켜준다.
앵귤러의 경우 특정 페이지에 리다이렉트 되면 컴포넌트가 생성되는 시점에서 query의 뒷부분에 붙은 email 과 jwt를 가지고 jwt는 저장하고 email로 유저의 정보를 받아와 클라이언트에서 사용한다.

/auth/facebook/callback은 페이스북이 검증을 마치고 난 결과를 전송해주는 주소이다.

서버의 로그인 함수 작성

function loginByThirdparty(info, done) {
  console.log('process : ' + info.auth_type);
  var stmt_duplicated = 'select *from `user` where `user_id` = ?';
  connection.query(stmt_duplicated, info.auth_id, function (err, result) {
    if (err) {
      return done(err);
    } else {
      if (result.length === 0) {
        // 신규 유저는 회원 가입 이후 로그인 처리
        var stmt_thridparty_signup = 'insert into `user` set `user_id`= ?, `nickname`= ?';
        connection.query(stmt_thridparty_signup, [info.auth_id, info.auth_name], function (err, result) {
          if(err){
            return done(err);
          }else{
            done(null, {
              'user_id': info.auth_id,
              'nickname': info.auth_name
            });
          }
        });
      } else {
        //기존유저 로그인 처리
        console.log('Old User');
        done(null, {
          'user_id': result[0].user_id,
          'nickname': result[0].nickname
        });
      }
    }
  });
}

auth.id 기반으로 신규 회원인지 기존 회원인지 판단한다.
신규 회원일 경우에는 user 테이블에 회원 정보를 저장 시키고 로그인 처리를 진행하고, 기존 유저일 경우에는 쿼리로 조회한 회원정보를 기반으로 로그인 처리를 진행합니다.
간단하게 말씀드리면 신규회원이든 기존 회원이든 원클릭으로 회원 가입 절차를 진행하게 할 수 있습니다.