카카오 소셜로그인 구현

https://developers.kakao.com/
카카오톡 소셜로그인을 구현하기 위해서는 위 사이트를 접속

카카오톡 접속 후 상단에 있는 내 애플리케이션에 접속한다.
애플리케이션을 추가하고 앱 키를 4개를 부여받는데 본인은 Javascript 키를 사용함.

index.html에 카카오톡 주소를 추가한다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

그 다음 내가 사용한 Javascript 키를 사용해주어야 하는데 그냥 써버리면 github에 올렸을 떄 보안 문제가 있어서 원래는 env 파일을 이용하는 것으로 알고 있지만 일단 config 파일을 생성해서 그 안에 키를 넣고 컴포넌트로 보내는 형식으로 작성했다.

config 파일을 객체형식으로 해서 key값은 KAKAO_URL로 export하고
카카오 로그인 컴포넌트에서

import { config } from '../../config';

function SocialLogin() {
    Kakao.init(config.KAKAO_URL);
    console.log(Kakao.isInitialized());
    Kakao.Auth.login({
      success: function (authObj) {
        console.log(authObj);
        fetch('api 주소', {
          method: 'GET',
          headers: {
            Authorization: authObj.access_token,
          },
        })
          .then(res => res.json())
          .then(res => {
            localStorage.setItem('access_token', res.access_token);
            if (res.access_token) {
              alert('로그인 성공!');
              history.push('/');
            } else {
              alert('다시 확인해주세요');
            }
          });
       },
        fail: function (err) {
        console.log('에러', err);
        alert('로그인실패!');
         },
       });
    }

카카오 개발자 사이트에 들어가면 설명이 쭉 나오므로 그대로 따라해도 무방하다.

Kakao.init(내 자바스크립트 키 위치)로 내 키를 인식시켜주고
Kakao.Auth.login으로 내가 받아오려는 정보들을 받아오고 fetch 함수로 백엔드에 카카오에서 받은 access_token을 넘겨준다.
그리고 백엔드에서 보내준 다른 access_token을 localStoragedp 저장하면 메인페이지로 넘어가는 동시에 로그인 성공이라는 alert가 뜬다.

로그아웃 기능은 간단하게 localStorage에 넣어둔 access_token을 없애면 끝!