PangYeon`s IT Log

Node.js에서 google oauth 인증하는 방법이다. 

이전에는 passport를 사용하지 않는 방법을 이용하여 JWT와 함께 쿠키로 로그인 인증처리를 했다면,

이번엔 세션을 이용하여 passport를 이용하는 방법이다.

기본적으로 https://console.cloud.google.com 에서 프로젝트를 생성했다는 가정하에 작성한다.

1. passport를 이용하지 않은 google oauth 인증 후 jwt 사용

2019/01/07 - [Develop/Node.js] - [Node.js] google oauth 인증 (구글 로그인)

1. 적당한 프로젝트를 생성 후 아래와 같은 명령어를 입력한다.

npm init npm install express --save npm install express-session --save npm install session-file-store --save npm install passport --save npm install passport-google-oauth

express 를 사용할 것이기 때문에 express를 설치한다. 그리고 passport는 기본적으로 session을 이용하기 때문에 express-session도 설치하고

session 저장소를 파일로 처리할 것이기 때문에 session-file-store 를 설치한다.

그리고 사용할 passport와 passport의 전략중 하나인 passport-google-oauth를 설치한다.

※아래엔 express-session에서 파일로 세션을 저장하는 것 말고 데이터베이스 등을 사용하는 방법을 확인 할 수 있다.

https://www.npmjs.com/package/express-session

var express = require('express'); var session = require('express-session') var FileStore = require('session-file-store')(session) var app = express();  app.use(session({                // 1     secret: 'keyboardcat',     resave: false,      saveUninitialized: true,     store: new FileStore() }))  app.get('/', function (req, res, next) {    //2     console.log('홈')      })   app.listen(3000, function () {            //3     console.log('Example app listening on port 3000!'); }); 

3.  Google Cloud Platform 에서 Json 파일을 다운받고, config 폴더를 만든 뒤 다운받은 json 파일을 config폴더에 넣는다.

사진 맨 오른쪽 하단에 빨간줄로 표시한 아이콘을 클릭하여 json파일을 다운받는다.

다운받은 json 파일엔 기본적으로 아래와같이 나와있다.

이 파일을 아래 처럼 넣는다. 이유는 그냥 가져다 쓰는 것보다 저렇게 가져오는 것이 조금이나마 안전하기 때문.

4. passport를 설정한다.

4-1. passport 전략 중 하나인 우리가 사용할 passport-google-oauth를 사용한다.

server.js에 추가한다.

//1 아래와 같이 passport를 가져오고

//2 passport를 초기화시킨다.

//3 session을 이용하기 때문에 추가한다.

//4 실질적으로 로그인할 수 있는 경로와 scope이다. scope에서는 email이나 기타 정보를 가져 올 수도 있다.

//5 메인페이지에 4번에서 설명한 실질적으로 로그인하는 경로를 설정한다.

var passport = require('passport'),       GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;    //1  app.use(passport.initialize());    //2 app.use(passport.session());        //3  app.get('/auth/google',            //4   passport.authenticate('google', {        scope: 'https://www.googleapis.com/auth/plus.login' }))  app.get('/', function (req, res, next)   {    //5        var html = `     login with google`     res.send(html) }) 

위와 같이 설정하고 'node server.js' 명령어를 통해 실행해서 접속하면 아래와 같은 화면이 뜬다.

4-2. 구글 로그인을 해서 정보를 얻어올 로직과 세션에 담을 로직을 구현한다.

//1 은 로그인했을 시 얻어오는 정보가아니라 그냥 임의로 넣었다 사실 이렇게 하는 것은 아니고 바로 아래에서 다시 설명할 예정

//2 로그인 성공하고 로그인 성공했을 때 가져오는 user.id를 세션에 설정한다.

//3 로그인이 성공했으면 페이지를 항상 새로 불러올 때마다 불러오는 것이다. 

그리고 세션에서 serialize에서 설정한 user id를 불러온 후 user 정보를 보여주는 것이다.

//4 아까 json파일에서 client_id와 secret, redirect uri를 불러온다.

//5 로그인이 성공했을 경우 scope를 설정한대로 구글측에서 profile 정보를 가져온다.

//5를 통해 로그인이 성공하면 scope에서 설정한 대로 profile에서 정보를 가져오는데 

성공적으로 가져왔으면 이를 done을 통해 정보를 설정하면

serializeUser로 가서 설정하고

설정된 값이 deserializeUser에서 불러온다.

다시말하자면 원래 var loginData를 설정하는 것이아니라

//5에서 일단 로그인 인증 처리를 한다 -> 데이터베이스에 넣거나, 데이터베이스에 있는 값을 가져와 회원이 맞는지 비교를 한다든지

이런 기본적인 로그인 처리를 설정하고. 이것이 통과된다면 done을 통해 정보를 return하면

//2의 serializeUser가 호출되는데 여기서 user.id ( 꼭 id가아니라 email이면 user.email도 가능) 을 session에 설정한다.

//3 그럼 페이지가 항상 호출될 때마다 deserializeUser가 호출 되는데 deserializeUser의 id를 통해

데이터베이스에 접속해서 이 아이디가 로그인이 된 상태라든지 이런 것들을 확인할 수 있다.

(너무 이상하게 설명한 것 같은데 이해가 되지않는다면 댓글에 적어주시면 감사하겠습니다.)

var config = require('./config/google.json')

var loginData = {        //1 id : 'test', pw : '1' } passport.serializeUser(function(user, done) {    //2 console.log('serialize', user); done(null, user.id); }); passport.deserializeUser(function(id, done) {    //3 console.log('deserialize', id); done(null, loginData) }); passport.use(new GoogleStrategy({                //4 clientID: config.web.client_id, clientSecret: config.web.client_secret, callbackURL: config.web.redirect_uris[0] }, function(accessToken, refreshToken, profile, done) {    //5 return done(null, loginData) } ));

4-3. 로그인이 정상 처리 되어 callback될 주소를 설정한다.

//1 Json파일의 redircet_uri를 설정한다 기본적으로 /auth/google/callback 이다.

//2 로그인이 정상 처리 된다면 //3의 redirect('/') 홈으로 가고 

실패하면 /bye로 보냈다. 이것은 다시 로그인 하는 곳으로 보낼 수 있고 처리하는 것은 개발자 마음이다.

//4 이것을 설정하지 않으면 세션이 스토어에 저장하는 데 오래걸릴 경우 리다이렉트를 시킬 수 있기 때문에 이를 방지하여

세션이 스토어에 저장이 완료되면 리다이렉트를 시키는 코드이다.

//5 로그인 실패시 보내는 주소이다.

//6 위에서 설정한 app.use(passport.session()) 미들웨어를 통해 req에서 user를 호출 할 수 있다. 

이것을 통해 deserilize가 호출 되는 것을 확인할 수 있다.

app.get('/auth/google/callback',     //1 passport.authenticate('google', {     //2     failureRedirect: '/bye'      }),     function(req, res) {                //3         req.session.save(function(){     //4                                         res.redirect('/');         })     });   app.get('/bye', function (req, res, next) {    //5     res.send('login failed') })  app.get('/', function (req, res, next) {     console.log(req.user)        //6     var html = `     login with google`     res.send(html) }) 

5. 결과

node server.js 명령어를 통해 실행 후

login with google을 클릭하여 로그인을 하게되면

로그인이 성공하면 serialize를 호출하고 

페이지를 새로고침할 때마다 deserialize가 호출 되는 것을 볼 수 있다.

6. 전체 코드

var express = require('express'); var session = require('express-session') var FileStore = require('session-file-store')(session) var config = require('./config/google.json'); var app = express();  app.use(session({     secret: 'keyboardcat',     resave: false,      saveUninitialized: true,     store: new FileStore() }))  var loginData = {     id : 'test',     pw : '1' } var passport = require('passport'),       GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;  app.use(passport.initialize()); app.use(passport.session());  passport.serializeUser(function(user, done) {     console.log('serialize', user);     done(null, user.id);   });    passport.deserializeUser(function(id, done) {     console.log('deserialize', id);     done(null, loginData)   });   passport.use(new GoogleStrategy({     clientID: config.web.client_id,     clientSecret: config.web.client_secret,     callbackURL: config.web.redirect_uris[0]   },   function(accessToken, refreshToken, profile, done) {         return done(null, loginData)     } ));  app.get('/auth/google',   passport.authenticate('google', {        scope: 'https://www.googleapis.com/auth/plus.login' }))   app.get('/auth/google/callback',  passport.authenticate('google', {      failureRedirect: '/bye'      }),     function(req, res) {         req.session.save(function(){                                                         res.redirect('/');         })     });  app.get('/', function (req, res, next) {     console.log(req.user)     var html = `     login with google`     res.send(html) })  app.get('/bye', function (req, res, next) {     res.send('login failed') })  app.listen(3000, function () {     console.log('Example app listening on port 3000!'); });

참고 : 

https://www.npmjs.com/package/express-session

Node.js Express 설치방법

1. node.js 설치

https://nodejs.org/ko/ 접속하여 node.js 설치한다.

2. Visual studio code 나 atom, subprimetext를 이용하여 프로젝트를 생성한다.

(visual studio code)

3. Terminal 에서 npm init 명령어를 입력하여 package.json 파일을 만든다.

npm init

4. Terminal 에서 npm install express --save 명령어를 입력하여 node_modules를 설치한다.

npm install express --save

5. 설치후 server.js 파일을 생성하고 아래와 같이 입력한다.

server.js

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

6. Terminal 에 node server.js 를 입력한다.

node server.js

7. localhost:3000 에 접속하여 Hello World!를 확인한다.

참고 : https://expressjs.com/ko/