OAuth로 구글 로그인을 구현해보자

🔐 OAuth

우리가 개발을 하다보면 구글 계정을 통한 개인 정보를 활용하고 싶은 경우가 생긴다.

이를 위해서 우리 개발 서버에서 유저의 구글 아이디와 비밀번호를 저장하고 있다면 쉽게 계정 정보에 접근할 수 있을 것이다.

하지만 이러한 방법은 보안상으로 매우 위험하다.

그래서 이를 해결하기 위해 나온 것이 OAuth 이다.

사용자의 아이디와 비밀번호를 전달하는 대신, 구글이 제공하는 랜덤하고, 일정 기간동안만 사용될 수 있는 임시 비밀번호를 개발 서버에서 전달받는 것을 OAuth가 가능하게 해준다.

우리의 개발 서버는 구글(또는 다른 서비스들)로 부터 access token(임시 비밀번호) 을 전달받고, 이 access token 을 사용하여 구글의 서비스에 접근할 수 있다!

 

OAuth를 이해하기 위해서는 Resource Owner, Client, Resource Server, Authorization Server 에 대해 알아야 한다.

- Resource Owner: 유저

- Client: 개발 서버

- Resource Server: 다른 서비스(구글, 페이스북...) 서버, 유저의 정보를 가지고 있다.

- Authorization Server: 인증코드, access token 을 발급해주는 서버

 

먼저 OAuth를 사용하기 위해서는 먼저 정보를 등록해야 한다.

구글같은 경우에는 이곳에서 등록하면 된다.

console.cloud.google.com/projectselector2/apis/dashboard?pli=1&supportedpurview=project

Google Cloud Platform

등록을 하게 되면 다음과 같이 클라이언트 Id, 클라이언트 secret 이 생성된다.

그래서 클라이언트(개발자)에서도 생성된 클라이언트 id, 클라이언트 secret 정보를 알 수 있다.

 

등록을 할 때, 정보에는 redirect url이 들어가야 한다. 

그러면 Authorization server 는 어느 웹페이지에서 접속했는지 알게 되고, 이 url로 auth code와 access token을 보내준다.

redirect url에 등록되어 있지 않은 url에 대해서는 access token을 보내주지 않는다.

 

 

 

🖋 Passport 인증

passport는 인증기능을 전문적으로 작성하기 위한 모듈이다.

passport는 다음과 같은 과정을 거쳐야한다.

1. 모듈 로딩과 초기화

npm i passport(or yarn add passport)를 통해 모듈을 다운로드 받아야 한다.

const passport = require('passport');
app.use(passport.initialize());

 

2. strategy 설정

local auth나 외부 auth(구글 OAuth, 페이스북 OAuth...) 등을 사용 가능하다. 

const Strategy = require('passport-strategy').Strategy;
passport.use(new Strategy(function name, password, done){});

* 구글 OAuth를 사용하는 경우

npm i passport-google-oauth20(or yarn add passport-google-oauth20)를 통해 모듈을 다운로드 받아야 한다.

const Strategy = require('passport-strategy').Strategy;
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
        clientID: 'GOOGLE_CLIENT_ID',
        clientSecret: 'GOOGLE_CLIENT_SECRET',
        callbackURL: 'https://mydomain/auth/google/callback'
    }, function(accessToken, refreshToken, profile, done) {
        process.nextTick(function() {
            user = profile;
            return done(null, user);
        });
    }
));

 

3. 인증

- 인증 요청 성공: 성공 status, msg + 로그인 성공에 대한 페이지(클라이언트)

- 인증 요청 실패: 실패 status, msg + 로그인 실패에 대한 페이지(클라이언트)

app.post('/login', passport.authenticate('local'));

* 구글 OAuth를 사용하는 경우

app.get('/auth/google', passport.authenticate('google', { scope: ['profile']}));

app.get('/auth/google/callback', passport.authenticate( 'google', { failureRedirect: '/login' }),
    function(req, res) {
    	res.redirect('/'); 
	}
);

* scope란?

접근할 수 있는 데이터 범위를 정해주는 것.

access token이 어느 기능에 대해서 유효한지를 나태낸다.

로그인시 옵션으로 추가하여 사용한다.

 

4. 세션 기록과 읽기

passport.serializeUser((user, done) => {});
passport.deserializeUser((id, done) => {});

- serializeUser: 세션에 기록하는 함수이다.

주로 로그인 요청을 할 때(로그인 성공시) 필요하다. 인증 이후 세션 기록에 사용된다.

- deserializeUser: 세션 기록을 읽어오는 함수이다. 

로그인 이외의 요청마다 필요하다.

* 세션이란?

쿠키는 클라이언트에 데이터를 저장하는 반면, 세션은 서버에 데이터를 저장한다.

서버에 저장된 정보가 어느 클라이언트와 연결된 데이터인지 알기 위해 세션 식별 정보(세션 ID)가 필요하다.

 

5. 사용자 정보

세션에서 읽어온 사용자 데이터는 req.user를 통해 접근 가능하다.