플젝할 때 구현하면서 잘 몰라서 엄----청 고생했는데,, 노션에 적어뒀던 거 보고 다시금 정리해봅니다!
카카오 API 활용하여 소셜 회원가입/로그인 구현하기
'카카오 API만 가져다가 잘 쓰면 되는 거 아니야?'
라고 안일하게 생각했던 나...
여기저기 너무 많이 찾아보다 보니 오히려 엉켜서 싹 다 밀고 처음부터 하나씩 해서 겨우겨우 성공했다..ㅎ
그래도 한번 성공하니 나중에 다시 쓸 수도 있어서 좋더라~~
대략적인 Flow
사실 카카오 개발자 사이트(https://developers.kakao.com/docs/latest/ko/kakaologin/common) 들어가면 API 문서에 어떻게 하는지 다 나온다. 하지만 처음 보면 그래서 어떻게 하라고.. 사태가 생김...ㅠ
1. 카카오 개발자 사이트 들어가서 애플리케이션 만들기
2. Redirect URI 설정: 앱/웹에서 어떤 URL로 이동했을 때 카카오 로그인을 띄울 것인지!
예시) http://localhost:9090/api/auth/social
3. (필요한 경우) 플랫폼에 키 해시 등록
4. 카카오 앱 키 사용해서 연결
내가 프로젝트에서 사용했던 방법
1) [프론트엔드] 쪽에서 로그인을 하고, 카카오 액세스 토큰(access token)을 [백엔드]로 보낸다.
2) [백엔드]에서는 프론트에서 받은 액세스 토큰으로 카카오 서버에 사용자 정보 요청을 해서 가져온다.
3) 가져온 사용자 정보를 바탕으로 JWT 토큰을 생성해서 (JWT) Access Token과 (JWT) Refresh Token을 다시 프론트엔드에 전달한다.
4) 프론트엔드는 이 JWT 토큰을 가지고 있다가 사용자 정보 등을 체크하고, API 요청을 할 때 액세스토큰을 같이 보낸다.
[ 백엔드 측에서 할 일 ]
✅ 카카오 액세스 토큰으로 사용자 정보 가져오기 (개발할 때 카카오 액세스 토큰은 포스트맨에서 생성)
✅ JWT 토큰 생성해서 프론트엔드에 전달하기
✅ API 요청 헤더에 JWT 토큰이랑 같이 오면, 토큰으로 사용자 인증하기
프론트 측에서 플랫폼에 키 해시 등록하기
프론트엔드 측에서 카카오 애플리케이션을 만들고 앱 키를 연결해서 개발을 할텐데, 이 때 다 제대로 연결을 했는데도 로그인 에러가 뜨는 경우가 있었다. 찾아보니 키 해시 값을 등록했어야 했는데 안 했던 것..! 잘 안 된다면 꼭 체크해보기😉
안드로이드 앱에 카카오 로그인 기능을 넣으려고 하는 경우, 'Android 플랫폼 등록'에서 키 해시를 등록해줘야 에러가 뜨지 않고 로그인이 정상적으로 된다. 키 해시 값은 컴퓨터마다 다르기 때문에, 여러 대의 컴퓨터에서 로그인을 해야 하는 경우 모든 컴퓨터의 키 해시 값을 모두 등록해주어야 한다. 키 해시 값을 알아내는 방법도 API 문서에 나와있다. 아래 링크 참고
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
포스트맨에서 카카오 액세스 토큰 받아오기
백엔드 측에서 API 테스트를 할 때, 요청 헤더에 토큰이 담겨와서 그걸로 사용자 인증을 해야 하는 경우가 있다.
이때 카카오 액세스 토큰이 필요한데, 포스트맨에서 카카오 앱 키를 입력해두면 액세스토큰을 받아서 사용할 수 있다.
이런 식으로, Authorization에서 OAuth 2.0 타입을 선택한다.
Header Prefix는 액세스 토큰 앞에 'Bearer '가 고정으로 붙어서 나오기 때문에, 지정해주었다. (띄어쓰기 포함)
콜백 URL은 카카오 애플리케이션의 리다이렉트 URL을 쓰면 되고,
Auth URL이랑 Access Token URL은 카카오 API 문서에 나와있는 고정 링크다.
Client ID에는 카카오 앱 키에서 맞는 걸 쓰면 된다. 네이티브 앱 키 / REST API 키 / JavaScript 키 / Admin 키 중에 골라서 사용!
Client Secret 키를 필수로 사용해야 하는 경우도 있는데, 이건 카카오 애플리케이션에서 시크릿 키 설정하는 부분에 있다. 이걸 키면 시크릿 키가 나오고, 이 시크릿 키를 포스트맨에도 입력해주면 된다.
가끔 다 잘 맞게 했는데도 응답이 이상한 경우에는
✅ Client Authentication이 'Send client credentials in body'가 맞는지 확인해보기!