Github 로그인 (1)

이번 글에서는 Github 로그인에 대해서 알아보겠습니다.

1) 우선 passport.js의 strategy 페이지로 이동해서 github을 검색하면

passport-github이라는 패키지를 확인할 수 있습니다.

2) 다음은 터미널에서 npm install passport-github을 통해서,

passport-github 패키지를 다운 받습니다.

3) 다음은 깃헙 개발자 페이지에서 어플리케이션 등록을 해야 합니다.

실제 사용자 인증이 일어나는 프로세스는 다음과 같습니다.

(1) 우선, 사용자를 깃헙 페이지의 특정 URL로 보냅니다.

(2) 사용자를 보내면, 깃헙이 "이 어플리케이션에게 당신의 정보를 줘도 괜찮습니까?"라고 물어봅니다.

(3) 사용자가 '괜찮아요'라고 해서 사용자의 승인을 받으면,

깃헙은 사용자를 다시 우리 어플리케이션으로 돌려보내는데,

그 때, 그 사용자의 정보도 같이 주게 됩니다.

4) 다음은 다시 passportj.js로 이동해서

import GithubStrategy from "passport-github"으로

passport-github 패키지를 추가해줍니다.

5) 다음은 github 페이지로 돌아와서 callback URL을 추가하고, 등록하기를 누릅니다.

Callback URL은 정해진 양식이 있는게 아니므로, 자신에게 맞는 양식으로 추가합니다.

등록하기를 누르면 새로운 페이지로 이동합니다.

그리고 가장 중요한 Client ID와 Client Secret을 확인할 수 있습니다.

6) 다음은 .env 파일로 이동해서 client ID와 client secret을 추가해줍니다.

client ID와 client secret을 .env 파일에 추가해 주는 이유는

이 두 가지가 외부에 절대로 노출되어서는 안되기 때문입니다.

7) 다음은 passport.js로 이동해서 다음과 같이 Strategy를 설정합니다.

8) passport.js의 passport-github 문서를 보면 Strategy 밑에 다음과 같은 함수가 있습니다.

이 함수는 사용자가 깃헙으로 갔다가 돌아올 때, 실행되는 함수입니다.

9) 위의 함수는 userControllers.js에 추가해준 후에,

passport.js에서 import 합니다.

다음은 사용자를 깃헙으로 보내는 과정이 필요한데, 이 과정은 다음 글에서 설명해보도록 하겠습니다.

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."