[In process] 웹게임 개발기 (12) - Google OAuth 적용하여 회원가입/로그인 UX 향상시키기

이제 회원가입과 로그인은 Google과 KaKao등 이미있는 계정으로 간접로그인을 하는 방식이 대세가 되었다.

 

우리 서비스도 고전적인 회원가입/로그인 방식과 더불어 Google/KaKao OAuth 방식을 적용하기 위해 관련된 정보를 찾아보았다.

 

1. OAuth의 등장배경

OAuth는 사용자가 제3자인 서비스에게 연동대상서비스(구글, 카카오 등)의 pure ID/PW를 제공하는 것은 보안상 매우 문제가 될 여지가 있다. 사용자입장에서는 메이저 웹서비스가 아닌 이상 다른 서비스의 ID/PW를 제공하기 어렵기 때문이다.

(* 사족을 달자면, 보안이 약한 웹서비스를 해킹한 뒤, 해당 서비스의 ID/PW로 다른 서비스에 로그인 시도를 해보는 해킹사례도 있다.)

서비스, 사용자, 연동대상서비스(구글,페이스북,카카오 등) 의 3가지 주체가 있는데, 서비스는 연동대상서비스에게서 access token을 전달 받아 사용자의 연동대상서비스에 저장된 최소 정보만을 활용할 수 있게 해주는 방식이다.

또한, JWT(Json Web Token) 처럼 별도의 Refresh token을 받아 로그인상태 유지 등 로직처리가 가능하다.

 

2. OAuth 2.0의 구현

1) 먼저, Google OAuth 2.0를 구현하기 위해서는 Google Could 에서 Project 생성을 하고, OAuth 등록을 통해 정보를 입력해야 한다.

* 접속할 URL와 리다이렉트될 URL을 등록해야한다. URL을 등록하면, client id, client secret 등이 담긴 json을 다운로드 받을 수 있다.

** client id는 노출되어도 되지만, client secret은 외부에 노출되면 안된다. 그렇기 때문에 .gitignore에 등록하거나 별도 디렉토리에 몰아놓고 등록해두는 편이 좋다.

 

2) 또한, google api for nodejs 를 확인하여 어떻게 구현할지 확인해보았다.

* OAuth2 client 항목을 참고하면 된다. https://github.com/googleapis/google-api-nodejs-client?tab=readme-ov-file#oauth2-client

** Generating an authentication URL 항목에 로그인/회원가입 버튼 클릭 시 이동할 URL을 반환하는 코드 예시가 있다.

GitHub - googleapis/google-api-nodejs-client: Google's officially supported Node.js client library for accessing Google APIs. Su

 

3) Google API를 설치해야한다. (nodejs 기준)

npm install googleapis

 

4) 내부에서 URL을 반환받는 미들웨어를 작성하고, google login을 위한 버튼을 클릭 시 해당 미들웨어로부터 url을 얻어서 반환해주는 로직을 작성해준다.

* Redirect URL 뒤에는 '/'가 꼭 붙어야 구글 로그인서버에서 인식한다.

** 해당 URL로 서버에서 바로 라우팅시켜서 리다이렉트해서 보내는 게 아니라, response로 url을 보내주면, 로컬에서 해당 주소로 가는 방식으로 구현해야한다. 이는 구글에서 CORS 이슈로 인해 그렇게 개발하라고 한다.

// oauth2 secret 정보
// development information
const oauth2_secret = require('../env/oauth2_secret_dev.json');
// production information
// const oauth2_secret = require('../env/oauth2_secret_pro.json');

// google api module
const {google} = require('googleapis');

// client 정보
const YOUR_CLIENT_ID = oauth2_secret['web'].client_id;
const YOUR_CLIENT_SECRET = oauth2_secret['web'].client_secret;
const YOUR_REDIRECT_URL = 'http://localhost:80/'; // 주소 뒤에 '/'가 꼭 붙어야 한다.

const oauth2Client = new google.auth.OAuth2(
  YOUR_CLIENT_ID,
  YOUR_CLIENT_SECRET,
  YOUR_REDIRECT_URL
);

// generate a url that asks permissions for Blogger and Google Calendar scopes
const scopes = [
  'https://www.googleapis.com/auth/userinfo.email',
  'https://www.googleapis.com/auth/userinfo.profile'
];

const url = oauth2Client.generateAuthUrl({
  // 'online' (default) or 'offline' (gets refresh_token)
  access_type: 'online',

  // If you only need one scope, you can pass it as a string
  scope: scopes
});

module.exports = url;

 

 

5. 이렇게 까지 구현해놓으면 정상적으로 구글 로그인 동의창이 팝업된다. 아래 계정 목록 중에 내 계정을 선택하여 로그인하면 된다.

[사진] 로그인 계정 선택창

[사진] 로그인 동의창

6. 로그인 후 Redirect URL(여기서는 localhost:80/ 으로 지정) 으로 넘어가면 전에는 없던 code라는 query 변수가 생겼다. 이는 google에서는 authorization code라고 하는데, 이는 추후 access token을 얻는 데에 활용된다.

[사진] 로그인 후 URL

7. 이제는 google 웹승인을 참고하여 access token을 얻어야 한다.

https://developers.google.com/identity/oauth2/web/guides/overview?hl=ko

웹 승인  |  Authorization  |  Google for Developers

8. 이제 OAuth 도 OAuth지만 OpenID connect라는 개념을 알아야한다.