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

2. express를 설정하고 다음 session을 설정한다.


먼저 server.js 파일을 생성하고 아래와 같이 작성한다.


https://www.npmjs.com/package/express-session 에 접속해서 기본적인express-session을 사용하기 위해

아래 주석 //1의 미들웨어를 설정한다.

주석 //2번은 localhost:3000으로 접속할 때 나오는 기본 화면이다.

주석 //3은 express를 통해  3000포트를 이용하여 서버를오픈한다.

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 


+ Recent posts