passport - kakao login

설치

#npm install passport-kakao

Kakao API 설정

https://developers.kakao.com/ 에서 애플리케이션을 등록 해야한다. '내 애플리케이션'에 들어가자.

'애플리케이션 추가하기' 선택

앱 이름과 회사 이름 등록

REST API키를 복사해서 .env 파일에 KAKAO_ID로 저장한다.

좌측 메뉴에 플랫폼을 클릭한다.

Web 플랫폼을 선택한다.

당신의 서버의 IP나 domain 주소를 입력한다.

좌측 메뉴에 제품 설정에서 카카오 로그인을 클릭한다.

활성화 설정에서 상태를 ON으로 한다.

Redirect URI를 등록한다.

주소/auth/kakao/callback으로 redirect URI를 설정한다.

좌측 메뉴에 제품설정 -> 동의 항목을 선택한다.

  자신의 앱에 필요한 정보들을 선택하고 설정한다. passport-kakao를 하기위해서는 email이 반드시 필요하니 설정하도록 하자.

이메일은 사용자에게 값이 없는 경우 카카오 계정 정보 입력을 요청하여 수집하기를 체크한다.

Kakao Strategy 설정

  

kakaoStrategy

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

passport.js

passport.js

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

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

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

kakaoStrategy

 

routes.js

routes.js

globalRouter.js

globalRouter.js

uesrController.js

userController.js

요약

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

참고 자료

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

소스 코드

https://github.com/zpskek/wetube-v3/commit/389a192fe1621e0144d9b7aec0b39ee5488ff669