Passport - Github login

설치

#npm install passport-github

Github API 설정

Github 개발자 OAuth 설정에 들어가서 New OAuth App을 선택한다.

빈 칸을 채우고 제출한다.

  제출을 하고 나면 고유의 Client ID와 Client Secret을 받게 되는데 이 값을 .env 파일에 저장하자. 절대로 노출되면 안 된다. 그렇기 때문에 나도 지워서 게시글을 올린 것이다.

 

Github Strategy 설정

  모든 Strategy는 아래 그림과 거의 유사하다. clientID와 Secret을 얻어내고 callbackURL에 회원 가입 정보를 전송하는 방식이다.

Github Strategy

위에 코드를 나의 서버에 customizing 하면 다음과 같이 된다.

passport.js

passport.js

  userController.js에 선언한 githubStrategy 함수다. console.log()로 profile의 정보를 확인하면 _json에 많은 정보가 담겨있는 것을 확인할 수가 있다.  id는 githubId 값이다. github로부터 정보들을 가져왔으면 try catch 구문으로 DB에서 user를 찾거나 생성한다. DB에서 값을 가져올 때는 항상 async await 구문을 사용해야 한다.

  model.findOne API를 사용해서 users collection에 (github)email과 똑같은 email을 가지는 계정이 있는지 조회를 한다. 만약 존재한다면 그 값을 반환할 것이고 없다면 null을 반환할 것이다. 만약 user가 존재한다면 user의 githubId 값을 설정하고 user.save()로 저장한다. 여기서 내가 user.githubId=id;로 id 값을 줬더라도 user.save()를 하지 않으면 MongoDB에 저장이 되지 않는다. 마지막으로 return cb(null, user)를 통해서 함수를 종료한다.

  만약 user가 존재하지 않다면 User.create로 mongoDB에 newUser를 생성한다.

githubStratey

 

routes.js

routes.js

globalRouter.js

globalRouter.js

uesrController.js

uesrController.js

요약

  user가 routes.github(즉, 로그인 혹은 회원가입)을 들어가게 되면 passport.authenticate('github')가 실행이 된다. passport.js에 정의된 githubStrategy에 따라서 github로부터 사용자 계정 정보를 받아오고 /auth/github/callback으로 redirect 시킨다. 마지막으로 githubLoginCallback을 실행시켜서 로그인 실패와 성공을 나눈다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• passport-github

소스 코드

https://github.com/zpskek/wetube-v3/commit/83533a07c18bc52fde06c85ad9eccd39646f086d