Github 로그인 (2)

이번 글에서는 이전 글에 이어서 사용자를 깃헙으로 보내는 과정을 설명하겠습니다.

1) userControllers.js로 이동해서

export const githubLogin = passport.authenticate("github")

을 추가합니다.

2) 다음은 routes.js로 이동해서

const GITHUB = "/auth/github"; 과

const GITHUB_CALLBACK = "/auth/github/callback"을 추가해줍니다.

3) 그리고 const routes에 두 개의 routes를 추가합니다.

4) 다음은 passport.js로 이동해서,

import routes from "routes"; 를 추가하고, callbackURL을 다음 스크린샷과 같이 수정합니다.

5) 다음은 globalRouters.js로 이동해서

globalRouter.get(routes.github, githubLogin)을 추가합니다.

흐름을 다시 한 번 정리하자면 다음과 같습니다.

(1) 누군가 /auth/github으로 들어가면, 나는 githubLogin을 써서 인증합니다.

(2) 그러면 인증이 완료되고, 인증이 완료되면 사용자는 callbackURL로 돌아옵니다.

즉, 여기서 사용자가 돌아올 callbackURL을 만들어주는 것이 필요합니다.

6) globalRouters.js로 이동해서,

globalRouter.get(routes.githubCallback,) 을 만들어줍니다.

그리고 userControllers.js로 이동해서

postGithubLogin 컨트롤러를 추가해줍니다.

7) 다음은 globalRouter.get()에 다음과 같이 코드를 추가해줍니다.

각 줄의 의미는 다음과 같습니다.

import passport from "passport"; : githubCallback 라우터에서 passport 인증을 활용하기 위해서

import합니다.

globalRouter.get(routes.githubCallback) : 사용자가 돌아올 주소를 지정해줍니다.

passport.authenticate("github", {failureRedirect: "/login"}) : 돌아온 사용자를 Passport 인증을

활용해서 로그인 시킵니다.

postGithubLogin: 로그인이 완료되면, 사용자를 다시 home으로 리다이렉트 시킵니다.

8) 다음은 view를 수정해줄 차례입니다.

view를 수정하는 이유는 실제 Github 버튼을 클릭하면,

사용자가 Github 페이지로 이동해야 하기 때문입니다.

다음과 같이 a(href=routes.gitHub)이라는 코드를 span 위에 추가해줍니다.

이 때, 실행의 흐름은 다음과 같습니다.

(1) 사용자가 github으로 가면, github 라우터에서 요청을 처리합니다.

(2) github 라우터가 요청을 받으면, githubLogin 컨트롤러를 호출합니다.

(3) githubLogin 컨트롤러는 passport.authenticate("github")을 실행시킵니다.

(4) 그렇게 되면, passport.js의 passport strategy가 실행이 됩니다.

(5) 그리고 github 페이지로 갔다가 callbackURL로 돌아오면서, 우리는 사용자 정보를 얻게 됩니다.

(6) 이 때, 어떤 사용자가 callbackURL로 접근하게 되면, globalRouter의 routes.githubCallback

으로 이동합니다. 그리고 passport.authenticate이 실행됩니다.

(7) passport.authenticate이 실행되면,

passport strategy 밑에 있는 githubLoginCallback 함수를 실행하게 됩니다.

(8) 이 때, 로그인 과정이 성공적이고, 이 함수가 문제 없이 결과를 리턴한다면

globalRouter의 postGithubLogin을 실행합니다.

(9) 그리고 postGithubLogin은 사용자를 home으로 보내줍니다.

+ @ (실제 localhost:4000/ 화면에서 결과를 확인하는 스크린샷)

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