카카오 로그인 API 사용하기 -2

이전 포스트에서 카카오 로그인 API를 사용하기 위한 기본 설정 & 전체적인 흐름을 봤다.

https://3unbbb.tistory.com/104

카카오 로그인 api 사용하기 -1

 

이제 카카오에서 알려준대로 하나하나 따라가면 된다.

 

Step1 카카오 로그인

 

1. 카카오 로그인 버튼 생성

평소에 자주보던 카카오 로그인 버튼은 아래로 가면 디자인소스를 다운받을 수 있다.

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

Kakao Developers

 

2. 버튼에 클릭이벤트를 줘서 카카오 로그인 함수인 Kakao.Auth.authorize()로 간편 로그인을 요청

간편 로그인은 카카오계정 ID 및 비밀번호 입력 없이 카카오톡을 통해 사용자를 인증하고 인가 코드를 발급받는 기능

즉 이 화면에서 아이디와 비밀번호를 입력 받을 필요가 없음

jsp/controller

home.jsp의 로고에는 <a>태그로 컨트롤러 연결

controller에서는 아래 나와있는 것처럼 요청 주소를 입력

redirect_uri = 카카오 '내 어플리케이션 > 제품설정>카카오 로그인' 에 등록해놓은 redirect_uri,

rest_api = '내 어플리케이션 > 앱 설정 > 앱 키'의 REST API 키,

response_type = code

주소는 무조건 https:// 로 해야함 > 카카오 보안정책

 

카카오 로그인 버튼을 누르면 자주보던 카카오 로그인 창이 뜸

정보를 입력하고 로그인을 누르면 KOE201 에러가 뜬다

 

해결방안으로 들어가보니

지원하지 않는 response_type을 인가 코드 요청에 포함하는 경우
Unsupported response type: {response_type}

 

>> redirect주소에 '&'를 빼먹음

return "redirect:https://kauth.kakao.com/oauth/authorize?client_id="+rest_api
				+"&redirect_uri="+redirect_uri+"&response_type="+response_type;

이렇게 변경

 

 

그러면 이렇게 잘 나옴

 

동의하고 계속하면 404에러..

 

controller에서 redirect된 주소 처리를 안해줘서 그런거니까

 

내 코드에서는 http://localhost:8088/oauth를 매핑해주면 된다.

 

 

 

 

 

 

 

 

일단 아무 처리 없이 매핑만

code가 파라메터에 찍힘

oauth.jsp로 잘 연결되는걸 확인 했으면 이제 로그인한 카카오계정 정보를 가져와야 함

response는 이렇게 할 수 있음

파라메터에 있는 code를 가져와야 함(code는 일회용)

 

이제 이 코드로 토큰을 받아야 한다.

 

 

url이랑 parameter & request