[Node.js] 소셜 로그인 정복하기 - facebook

<본 포스팅은 공부 목적으로 작성되었습니다. 혹시 틀린 부분이 있거나 문제가 되는 부분이 있다면 답글 달아주세요!>

 

소셜 로그인 개발은 몇달 전 진행했던 개발인데.. notion에 적어두었다가 지금에서야 블로그를 작성합니다 ㅎㅎ..

 

페이스북, 카카오, 애플, 구글 이렇게 4가지 소셜 로그인을 진행하였고 먼저 페이스북부터 정리해보겠다.

 

소셜 로그인 구현은 모두 공식문서를 기반으로 구현하였다.

 

https://developers.facebook.com/docs/facebook-login/web

1. 페이스북 개발자 계정에서 앱 등록하기

 

앱을 등록하게 되면 앱의 ID가 나오는데 이를 개발에 이용합니다.

 

 

2. 어떠한 flow 로 소셜 로그인이 진행되는지 살펴보자.

 

문서를 읽어보면서 이해한 그대로 도식화해보았다. 

 

<이해해본 순서>

1. client가 facebook server로 회원가입 요청

 

2. facebook server가 accessToken 전송

 

3. client가 서비스 서버로 accessToken 전송

 

4. 서비스 서버가 access Token이 유효한지 facebook server에 검증 및 유저 데이터 요청

 

5. 유효한 access Token이면 user Data 전송

 

6. 서비스 서버가 받은 유저 데이터를 저장 및 가공 후 client에 응답

 

3. 서비스 서버(백엔드) 를 구현하는 것이므로 3,4,5,6번을 처리해 줄 수 있게 구현

 

access Token 요청이 오면 이를 검증하고 반환된 유저 데이터를 저장할 수 있는 코드가 필요하다.

 

유틸리티에 verifyFacebook 메서드 구현을 진행하였다.

 

- Node.js 용 페이스북 라이브러리를 설치해준다.

https://www.npmjs.com/package/fb

fb

 

- 이를 이용하여 facebook 에  accessToken을 검증하고 id, email, name의 유저 정보를 반환해주는 코드를 작성해보았다. 

(appId는 환경변수로 지정해주도록하자.)

 

accessToken이 잘 동작하는지 확인하고 싶으면 아래 공식 페이지에서 확인 가능하다. 

https://developers.facebook.com/docs/graph-api/explorer/

const env = process.env.NODE_ENV || 'local';

const FB = require('fb');

let facebookAccountOauthClient;
if (env !== 'ci') {
  if (!process.env.SECRETS) {
    throw Error('`SECRETS` 환경변수가 설정되어 있지 않습니다');
  }
  facebookAccountOauthClient = JSON.parse(process.env.SECRETS).oauth.facebook;

  if (!facebookAccountOauthClient.appId) {
    throw Error('`SECRETS`에 `appId`가 없습니다.');
  }
}

/**
 * @param {string} accessToken
 * @returns {(function(): boolean)|Promise<object|true|undefined>}
 */
const verifyFacebook = (accessToken) => {
  if (env === 'ci') return async () => true;

  FB.options({
    appId: facebookAccountOauthClient.appId,
    xfbml: true, // Parse social plugins on this webpage.
    version: 'v8.0', // Use this Graph API version for this call.
  });

  FB.options({ accessToken });

  return new Promise((resolve, reject) => {
    FB.api('/me', { fields: ['id', 'name', 'email'] }, (response) => {
      if (!response || response.error) reject(response.error);
      resolve(response);
    });
  });
};

module.exports = {
  verifyFacebook,
};

 

+ 소셜 로그인은 유저의 고유한 id로 판별하므로 facebookAccount 칼럼을 만들어 반환된 id값을 저장해주었다.

 

소셜 회원가입 구현전에는 마냥 어렵고 복잡하겠지 생각했는데 막상 해보니 어렵지 않았다 ㅎㅎ

 

그냥 문서만 잘 읽어보면 될 듯싶다. ㅋㅋㅋ