1. 로그인 버튼 이미지

• Kakao Developer의 상단 메뉴 > 도구 > 리소스 다운로드에서 다운받을 수 있다.

2. 카카오 로그인 시퀀스 다이어그램

• Step1 이전에 사전 설정 필요한 것들이 존재한다.
• Step1: 인가 코드 받기 및 Step2: 토큰 받기는 Kakao 로그인이 정해놓은 절차에 따라 진행하면 된다.
• Step3: 사용자 로그인 처리는 서비스 자체에서 구현하면 된다.
• 로그인 처리는 발급 받은 Access Token으로 카카오 계정의 회원번호와 정보를 조회한 후 아직 가입하지 않은 회원이면 회원가입 아니면 로그인 절차를 진행하도록 자체적으로 구현해주면 된다.
  

3. 모바일 웹 환경에서의 Kakao 로그인

• Kakao SDK for JavaScript의 간편 로그인을 사용할 수 있으며 이 경우 사용자가 카카오 계정 ID, Password를 입력하지 않고도 카카오톡을 통해 인증을 받아 간편하게 로그인할 수 있다.

4. 카카오 로그인 절차

1) Step 0: 사전 설정

1. 애플리케이션 추가하기

   • Kakao developers 사이트 로그인 > 상단 메뉴 > 내 애플리케이션 > 애플리케이션 추가하기
     

2. 플랫폼 등록

   • 추가한 애플리케이션 페이지 > 사이드 메뉴 > 플랫폼 > Android, iOS, Web 중에서 카카오 로그인 적용할 대상 플랫폼의 정보를 등록한다.
   • Web 플랫폼 등록 시 설정하는 사이트 도메인은 http://, https://, file:// 프로토콜의 도메인 등록이 가능하며 최대 10개까지 등록이 가능하다.
   • 등록한 사이트 도메인이 올바르지 않은 경우 web_site_url 에러가 발생한다.
   • Android, iOS의 플랫폼 등록은 자세한 내용 생략
     
     

3. 카카오 로그인 활성화

   • Kakao Developer > 내 애플리케이션 > 사이드 메뉴 > 카카오 로그인 > 활성화 설정 ON
   • 활성화 설정이 ON으로 되어있지 않은 경우, 로그인 요청 시 KOE004 에러가 발생한다.
     

4. Redirect URI 등록

   • 카카오 로그인 활성화 버튼이 존재하던 페이지 아래에 Redirect URI 등록 버튼을 확인할 수 있다.
   • Redirect URI는 OAuth 2.0 기반 카카오 로그인(REST API, Kakao SDK for JavaScript)의 핵심 요소로, 카카오 서버는 Redirect URI 경로로 인가 코드와 토큰을 전달하게 된다.
   • Redirect URI가 올바르지 않은 경우 KOE006 에러가 발생한다.

5. 동의 항목

   • Kakao developers > 내 애플리케이션 > 사이드 메뉴 > 동의항목에서 카카오 로그인 시 사용자에게 동의받고자 하는 항목을 설정할 수 있다.

6. OpenID Connect 활성화(옵션)

   • OpenID Connect는 카카오 로그인 시 액세스 토큰과 함께 ID 토큰을 추가로 발급받을 수 있는 기능이다.
   • Access Token은 API를 호출할 때 사용되는 토큰이다.
   • ID Token은 로그인한 사용자의 정보를 담고 있는 JWT 토큰이다.
   • 즉, OpenID Connect를 활성화하면 Access Token을 활용해서 사용자 정보 조회 API를 호출하지 않아도 사용자 정보를 ID Token에서 확인할 수 있다는 장점이 있다.
   • OpenID Connect를 On에서 Off로 변경하면 변경한 시점부터 ID Token 발급이 멈추기 때문에 서비스에 영향을 줄 수 있으므로 주의해야한다.

7. 간편가입(카카오싱크 전용)

   • 사업자 전용 서비스로 자세한 내용은 생략한다.

2) Step 1: 인가 코드 받기

• Request Parameter
  • client_id: kakao developers 사이트의 내 애플리케이션 > 앱 키 > REST API 키를 의미한다.
  • redirect_uri: 내 애플리케이션 > 카카오 로그인 > Redirect URI에 등록한 URI를 의미한다.
  • response_type: code로 고정

Host: kauth.kakao.com
GET: /oauth/authorize
?client_id=${REST_API_KEY}
&redirect_uri=${REDIRECT_URI}
&response_type=code 
HTTP/1.1

3) Step 2: Access 토큰 받기

• Request Parameter
  • grant_type: authorization_code로 고정
  • client_id: 내 애플리케이션 > 앱 키 > Rest API 키
  • redirect_uri: 내 애플리케이션 > 카카오 로그인 > Redirect URI에 등록한 URI
  • code: 인가 코드 받기 요청으로 얻은 인가 코드
• Response
  • token_type: bearer로 고정
  • access_token: 사용자 액세스 토큰 값
  • id_token: OpenId Connect 기능을 활성화 하면 Base64로 사용자 정보를 인코딩한 ID 토큰을 발급받을 수 있다.
  • expires_in: 액세스 토큰과 ID 토큰의 만료 시간(동일)
  • refresh_token: 사용자 리프레시 토큰
  • refresh_token_expires_in: 리프레시 토큰 만료 시간

Host: kauth.kakao.com
POST: /oauth/token HTTP/1.1
Content-type: application/x-www-form-urlencoded;charset=utf-8

4) Step 3: 사용자 로그인 처리

• 이 부분은 서비스 자체적으로 구현하면 된다.

5) 사용자 정보 가져오기

• 해당 API는 KakaoDevelopers 문서에서 확인

6) 연결 끊기

• 해당 API는 KakaoDevelopers 문서에서 확인

5. 카카오 로그인 시퀀스 다이어그램(상세)

6. 로그인 유지 옵션 관련 시퀀스 다이어그램

7. 회원 탈퇴 및 연결 끊기 시퀀스 다이어그램