React 카카오 소셜로그인 구현

React로 구현하게 된 카카오 소셜로그인에 대해서 작성해보도록하겠습니다.
REST-API말고 자바스크립트 팝업로그인으로 구현하였습니다.
저처럼 서성이는 분들께 도움이 되길 바라면서 작성해보았습니다.

💻 사용한 것: React / style-component / kakao API

2차 프로젝트를 시작하면서 소셜로그인을 구현하게 되었습니다.
처음에 REST API로 토큰까지 받아오는 것을 성공하였습니다. 하지만 이렇게 진행하게 되면 백엔드쪽에서
토큰을 변환하고 다시 보내주는 것이 힘들다는 의견을 듣게 되고, 요즘 많이 볼 수 있는 소셜로그인 팝업창으로
진행하게 되었습니다.

작성한 코드

const { Kakao } = window;

function Login({ modalClose }) {
  const kakaoLoginClickHandler = () => {
    if (!Kakao.isInitialized()) {
      Kakao.init(process.env.REACT_APP_API_KEY);
    }

    Kakao.Auth.loginForm({
      success: function (authObj) {
        fetch(`${API_CONFIG.SIGNIN}`, {
          method: 'POST',
          headers: {
            Authorization: authObj.access_token,
          },
        })
          .then(res => res.json())
          .then(res => {
            if (!localStorage.token) {
              localStorage.setItem('token', res.token);
              if (res.token) {
                alert('airpnp 에 오신걸 환영합니다.');
                modalClose();
              }
            } else {
              alert('이미 로그인 되어 있습니다.');
              modalClose();
            }
          });
      },
      fail: function (err) {
        alert(JSON.stringify(err));
      },
    });
  };

⭐️ 짚고 넘어가야할 부분

1. Kakao.init(process.env.REACT_APP_API_KEY)
반드시 .env 파일을 만들고 그 안에 자바스크립트 키를 넣는 것이 중요합니다.
키가 밖으로 노출되면 보안의 위험이 크기때문에 따로 .env파일을 만들고 그 파일을 gitignore에
추가해주세요. 그러면 키가 노출되지 않습니다.

2. method: 'POST'
POST 방식이든 GET 방식이던 상관없습니다.

3. headers
headers에 Authorization: authObj.access_token 을 넣어야지 인증/인가를 받을 수 있습니다.

4. localStorage
Local Storage 와 Session Storage가 있는데
둘 다 HTML5에서 추가된 '저장소'이다. 로컬 스토리지에 들어간 데이터는 유저가 지우지 않는 이상 브라우저에 계속 남아있게 됩니다. 하지만 세션 스토리지에 들어간 데이터는 브라우저 탭을 닫을 경우에 사라지게 되서 저는 '로그인 유지' 기능을 위해 로컬 스토리지에 token을 넣어주기로 했습니다.

5. JSON.stringify
JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.

6. Kakao.Auth.loginForm
처음에는 login을 썼었는데 그러면 계속해서 자동로그인이 됩니다.
그런걸 방지하기 위해서 loginForm이라는 옵션을 사용하면 로그인할 때마다 새로운 폼이 열리게 됩니다.