java spring boot 카카오 로그인 api jwt를 이용한 인증 인가 구현

java spring boot + 카카오 로그인 api + jwt를 이용한 인증 인가 구현

만들고 나면 3. 동의 디스플레이 구성 외부 유저 타입 만들기 구체적인 단계는 모르지만, 내 추측은 이게 저희가 구글 로그인 버튼을 딱 누르시면 뭐 어떤 어플에서 님 정보에 접근중인데 동의할꺼에용? 이거 물어보는 디스플레이 같다. 만들기 누르시면 4.OAuth 동의 디스플레이 앱 이름, 이용자 이메일, 개발자 연락 입력하고 저장 후 누른다. 5. 범위 추가 혹은 삭제에서 email, profile, openid 체크 후 저장 후 계속 눌러줍니다. 이부분은 어떤 정보까지 유저한테 동의를 구해서 앱측으로 보내줄 지 정하는 부분입니다.

1 동의 항목 설정

좌측 탭에 물품 설정 카카오 로그인 동의 항목 탭에서 설정할 수 있습니다. 로그인 이용시 유저로부터 제공받을 항목을 정립하는 단계입니다.

필수로 동의받아야 할 항목과 선택적으로 동의받아야 할 항목을 개별적으로 설정하며, 동의 목적은 아래 예시와 같이 명료하게 적어주시면 됩니다. 선택적 제공을 했을 경우 null 값이 들어올 수 있으므로 별도로 널처리를 할 것도 염두에 두셔야 합니다.

3 로그인 정보 구현

KakaoLoginViewModel의 User를 활용하여 편리하게 프로필 사진과 유저네임 받아올 수 있습니다. 등등 정보들은 상단에 기술은 User 클래스를 활용하시면 됩니다. 작업물의 결과는 위와 같습니다. 포스팅 주제와 연관이 없어서 사용하진 않았지만, 서비스로 적용하기 위해서는 상태관리와 관련하여 경우에 따라 데이터베이스화를 적용해야 합니다. 로그인으로 받아온 결괏값을 ViewModel이 아닌 상태관리툴을 이용하여 어떠한 식으로 관리할지에 대해서는 다음 포스팅에서 다루도록 하겠습니다.

번외 자바스크립트 SDK 사용하기

자바스크립트 SDK를 사용할 경우 자료를 참고하면 됩니다. 나는 처음에 이 방안으로 구현했는데 이렇게 처리할 경우 KakaoTalk이라는 한 단계를 더 거쳐야 하기 때문에 좀 더 간편한 REST API 방식으로 교체하게 되었습니다. 교체하기 전까지의 코드를 조금 남겨봅니다.

index.html 파일의 에 아래의 script를 추가해 SDK를 설치합니다. Kakao.init()에 들어갈 자바스크립트 키는 내 애플리케이션의 앱 키에서 가져오면 됩니다.

인가 코드 요청, 이용자 정보 요청

클라이언트에서 카카오 로그인 요청이 들어왔을 때 실행되는 카카오 로그인 컨트롤러입니다. 카카오 developers에서 등록한 redirect uri주소가 이 컨트롤러에 해당합니다. UserControllrt UserService 콜백으로 전달받은 인가코드를 포함해서 카카오 인증서버에 요청을 보내 accessToken을 응답받는다.

1 플랫폼 등록하기 Web, AOS, iOS

앱 설정 플랫폼 탭에서 설정할 수 있습니다. 앱으로 배포할 거라면 Android iOS 부분을 설정해주어야 합니다. 패키지명은 Android app src main AndroidManifest.xml 의 package 명을 입력하면 됩니다. ex. com.example.app 테스트만 할 거라면 당장에 해시를 등록할 필요는 없습니다. 키 해시를 발급받는 방법은 아래 글을 내용에서 확인할 수 있습니다.

웹으로 테스트하기 위해서는 Web의 도메인도 함께 등록해야합니다. 서버 도메인이 있다면 해당 도메인을 입력해주시면 됩니다. 크롬 웹에서 Flutter 프로젝트를 띄울 때는 포트를 고정해주어야 하는데, run 명령어는 다음과 같습니다.

STEP 토큰 받기

인가 코드를 갖고 있는 상태로 POST oauthtoken 으로 요청을 하면, 응답에 토큰이 담겨옵니다. Request message형상 코드에 넣을 내용아님.POST oauthtoken HTTP1.1Host kauth.kakao.comContenttype applicationxwwwformurlencodedcharsetutf8

토큰을 받기 위해서 위와 같이 request message를 보낸다.

이동부터합니다. 1. 내 애플리케이션 누르고 2.앱이름 사업자명 적고 만들기를 클릭합니다. 3. 사진 대체 여기서 Rest API 키 복사해서 따로 저장해두고 필요한 것들 싹 다. 동의시킨다. 그럼 사용자한테 이런 화면이 날아가는 것입니다. 4. 밑에 활성화 설정에 ON으로 활성화 시키고 코드 생성하고 활성 상태 사용으로 바꿔줍니다. 그리고 다시 이리 와서 리다이렉트 URI적어주면 됩니다. 역시 이동부터하자 그럼 애플리케이션 목록, 등록이 있는데캡쳐가 불가능합니다.

요거 신청합니다. 그리고 리다이렉션 url 적는 창이 나오는데 적어주면 요러케뜹니다. client id, secret 둘다.

자주 묻는 질문