[유튜브 클론코딩] 6.7 Github Login Part.2

6.7 Github Login Part.2

사용자를 깃허브로 보낼 함수 작성하기(githubLogin)

위에서는 사용자가 깃허브에서 돌아왔을 때 실행할 함수를 작성한 거고

사용자를 깃허브로 보낼 함수도 작성해야 할 것이다.

userController에서 하나를 더 생성한다.

 

export const githubLogin = passport.authenticate('github');

↑ userController.js

이전에 local방식으로 인증했던 거랑 똑같은 코드이다.

 

공식 문서를 보면 이렇게 나와있는데 즉 누군가 저 루트로 접속하면 passport에서 github 방식으로 사용자를 인증해주겠다는 의미이므로 이걸 위한 루트도 만들어야 한다.

 

깃허브 로그인을 위한 루트 만들기

routes.js에서 먼저 변수를 만들어준다.

 

//Github

const GITHUB = "/auth/github";

const GITHUB_CALLBACK = "/auth/github/callback";

↑ routes.js

 

gitHub: GITHUB,

gitHubCallback: GITHUB_CALLBACK

↑ routes.js

const routes ={} 안에 이렇게 넣어준다.

 

로그인 되었을 때 홈으로 보내줄 함수 만들기(postGithubLogIn)

📌흐름 설명

누군가 /auth/github 으로 들어가면, githubLogin을 써서 인증할 것이다.

그러면 인증이 진행되고, 그게 완료가 되면 사용자는 아까 그 전략에서 쓴 callbackURL로 돌아오게 될 것이다.

 

📌홈으로 보내줄 함수가 필요

만약 사용자 인증이 잘 되어서 정보를 전달받을 때 사용자를 callbackURL로 데려올텐데 그 말은 곧 사용자가 로그인 된다는 뜻이고, 로그인이 되면 홈으로 보내줘야 할 것이다. 로그인이 성공해서 사용자를 홈으로 보내주는 함수를 만든다.

 

export const postGithubLogIn = (req,res) => {

    res.redirect(routes.home);

}

↑ userController.js

 

globalRouter에 연결시키기

globalRouter.get(routes.github, githubLogin);

가장 먼저, 사용자는 github로 가게 된다 (/auth/github)

 

globalRouter.get(routes.githubCallback, passport.authenticate('github', { failureRedirect: '/login' }), postGithubLogIn );

사용자가 돌아왔을 때 /callback으로 돌아온다 => 로그인에 실패했다면 다시 로그인으로 돌아가고, 성공했다면 홈으로 간다

이런 흐름인데 그걸 globalRouter.js에서 이렇게 쓴다.(짧으니까 바로 저렇게 쓰는 것임)

 

템플릿에서도 라우트를 추가해주기

.social-login

    button.social-login--github

        a(href=routes.gitHub)

            span

                i.fab.fa-github 

            |Continue with Github

    

    button.social-login--facebook

        span

            i.fab.fa-facebook

        |Continue with Facebook

↑ socialLogin.pug

 

 

✨정리

globalRouter.get(routes.gitHub, githubLogin);

globalRouter.get(routes.gitHubCallback, passport.authenticate('github', { failureRedirect: '/login' }), postGithubLogIn );

사용자가 gitHub으로 가면(/auth/github), githubLogin을 실행시킬 건데 이 함수는 passport.authenticate("github")을 실행시킨다.

그렇게되면 passport의 strategy를 이용하게 된다.(passport.js에 작성했던 github strategy)

깃헙 페이지로 갔다가 돌아올 때 이 callbackURL로 돌아오면서 우린 사용자 정보를 얻게 될 것이다.

callback URL로 접근했다면 passport.authenticate를 사용해서 passport의 strategy 로 가게되고 거기서 githubLoginCallback 함수를 실행하게 된다.

 

로그인 과정이 성공적이었고 이 함수가 문제없이 결과를 리턴하면 우리는 postGithubLogin을 실행하는데 이것은 사용자를 home 화면으로 보내줄 것이다.

 

 

실행해보기

일단 여기까지 하면 깃허브로 잘 된다.

그런데 우리가  githubLoginCallback함수를

export const githubLoginCallback = (accessToken, refreshToken, profile, cb) => {

    console.log(accessToken, refreshToken, profile, cb);

};

이렇게 작성해줬으므로 콘솔에서 저 정보가 뜨고 있긴 하는데, 깃허브한테 좋아 정보 잘 받았어 라고 답을 하기 전까지 깃허브가 계속 로딩중일 것이다.

이건 다음 시간에 처리해보도록 한다.

 

로그아웃

export const logout = (req,res) => {

    req.logout();

    res.redirect(routes.home);

}

↑ userController.js

req.logout()이라만 써주면 passport가 로그아웃시켜줄 수 있다.

 

globalRouter.get(routes.logout, onlyPrivate, logout);

↑ globalRouter.js

로그아웃은 only private이기 때문에 이렇게 미들웨어도 넣어준다.