kakao로그인은 솔직히 어렵지않다고 생각했다 왜냐면 백엔드 없이 리액트로도 충분히 혼자해봤었기 때문이다. 하지만 그런 간단한 로그인 절차만 거치는 과정이 아닌 카카오에서 제공해주는 사용자의 정보들을 넘겨받고 넘겨받는 과정이 상당히 복잡해서 많이 놀랐다(이거만 삽질을 3일...)
우선 카카오 로그인을 구현할때 백엔드 개발자분들이 그냥 버튼만 클릭하면 백에서 redirect url을 설정하여서 로그인이 되면 사용자의 정보들을 다 알아서 받아오고 redirect url로 넘겨 그 정보들을 프론트에서 표기하는 방식으로 하려고했다.
근데 여기서의 실수는 백엔드의 local에서는 프론트의 local로 redirect를 할수없다는 점이였다. (물론 이것도 나중에 와서 안 사실인데 만약 프론트와 백엔드가 배포를 한 상태라면 백에서 redicert를 프론트쪽으로 쏴줄수있었겠다는 생각이 들었다...)
그래서 이 난감한 상황을 어떻게 할지 생각을하다가 카카오 공문을 보면서 다시금 구현해보기로 했다.
이렇게 그냥 하기로했는데 문제는 카카오에서는 사용자의 전화번호를 전달해주지않는다.
우리의 서비스 특성상 사용자의 전화번호를 꼭 필요하기에 저렇게 일반적인 방법이 아닌 다른방법으로 바꿔서 소셜로그인을 진행하자고 생각했다.
소셜로그인을 진행하되, 수집항목을 추가하자 였다.
프론트에서 REST API를 통하여 사용자의 로그인을 유도하면 사용자는 카카오 로그인을 진행하게 되며, 이때 사용자는 우리가 설정한 redirect url로 넘어가게된다 이때의 인가코드를 프론트에서 처리하여 백으로 보내준다.
그후 백에서 인가코드를 받으면 응답으로 전화번호와 비밀번호를 준다. 만약 가입한 사용자가 처음 이용자라면 다른 redirect url로 넘어가 사용자에게 전화번호를 수집한다 그 후 프론트에서 로그인에 필요한 전화번호와 비밀번호를 백으로 보내어 로그인 처리를 하게 만들었다.
다만 여기에서의 에러는 또 발생한다
아까의 mixed content에러에서는 원래 백엔드 배포주소인 http와 통신테스트를 위해 로컬로 통신을 하면 같은 http니까 응답이 제대로 왔었다 하지만 카카오에서는 http는 막아놔서 https로밖에 전송을 하지 못한다. 그래서 백엔드가 배포한 주소로 인가코드를 로컬이던 배포된주소로던 뭐로 보내서 응답을 받아내야하는데 계속 못받았다.
이러한 삽질끝에 그냥 백엔드 배포 주소를 https로 바꿔서 진행하였다.