[유튜브 클론코딩] 6.6 Github Login Part.1

6.6 Github Login Part.1

passport-github 설치하기

github로 로그인하는 방식을 구현해볼 거기 때문에 github strategy를 설치해야 한다.

설치: npm install passport-github

 

📌깃허브로 로그인 하는 흐름

깃허브로 로그인을 시키려고 하면 사용자를 깃허브로 보낼거고,

깃허브가 사용자 정보를 줘도 되겠느냐고 물어보고 사용자는 ok를 할 것이다

그렇게 깃허브가 사용자의 승인을 받으면 사용자를 다시 우리 어플리케이션을 돌려보내는데

그 사용자의 정보도 같이 줄 것이다.

 

깃허브에서 어플리케이션 등록하기

https://github.com/settings/applications/new

 

 

위의 사이트로 들어가서 등록을 하면 clientID와 clientSecret을 얻을 수 있다.

 

github strategy를 만들 때 clientID와 clientSecret을 넣어줘야 하는데, 이런 것들은 환경변수(.env)로 넣어야 한다.

위의 어플리케이션을 등록한다음 나오는 화면에서 clientID와 clientSecret을 복사해서 .env에서 GH_ID와 GH_SECRET이라는 이름으로 변수를 만들어준다.

💣주의: 비밀키 같은 걸 절대 다른 사람과 공유하면 안된다!!!

 

passport.js에서 import하고 전략만들기

 

import GithubStrategy from "passport-github";

↑ passport.js

 

passport.use(new GithubStrategy({

    clientID: process.env.GH_ID,

    clientSecret: process.env.GH_SECRET,

    callbackURL: "http://localhost:4000/auth/github/callback"

    })

);

↑ passport.js

그리고 github strategy를 사용하도록 다음과 같이 코드를 작성한다.

GH_ID와 GH_SECRET은 아까 설정한 환경변수이다.

위의 양식은 passportjs에서 참고할 수 있다. 걱정하지 않아도 될 것 같다.

 

 

사용자가 깃허브에서 돌아왔을 때 실행될 함수 작성하기(githubLoginCallback)

 

그 다음으로 작성할 것은 사용자가 깃허브에서 돌아왔을 때 실행이 되는 함수를 작성할 것이다.

userController에 가서 작성한다. (postLogin 아래에 작성)

 

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

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

};

↑ userController.js

위의 것들은 passportjs의 문서에서 복사해왔다.

그리고 이 함수를 아까 passport.js에 가져온다.

 

passport.use(new GithubStrategy({

    clientID: process.env.GH_ID,

    clientSecret: process.env.GH_SECRET,

    callbackURL: "http://localhost:4000/auth/github/callback"

   }, githubLoginCallback)

);