리액트 카카오(kakao) 소셜로그인 구현

카카오 소셜 로그인 구현 (React - Spring) 

카카오 로그인 전체적인 흐름도

 

여기서 프론트엔드는 카카오에게서 인가코드를 받아서 백엔드에게 전달만 하면 끝이다!

1. 애플리케이션 등록

https://developers.kakao.com/

Kakao Developers

먼저 여기서 Kakao Developers에 로그인 후 애플리케이션 생성하고 REST API 키 및 Redirect URI를 설정해야 한다.

---

2. 카카오 로그인 요청

 

사용자가 '카카오 로그인' 버튼을 클릭하면 카카오 인증 페이지(https://kauth.kakao.com/oauth/authorize)로 이동한다.

• KAKAO_REST_API_KEY: 카카오 개발자 콘솔에서 발급받은 REST API 키.
• KAKAO_REDIRECT_URI: 인가 코드가 리다이렉트될 프론트엔드 주소

1번에서 등록한 REST API 키 및 Redirect URI을 .env 파일에서 가져와서 사용한다.
이유는?
- 보안 : 민감한 정보들이기 때문에 외부에 노출되면 안됨.
(.env 파일에 키를 저장하면 코드를 공개 저장소(예: GitHub)에 올릴 때, 키가 포함되지 않도록 .gitignore를 설정할 수 있음.)
- 유지보수 및 확장성 유리 : 환경 변수 값이 변경될 경우 코드 여러 곳을 수정하지 않아도 됨.

---

3. 사용자 인증 및 권한 동의

사용자가 카카오 인증 화면에서 동의하면, 카카오 서버는 설정된 Redirect URI로 리다이렉트하며 인가코드를 전달해준다.

내가 설정한 Redirect URI

설정한 리다이렉트 URI 뒤에 인가코드가 오는 것을 확인할 수 있다.

---

4. 인가 코드 추출

그럼 저 URL에서 인가코드만 추출해서 백엔드에 넘기면 된다.

인가코드 추출

---

5. 인가코드 백엔드에 전달

6. 이후 백엔드에서 알아서 처리를 다하고 JWT 토큰을 줄 것이다.

그럼 프론트는 토큰으로 로그인 처리를 하면 된다. 이후는 다음 이시간에 ...

 

전체코드

리다이렉트 될 페이지 라우팅 해줘야 함.