Kakao Login

• 카카오톡 계정을 이용한 로그인 과정
  • 사용자가 Continue with KakaoTalk을 선택하면 우린 사용자를 카카오로 보낸다. 
  • 사용자가 카카오에서 로그인을 마치면, 카카오는 callbackURL로 callback과 함께 사용자를 돌려보낸다. 
  • 우리는 카카오에게 잘 받았어! 라고 보내준다. 
  • 카카오에게 받은 정보를 이용해 기존 유저와 같은 정보가 있는지 탐색한다.
  • 있다면, 그 유저의 정보에 카카오에서 받은 정보를 합치고, 없다면 새로운 유저를 만든다.
• kakao(=/auth/kakao)는 Continue with KakaoTalk 버튼을 선택했을 때 이동하는 주소
• kakaoCallback(=/oauth)는 사용자가 카카오로 넘어가서 로그인을 했을 때 다시 돌아오는 주소

routes.js

routes.js

 

• Contunue with KakaoTalk을 클릭하면 routes.kakao(=/auth/kakao)로 이동하도록 링크를 걸어준다.

views/partials/socialLogin.pug

• routes.kakao로 접근하는 시도가 있으면 controller에서 kakaoLogin을 호출한다.
• kakaoLogin 함수는 passport의 authenticate 함수를 호출한다. 
• 이를 통해 사용자는 카카오로 넘어가게 되고, 그곳에서 로그인을 한 뒤 돌아온다. 
  • 돌아오는 주소는 kakaoCallback(=/oauth)으로 developer.kakao.com에서 미리 설정한다.
• 로그인에 성공해서 돌아오면 postKakaoLogin 함수를 실행한다.
  • postKakaoLogin 함수는 다시 홈으로 리다이렉팅 해주는 간단한 함수.

globalController.js

• 이 과정에서 passport의 authenticate 함수가 다시 호출된다.
• 이 때는 미들웨어가 실행되면서 kakaoLoginCallback 함수가 호출된다.
  • 왜 아까는 그냥 연결만 시켜주고 지금은 kakaoLoginCallback 함수를 호출하는지는 모르겠다.

globalRouter.js

passport.js

• kakoLoginCallback 함수는 이미 profile과 callback 함수를 갖고있다. 
• 그 중에서 id, 이름, 메일, 프로필 사진을 가져온다. 
  • console.log(profile)을 해보면 kakao 쪽에서 설정한 변수 이름이 뭔지 파악할 수 있다.  
• 카카오에게 받은 정보를 이용해 기존 유저와 같은 정보가 있는지 탐색한다.
  • 있다면 그 유저의 정보에 카카오에서 받은 정보를 합치고, 없다면 새로운 유저를 만든다.

globalController.js

• developers.kakao.com에 가면, 어플을 등록할 수 있고, 사이트 도메인과 RedirectURI를 설정할 수 있다. 
• 사이트 도메인은 http://localhost:4000, RedirectURI는 http://localhost:4000/oauth로 설정한다.
• clientID(KAKAO_ID)는 일반 탭의 REST API키를 가져와서 .env에 넣고, 
• clientSecret(KAKAO_SECRET)은 고급 설정 탭에서 Client Secret을 생성해 .env에 넣는다.