[API] Kakao Login 구현하기 (1)

Security를 사용하지 않고 카카오 로그인 구현하기 (Spring Boot + React에서 처리)

기존 회원의 이메일을 가져오기 위해서 부트를 사용함

 

---

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

크게 인가 코드 → 액세스 토큰 → 사용자 정보 가져오기의 흐름

 

카카오 로그인 완료 시 토큰이 발급된다. 토큰은 사용자를 인증하고 카카오 API 호출 권한을 부여하는 액세스 토큰(Access Token)와 액세스 토큰을 갱신하는 데 쓰는 리프레시 토큰(Refresh Token) 두 가지이다. OpenID Connect를 사용할 경우, 사용자 인증 정보를 담은 ID 토큰이 함께 발급된다.

 

 

카카오 개발자 기본 설정

1. 플랫폼 추가

카카오 로그인, 활성화 on 인지 확인

redirect URI 수정 (공백 주의)

 

인가 코드 받기

1. KakaoLoginComponent 생성

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

→ 인가 코드 요청 경로 확인

→ 해당 항목들을 쿼리 스트링으로 띄워줘야 함

const REST_KEY = '_______'
const REDIRECT_URI = 'http://localhost:3000/member/kakao'

// 인가 코드를 받는 경로
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`

const KakaoLoginComponent = () => {
	return (  
		<div className="text-3xl text-white">
			<Link to={kakaoURL}>KAKAO LOGIN</Link>
		</div>
	);
}
 
export default KakaoLoginComponent;

 

2. 로그인 페이지에 컴포넌트 추가

→ 시크릿 모드로 화면 띄워서 카카오 로그인 창 확인

REST 키가 다르면 인가 되지 않아 로그인 화면이 뜨지 않음

3. 로그인 테스트

카카오 로그인이 되어있다면 로그아웃 한 상태로 진행

인가 코드가 나옴(url의 code값)

인가 코드는 로그인 할 때마다 바뀜 → 일회용, 휘발성 (보안 목적)