[Rest Api] vue와 Spring boot를 이용한 카카오톡 로그인 api 구현 (1)

파이널 프로젝트에 들어가면서 제일 해보고 싶었던 게 연동 로그인 구현이었다. 

카카오 공화국 답게 요즘 카카오톡 연동 서비스 없는 웹사이트 어디에도 없다고요ㅠ 유행에 뒤처지고 싶지 않은 나, 일단 구현하는 것에 도전해 보기로 한다. 

 

Java를 사용하여 REST API로 개발하고 백엔드에서는 Spring Boot와 JPA를 사용했으며, 프론트엔드에서는 Vue.js를 사용하였다. 카카오톡 api를 구현할 때 제일 어려웠던 부분이 다른 분들이 사용한 언어와 방식이 모두 달라서 정작 나에게 맞는 방식을 찾을 수가 없다는 것이었다. 유튜브도 없고, 진짜 머리 좀 엄청 싸맸는데 혹시 나와 같은 개발도구를 사용하는 분들이 보고 꼭꼭 도움이 되었으면 좋겠꾸여? 

 

일단 각각의 큰 틀부터 말하자면  

 

로그인 

카카오 디벨로퍼스 가입 -> 애플리케이션 등록 -> Redirect URI 입력 -> 세부 동의 사항 설정 -> get 방식으로 인증 code 얻기 ->  얻은 인증 code로 Post 형태로 Access Token 발급 받기 -> 받은 Access Token으로 로그인 한 사람의 정보 얻어오기 -> DB에 저장 

 

로그아웃 

 Redirect URI 입력 ->  발급받았던 Access Token을 get 방식으로 보내 연결을 끊기 

 

탈퇴 

발급 받았던 Access Token을 get 방식으로 보내 연결 끊기 

 

이 순서인데            이렇게 표시해둔 부분에서 제일 시간을 오래 투자했다. 

 

일단 다른 여러 블로그를 통해 모든 사람들이 엄청 쉽게 code까지 얻어 왔을 거라 생각한다. 하지만 나는 여기서 아주 큰 실수를 하고 말았찌... 그게 바로 Redirect URI이다..  나는 이게 단순히 화면 전환을 하는 페이지라고 생각해서 이클립스에 썼던 서버 쪽 주소를 썼고 ( 왜냐하면 vue는 자꾸 서버코드가 바뀌니까 하나를 특정할 수 없다고 생각해서!!!) 처음 쓰는 vue의 페이지 이동의 원리를 잘 파악하지 못해서 오래 걸렸다.  근데 vue의 고정 서버주소를 할당하는 방법을 알게 됨 + 이클립스 서비 주소를 쓰는 게 아님을 알게 됨으로 행복을 얻게 되었다. 

 

 

[카카오 개발자 도구 가입] 

카카오 디벨로퍼스에 가입하면 기분이 조크든요.. 진짜 개발자 된 것 같아서 암튼 가입해야 키를 받을 수 있습니다.

Kakao Developers

 

[애플리케이션 추가하기]

 

[REST API 키]

REST API 키를 이용한 구현을 할 것이기 때문에 꼭 메모장이나 그런 곳에 적어 두기로 해요... 이거 은근히 필요할 때 페이지 들어가서 찾는 거 귀찮으니까여.... 

 

[카카오 로그인 활성화] 

내 애플리케이션 -> 제품설정 -> 카카오로그인에 들어가서 활성화를 ON으로 바꿔준다. 

 

[Redirect URI 설정] 

이야.. 이거 진짜 미친놈이었어..

문제 1: 도대체 무슨 리다이렉트 페이지를 써야 할지 모름 

문제 2:  리다이렉트 페이지로 이동은 하는데 도대체 코드를 어떻게 백으로 빼와? 

문제 3: 뷰에 도대체 뭘 적어야 할지 모르겠음 

문제 4 : 뭔가를 작성했는데 vue에 작성한 내용은 안 뜨고 자꾸 배열로 백단에서 요청한 값만 불러옴 

 

나는 이게 이클립스 백단에서 받을 주소인 줄 알고 서버단 주소는 http://locolhost:8181이라서 그렇게 쓰고 혹은 어차피 코드를 get으로 보내야 된다고 하길래 http://locolhost:8181/login인 줄 알았는데 그게 아니라 vue, 클라이언트 쪽에서 볼 페이지의 주소를 적는 거더라겨용오오오어ㅏㅁㅇ니ㅏ;  

 

결국 작성된 코드로 로그인하기 버튼을 누르면 이렇게 인가 Code를 잘 불러옵니다. 여기까지 했으면 진짜 거의 반을 한 것이나 마찬가지임... 진짜로.. 

 

[인가 코드 관련 에러]

그리고 코드를 짜다가 진짜 자주 마주하게 될 인가 코드 관련 에러 

특히 KOE006 등록하지 않은 Redirect URI를 사용해 인가 코드를 요청한 경우이다. 그거 맞추는 게 뭐가 어렵냐 할 수 도 있는데 프론드의 Redirect URI 주소와 백의 Redirect URI와 카카오 디벨로퍼스의 Redirect URI 가 모두 맞아야 해서 하나가 바꾸면 다 바꿔야 해서 조금 빢셈..ㅎㅎ 암튼 난 그랬다. 

 

Kakao Developers