카카오 소셜 로그인

프런트 개발 들어가기 전에!

카카오 소셜 로그인 4단계로 가기 전에 알아야 할 기초 지식들

• 인증

  • 인증은 "너는 누구냐?"를 묻는 단계
  • ex) 카카오가 아는 놈인지 모르는 놈인지 확인
  • ex) 로그인

• 인가

  • 인가는 “너 어디까지 할 수 있어?” 묻는 단계
  • 권한을 확인하는 단계

• 토큰

  • 토큰은 일종의 증명서, 신분증이다.
  • 토큰 값으로 인증,인가를 간편하게 한다.

프런트 구현 전에 필요한 세팅

• kakao developers에서 진행중인 프로젝트 id 받아놓아야 합니다.
• 개발 test app인 경우 kakao developers에 등록된 이메일만 로그인 가능합니다.
• 인가 코드를 받을 redirect_url도 등록 해놓아야 합니다.

---

카카오 소셜 로그인 구현 과정 4단계

1. https://kauth.kakao.com/oauth/authorize ← 일단 여기로 가서 로그인 합니다.

   • 위 링크에 searchParams을 꼭 넣어줘야 함

     • response_type: code로 고정

     • client_id: 카카오한테 받은 우리 서비스 id

     • redirect_url: 로그인 성공하고 동의하고 가야하는 페이지, 3번 단계에 나옴

     • scope: 어떤 정보 받을지

     • ex) https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=1ndma,fnlemsm&redirect_uri=https://localhost:3000/auth/login/oauth/kakao&scope=profile_nickname,account_email
       저 링크로 들어가면 카카오 로그인 화면이 뜹니다

2. 로그인(인증)에 성공하면 이제 인가 단계

   • 동의 화면이 나옵니다.
   • 특정 정보에 접근하는 거에 동의합니다.

3. 인가에 성공하면 카카오 측에서 redirect_url로 이동시켜 줌
   • redirect_url에 해당하는 페이지를 만들어놔야 함
   • 카카오 측에서 인가 코드를 searchParams에 넣어줌
     ex) https://localhost:3000/redirect_url?code=oauthPermittedCode

4. 인가 코드로 카카오 측에 토큰을 요청한다.
   https://kauth.kakao.com/oauth/token ← 요기로 인가 코드 넘겨주면 토큰을 준다.