TIL 26. Kakao 소셜 로그인

지금 디뉴로에서 기업협업을 하면서 설문조사에 대해 페이지를 만들고 있는데
내가 Login 페이지도 담당해서 로그인안에 소셜로그인을 넣기로 했다.
멘토님께서도 카카오를 시작으로 해보는게 좋다하셔서 카카오를 먼저 시작했는데
쉬우면 쉽지만 어렵기도 하다.
다음에 또 쓸 일이 있을거라 생각이 들어 기록한다 !!

1. Kakao Developer 페이지에서 어플리케이션 추가하기

(https://developers.kakao.com)

• 애플리케이션 추가하기를 눌러 이름을 설정한다!

2. 카카오 API 앱 키 확인하기

• 애플리케이션을 눌러서 들어가면 네이티브, REST API, JS, Admin 네 가지의 앱 키가 있는데
  우리는 JavaScript키를 사용할거기 때문에 키를 어디서 복사해놓으면 된다 !
  

3. Web 플랫폼 등록하기

• 지금 우리는 web개발을 하고 있으니까 Web에서 플랫폼을 등록하면 된다.
• react 주소 http://localhost:3000 를 넣기만 하면 된다.
  

4. 카카오 로그인 활성화 상태 ON 🔥

• 카카오 로그인을 들어가서 활성화 설정에서 OFF에서 ON으로 버튼을 이동시키면 된다.
• 활성화에 대한 동의 항목은 카카오 로그인 아래 동의항목을 누르면 확인 할 수 있다.
  

5. Redirect URI 설정하기

• Redirect URI는 Oauth를 기반으로 동작하는 카카오 로그인의 핵심이다.
• 카카오 로그인은 서비스와 카카오 서버가 서로 정보를 주고 받는 방식으로 진행된다.
  카카오 서버는 Redirect URI로 서비스에서 필요한 로그인 인증 정보를 보내고, 서비스는 Redirect URI로 받은 로그인 인증 정보를 처리해 다음 단계 요청을 보낸다.
  따라서 이 정보가 앱 설정에 등록돼 있지 않으면 카카오 로그인 시 에러가 발생한다.

6. JavaScript SDK 적용(다운로드) 및 SDK 초기화

• 리액트 index.html 파일에 script 2줄을 head 안에 넣어준다.
• <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
• <script>Kakao.init("JavaScript 앱 키");</script>
  ( 앱키는 개인 고유번호라 가리기! )
  

7. 브라우저의 window 객체에서 Kakao API 가져오기

• 아래 코드를 작성함으로써 Kakao api에 접근 할 수 있다.
  

8. 팝업창 출력 및 로그인 처리

• Kakao.Login.Auth 함수를 사용하여 카카오 로그인 화면을 팝업창으로 띄울 수 있다.
• success 콜백함수를 이용하여 카카오 토큰을 받을 수 있다.
• 로그인 성공 후 fetch를 통해 headers에 카카오 사용자 토큰을 담아 백엔드로 전달해 준다.
• 카카오 토큰을 받은 백엔드는 카카오와 유저 정보가 맞는지 확인을 한 번 더하고 일치하다면 우리 페이지에서 사용할 토큰을 만들어서 다시 우리에게 보내준다.
• 백엔드에서 받은 토큰은 localStorage에 저장한다.
• history.push를 통해 조건에 따라 페이지로 넘겨준다.