카카오 로그인 api

순서

1. 인가 코드 받기
2. 토큰 받기
3. 사용자 로그인 처리

원래는 카카오 로그인 api를 이용해서 로그인을 완료하고 나서 모든 과정을
한번에 쓰려고 했으나 1. 인가 코드 받기에서 문제가 계속 생겨서...
카카오 로그인을 완료 하지 않았는데도 1 단계를 통과해서 기쁜 마음으로 쓰게 되었다.

인가 코드를 받으려면 우선 https://developers.kakao.com/console/app 설정을 해야한다.

애플리케이션을 추가해준다.

플랫폼 -> Web에 사이트 도메인 추가

사이트 도메인을 추가 아래에 있는 카카오 로그인 사용 시 Redirect URI를 등록해야 합니다. -> 등록하러가기를 클릭 해준뒤에 활성화 설정에서 상태를 "ON" 으로 해준다.

Redirect URI를 추가해준다.

동의 항목 상태를 체크 해준다.
(권한이 없는 항목 이름은 사업자 등록을 할 경우에 권한이 생긴다.)

인가 코드 받기
method : GET

요청

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

(카카오 로그인 이미지)
문서 -> 카카오 로그인 -> 디자인 가이드

html

<div>
	<a th:href="@{|https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}|}">
    	<img src="/images/kakao_login_small.png">
    </a>
</div>

설정을 완료 하고 나서 인가 코드를 확인한다.

주소창을 확인해보면 인가코드가 잘 들어왔다.

여기까지 오는데도 문제가 많이 생겼었다....

카카오 로그인 api를 사용할때 오류가 나타나면 옆에 오류 코드가 있다.
해결 방안을 누르면 오류 코드에 대한 설명이 나와있다.

나타난 문제들

문제 1.

위에 나타난 GET 요청 url에 파라미터를 그대로 ${REST_API_KEY}, ${REDIRECT_URI} 썼을때

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

타임리프로 파라미터에 제대로 된 값을 넣어줘서 해결

문제 2.

Redirect uri에 추가한 주소와 ${REDIRECT_URI}가 다를때
나는 REST_API_KEY와 REDIRECT_URI를 config.properties에 따로 저장했다.

두 주소를 동일하게 해주면 이 오류는 해결된다.

문제 3.

주소 창을 보면 인가 코드는 잘 들어왔는데
사이트에 연결이 되지 않았다. 여기서 많이 시간을 썼다...

application.properties 설정에서 서버의 포트 번호를 80으로 해놓은걸 깜빡하고 있었다.
그래놓고 사이트 도메인과 Redirect URI의 도메인을 localhost:8080 으로 추가했다...

서버의 포트 번호를 8080으로 바꾸고 콘솔창에 code를 나타내주는 메서드를 작성해서 확인 했다.

인가 코드를 잘 받아왔다.