[Springboot][React] 카카오 로그인 구현

jhkim·2023년 3월 18일
0

인가 코드 받기 -> 토큰 받기 -> 사용자 정보 가져오기 흐름

클라이언트 페이지에서 전달받은 인가코드를 통해 로그인토큰을 발급받고, 유저 정보를 조회하는 API가 필요하다.

1. 인가 코드 받기

서비스 서버는 카카오 인증 서버로 인가 코드를 요청한다.
클라이언트 페이지에서 카카오 로그인창이 노출되고, 로그인한 후

카카오 로그인 요청을 하면 서비스 서버->카카오 인증 서버로 인가 코드를 요청한다.
카카오 인증 서버는 인증 및 동의 요청을 한다.
그러면 클라이언트에서 로그인 및 동의를 하고,
카카오 인증 서버가 인가 코드를 발급하여 서비스 앱에 등록된 Redirect URI로 전달한다.

인가 코드를 통해 토큰을 발급받는 역할은 서비스 서버가 한다.
따라서 우리는 인가 코드를 Body로 전달하여 로그인 토큰을 발급받는 API를 작성해야 한다.
이 API를 통해 카카오 인증 서버로부터 토큰을 발급받는다.

이 API가 정상동작하면 응답은 다음과 같다.

{
  "access_token": "9yUOu3_9jM610hz3AduAOxr4xYyBUyouwAL_GLwlCj102gAAAYLDVnKF",
  "token_type": "bearer",
  "refresh_token": "QoyY-O2umtS2pkxXVMBBSCMuHb8BwJi_0EqT5eopCj102gAAAYLDVnKD",
  "expires_in": 21599,
  "scope": "birthday account_email profile_image gender profile_nickname",
  "refresh_token_expires_in": 5183999
}

access토큰과 만료시간, refresh토큰 등이 들어가 있다.
토큰이 만료된 이후에는 토큰 갱신 API를 이용하면 된다.

이제 access토큰을 가지고 유저 정보를 가져오면 된다.
유저 정보를 가져오는 API를 작성할 때는, API헤더에 앞서 발급받은 토큰을 넣어 카카오 서버로 요청하는 기능을 구현하면 된다.
그러면 카카오 개발자 센터에서 설정한 동의 항목들의 데이터가 응답된다.


참고

https://notspoon.tistory.com/36 (카카오 로그인)
https://velog.io/@tamagoyakii/42byte-Recoil%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 (Recoil로 로그인 상태 관리)

0개의 댓글