카카오 로그인 쉽게 구현하기 1편 - Kakao Developers 설정

카카오 로그인 API

 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담된다. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있다.

카카오 로그인 API 흐름

 카카오 로그인의 흐름은 간단하다. 리소스 오너(사이트)가 카카오 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 카카오 API 서버에 넘긴다.

전달받은 정보를 가지고 카카오 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다.

자세한 설명은 카카오 개발자센터 API 문서를 참고하자.

Kakao Developers

카카오 로그인 API 연동

연동은 크게 3단계로 나눌 수 있다.

1.  Kakao Developers 설정
2. 개발 환경 설정
3. 초기화 및 로그인 구현하기

Kakao Developers 설정

1. 내 애플리케이션 등록

https://developers.kakao.com/console/app

> "애플리케이션 추가하기" 를 클릭

> 앱 이름과 사업자명은 필수로 등록

 

2. 카카오 로그인 설정

1) 카카오 로그인 활성화

> 내 애플리케이션 -> 제품 설정 -> 카카오 로그인

> 카카오 로그인 활성화

 



2) Web 플랫폼 등록

카카오 로그인을 사용할 클라이언트 도메인 주소를 입력하는 항목이다.

로컬환경에서 테스트 예정이므로 여기서는 로컬에 띄울 클라이언트 페이지(http://127.0.0.1:8080)로 설정했다.

> 내 애플리케이션 -> 앱 설정 -> 플랫폼

> 도메인 입력 후 저장

 

3) Redirect URI 등록

카카오 로그인 활성화 설정 화면에서 아래로 스크롤 하면 Redirect URI 입력 항목이 보인다.

클라이언트가 카카오 로그인 후 Redirect 되는 URI를 입력해야한다. Redirect URL은 클라이언트 페이지 개발 후 입력 예정이다.

마찬가지로 로컬환경에서 테스트 예정이므로 여기서는 로컬에 띄울 클라이언트 페이지 주소(http://127.0.0.1:8080/kakao-login)로 설정했다.

> Redirect URI 클릭

> Redirect URI 입력 후 저장

4) 동의 항목 설정

동의 항목을 설정한다. 닉네임, 프로필 사진, 성별, 생일 등 필요한 항목에 대해 동의 설정을 완료하면 카카오 로그인 인증 후에 설정한 동의항목에 대해서 응답데이터로 받을 수 있다.

> 내 애플리케이션 -> 제품 설정 -> 동의항목

위 과정을 완료했다면 카카오 로그인 API 사용에 필요한 설정은 끝났다.

API에 필요한 Key만 확인해주자.

> 내 애플리케이션 -> 앱 설정 -> 카카오 로그인

관련글

2022.08.17 - [Web Programming] - 카카오 로그인 쉽게 구현하기 2편 - 개발 환경 설정

카카오 로그인 쉽게 구현하기 2편 - 개발 환경 설정

2022.08.17 - [Web Programming] - 카카오 로그인 쉽게 구현하기 3편 - 로그인 구현하기 (Spring Boot + Vue.js)

카카오 로그인 쉽게 구현하기 3편 - 로그인 구현하기 (Spring Boot + Vue.js)