카카오 로그인 API 구현 Back-End

2차 프로젝트에 카카오 로그인 API기능이 꼭 필요해서 해당 정보를 구글링 한 후 프론트와 기능 구현을 성공하였다.
해당 기능을 만들면서 많은 어려움이 있어서 보다 쉽게 설명을 작성한다.

1.카카오 DEVELOPER 가입

카카오 공식 DEVELOPER에 가입을 한다
https://developers.kakao.com/

해당 사이트에 접속 후 회원가입 후 본인의 애플리케이션을 생성해준다

2.애플리케이션 설정

카카오 로그인 API를 만들기 위해서 설정을 해줘야 할 것들이 있다.
REST API 기반이면
요약정보 < 앱키에 있는 REST API를 복사 해둬야 한다

플랫폼 < 사이트 도메인을 설정해 준다

이 주소는 원하는데로 사용할 수 있지만 처음 해보시는거라면 똑같이 입력을 해주면 된다
사이트 도메인: http://localhost:3000

제품설정 < 카카오 로그인
Redirect URL을 복사해준다

제품설정 <동의 항목
본인이 카카오 측에서 받고 싶은 항목들을 설정해주면 된다

제품설정 < 보안
클라이언트 시크릿키는 선택항목이다.
활성화를 시키면 추후 토큰을 받을때 필요하다

위 순서까지 다 마쳤다면 초기 세팅은 마무리 된거다.

들어가기 앞서 코드는 레이어드 패턴에 따라
controller , model , route , service , test파일로 나눠져 있다
서버를 돌리는데 필요한 파일은 server.js , app.js로 분리를 하고 시작을 한다

데이터가 들어오는 순서는 router - controller - service - model순으로 진행이 된다

index.js 파일부터 확인을 해보자

해당 코드는 처음에 서버에 요청이 들어오면 kakao.router로 전송이 되도록 하는 로직이다

그다음 경로인 kakao.router로 이동후 엔드포인트를 갖게 된다 해당 코드 로직을 보면
http://127.0.0.1:3000/auth/signin 이라는 엔드 포인트를 가지며 get방식으로 요청을 해 header에 프론트쪽에서 카카오 토큰을 보내는것을 받는 방식이다

그다음 경로인 kakaoController로 이동을 하여

kakaoSingIn이라는 함수를 선언한다
해당 함수의 코드의 내용을 보자면

이 코드는 앞전에 말한 header에 담겨져서 오는 authorization이라는 key값인 카카오 토큰을

kakaoToken변수에 담은 후 signInWithKakao 이 함수에 kakaoToken을 담은 값을 authService에서 처리하는 과정이다

해당 로직이 정상적으로 구동이 되면 200의 상태코드와 함께 accessToken을 반환해준다
accessToken은 카카오 서버에서 받아온 유저의 정보를 가지고 우리만의 JWT토큰으로 만들어 주는 로직이다.

그다음 순서인 service로 넘어가서

앞전에 카카오 토큰을 받아서 카카오에 전송후 받아온 유저의 정보를 가지고 우리의 서버의 JWT토큰으로
발급해주는 과정이다
해당 내용은 kakaoDeveloper공식 문서에 나와있는 내용을 기반으로 작성된 코드 이다.

그 다음 마지막 과정인 model로 넘어가서 카카오로 부터 받아온 유저의 정보가 기존의 우리 서비스의 기존 회원이면 토큰만 발행을 해주고 새로운 유저이면 해당 유저의 정보를 우리의 DB에 저장을 하는 과정이다.

MYSQL의 쿼리문에 의해 작성된 로직이다.
맨위에 작성된 getUserById는 지금 당장 필요한 로직은 아니며

그 이후 작성된 signUp , getUserByEmail을 사용하게 된다.
signUp은 위에서 언급한것처럼 새로운 유저라면 우리 DB에 유저의 정보를 저장 하는 과정이며,
getUserByEmail은 들어온 유저의 이메일이 우리 DB에 있다면 해당 유저의 정보를 가져오는 로직이다.

이렇게 작성이 끝나면 POSTMAN으로 프론트엔드없이 혼자서 테스트가 가능하다
POSTMAN을 실행한 후

1.카카오에게 토큰을 발급 받는 단계

GET요청으로 엔드포인트를
https://kapi.kakao.com/v2/user/me
그대로 따라 해주면 된다

그다음 Authorization으로 들어가서
TYPE을 oAuth 2.0으로 설정해줘야 한다
ADD authorization data to 는 request header로 설정을 해준다.

이 부분에서 Access Token 칸에는 본인이 원하는 토큰명을 선언해주면 되는거라 어떤 이름을 입력해도 상관없다

Header Prefix에는 Bearer 를 입력 해준다

Token Name도 원하는 이름을 정해주면 된다
Callback URL은 아까 kakao DEVELOPER에서 설정한 Redirect URL을 작성해 주면 된다
나의 Redirect URL은 http://localhost:3000/oauth/callback/kakao로 설정해서
저렇게 작성해주었다.

Auth URL과
Access Token URL은 그대로 따라 쳐야한다
Auth URL:https://kauth.kakao.com/oauth/authorize
Access Token URL:https://kauth.kakao.com/oauth/token
Client ID는 앞전에 애플리케이션 만들때 복사해둔 REST API값을 넣어주면 된다.

마지막으로
맨 밑에 Client Authentication이 부분을 꼭
body로 변경해주어야 한다

여기까지 설정을 한 후 Get new access Token 버튼을 누르면 카카오 로그인 창이 나오고 정상적으로 카카오 토큰이 발행이 된다.

그 다음 send를 하면 유저의 정보가 불러올수 있다.

이제 아까 발급 받은 카카오 토큰 값을 복사를 하고

코드에서 작성한것처럼 엔드포인트를 지정을 해준다

그다음 Headers로 가서
key 값인 authorization를 추가해주고 아까 발급받은 카카오토큰을 넣고 send를 보내주면 로직에 따라
우리의 JWT유저 토큰을 발행이 완료가 된다.

해당 API를 눈으로 보고 따라 치는것보단 여기서 중요한 내용은 axios 와 ,bearer에 대한 학습도 병행해야
한결 이해하기가 편할것이다.