소셜 로그인(kakao) 구현 BE

사용자들의 손쉬운 접속과 신규 고객 유입의 용이성을 위해 소셜로그인을 이용 하였고 FETCH 함수를 통해 연결하였고 회원 로그인 정보를 DB에 저장할 수 있도록 코드를 작성하였다. (REST API, axios, mysql)

1. 카카오 DEVELOPER 가입

카카오 공식 DEVELOPER에 가입 후 상단 [ 내 애플리케이션 ] 으로 들어가 애플리케이션을 추가한다.
https://developers.kakao.com/

2.애플리케이션 설정

카카오 로그인 API를 만들기 위해서 설정을 해줘야 할 것들이 있다.

1. 요약정보 → 앱 키에 두 번째에 있는 REST API 의 키를 복사 해둬야 한다.
   
   

2. 플랫폼 → 사이트 도메인을 설정해 준다.
   해당 도메인 주소를 통해 향후 프론트와 접속할 수 있다.

   테스트는 로컬로 진행하였고 ( http://localhost:3000 or [http://127.0.0.1:3000](http://127.0.0.1:3000) )
   
   실제 프론트와 연결할 때는 내 IP주소(cmd로 확인)를 통해 연결하였다. (ex: [http://10.10.100.196:3000](http://101.58.41.196:3000) )

   
   

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

4. 제품설정 → 동의 항목 → 카카오 측에서 받고 싶은 항목들을 설정해주면 된다.
   
   

5. 제품설정 → 보안
   클라이언트 시크릿키는 선택항목이다.
   활성화를 시키면 추후 토큰을 받을때 필요하다. ( 선택항목이지만 보안을 위해 하는 것을 추천!)
   
   

위 순서까지 다 마쳤다면 기본 설정은 완료 되었다.

다음 부분에 들어가기 앞서 코드는 MVC구조 ( router → controller → service → model )로 나누어져 있으며,
jest를 이용해 테스트를 진행하였다.

 app.js → router(index→userRouter) → userController → userService → userDao → datasource

index.js : 서버에 들어온 요청을 userRouter로 전송

userRouter.js : 엔드포인트(/users/kakao/signin) 를 갖게 된다.

userController.js : header에 담겨져서 오는 authorization이라는 key값인 카카오 토큰을 kakaoToken변수에 담은 후 signInKakao 함수에 kakaoToken을 담은 값을 userService로 처리하는 과정이다

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


userService.js : 앞전에 카카오 토큰을 받아서 카카오에 전송후 받아온 유저의 정보를 가지고 우리 서버의 JWT토큰으로 발급해주는 과정이다

해당 내용은 kakaoDeveloper공식 문서를 참조하여 코딩하였다.

userDao.js : 카카오로 부터 받아온 유저의 정보가 기존 회원이면 토큰만 발행(로그인)을 해주고 새로운 유저이면 해당 유저의 정보를 우리의 DB에 저장(회원가입)을 하는 과정이다

위와 같이 코드작성이 끝나면 아래와 같이 POSTMAN으로 테스트가 가능하다.

1.카카오에게 토큰을 발급 받는 단계 (카카오 공식문서에서 경로 확인 가능)
좌측 GET 설정 후 http://kapi.kakao.com/v2/user/me

2. Authorization으로 들어가서 TYPE을 OAuth 2.0으로 설정
   (하단의 ADD authorization data to 는 request header로 설정을 해준다.)
   Access Token은 위 주소의 영향으로 자동으로 설정되며 하단 난수는 이미 생성된 상태로 원래는 빈칸이다.
   Header Prefix에는 Bearer를 입력해주면 된다.
   
3. 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로 변경해주어야 한다.
   
4. 여기까지 설정을 한 후 Get new access Token 버튼을 누르면 카카오 로그인 창이 나오고 정상적으로 카카오 토큰이 발행이 된다. 그 다음 send를 하면 유저의 정보가 불러올수 있다.
   
5. 이제 아까 발급 받은 카카오 토큰 값을 복사를 하고 코드에서 작성한것처럼 엔드포인트를 지정을 해준다
   
6. 그다음 Headers로 가서 key 값인 authorization를 추가해주고 아까 발급받은 카카오토큰을 넣고 send를 보내주면 로직에 따라 우리의 JWT유저 토큰을 발행이 완료가 된다.
   

해당 API를 눈으로 보고 따라 치는것보단 여기서 중요한 내용은 axios 와 ,bearer에 대한 학습도 병행해야 한결 이해하기가 편할것이다. 또한, 핵심기술인 OAuth에 대한 이해가 선행되어야 안정적인 로그인 기능을 구현할 수 있다. 프로젝트 진행 시 Access Token을 프론트에서 발급할지 백에서 발급할지에 대한 논쟁이 잠시 있었는데 보안적인 측면을 고려하여 당연히 백에서 관리를 해야한다.(그렇지 않으면 client_id, redirect_url 등의 파라미터를 두번씩 요청하는 의미 또한 없다.)[출처]https://blog.naver.com/mds_datasecurity/222182943542