카카오 로그인 (OAuth) 동작 방식

 

written by one2ye

 

출처 : https://developers.kakao.com/

 

<동작 과정>

1. 사용자가 앱에서 카카오 로그인 버튼을 클릭
2. [카카오톡으로 로그인] 버튼을 클릭하면 실행 중인 카카오톡으로 연결
3. 카카오톡에 연결된 자격정보를 통해 사용자를 인식한 후, 올바르다면 사용자로부터 정보 및 기능 활용 동의를 받음
4. 사용자가 필수 항목에 동의하고 로그인을 요청하면 인가 코드(Authorization Code) 발급 → 이 코드가 앱 정보의 Redirect URI 에 전달되는 것
5. 앱에서는 전달받은 인가 코드를 기반으로 토큰을 요청하고 받는 과정을 수행

 

 

Aceess Token과 Refresh Token

Access Token ****: 사용자를 인증하고 카카오 API 호출 권한을 부여함.

Refresh Token : 액세스 토큰(Access Token)을 갱신하는 데 쓰임. (사용자가 매번 정보를 입력하거나 로그인하지 않고도 엑세스 토큰을 발급받을 수 있게 도와준다고 생각하면 됨)

→ 사용자 자격 정보로 인가 코드를 받아오고, 이 인가 코드로 엑세스 토큰과 리프레시 토큰을 얻게 됨.

 

출처 :&amp;nbsp;https://developers.kakao.com/

 

<필요한 정보>

url : https://kauth.kakao.com/oauth/authorize?

client_id : 테스트용 REST API 키 발급받음

redirect_uri : 인증 코드가 리다이렉트 될 URI (http://localhost:9000/user/kakao)

response_type : code로 설정

 

 

 

<로그인 실행 과정>

1. 인증 코드 요청

예시 화면

https://kauth.kakao.com/oauth/authorize?client_id={직접 발급받은 client_id 넣기}&redirect_uri=http://localhost:9000/user/kakao&response_type=code

** 한 번 접속되면 연결을 끊기 전까지 위의 과정이 skip 되고 바로 인가 코드가 발급된다는 점 유의! **

 

 

 

2. [동의하고 계속하기] 클릭 → 우리가 설정한 Redirect URI로 응답이 옴.(이 때, 뒤에 code를 가지고 오는데 이는 정상적으로 인증됐다는 것을 의미함!)

• 출력된 코드를 가지고 다시 접속하면 위와 똑같은 결과가 나옴.
• ex) http://localhost:9000/kakao/oauth?code=PQ3pnwcssE-QO9g9ma6ZfZAN3XqinOeJhP9LSXIN7tW4AZrQ9r_Rlqfa1XfFr-8I5RMYbQopyNoAAAF-pXPpbA

→ 맨 뒤에 있는 것이 발급 받은 인가코드 (계속 바뀜)

 

 

 

 

3. 인가코드를 통해 access_token 발급 받기

• access_token과 refresh_token이 발급되고 type은 baerer

출력 예시

 

 

 

4. access_token을 이용하여 사용자 정보 조회하기

• Header에 Authorization : Baerer {ACCESS_TOKEN} 넣어주면 사용자 정보 조회 가능

여기에서 나온 정보를 이용해서 로그인하도록 구현하면 됨!

 

 

 

 

<로그아웃(연결 끊기) 실행 과정>

1. session에 저장된 access_token을 가져오기
2. 서버에 해당 access_token에 대한 로그아웃 처리를 진행하기
3. session에서 저장된 email과 access_token 지우기

 

 

 

 

 

 

 

 

Spring boot를 활용하여 소셜로그인을 직접 구현해본 내용 -> Server/Spring boot 에서 확인 가능🤩