카카오 소셜로그인 with Hooks

논의 주제

kakao API를 통해 kakao_access_token 이랑 kakao_refresh_token 와 같은 두 가지의 token을 받았는데

• 자체 서버에서 발급하는 flix_access_token
• kakao_access_token
• kakao_refresh_token

3가지 중에서 어떤 토큰을 활용할지 고민을 했었다

다 같은 access_token은 아니다!

OAuth와 춤을 이라는 사이트에서 글을 읽어보는데

소셜로그인을 통해 받은 kakao_access_token은 일종의 방문증이고
우리 자체 서버에서 발급해준 flix_access_token이야 말로 그 회사의, 서비스의 주체적인 권한을 가진 (?) 사원증이라고 비유하는 표현을 보니 뭔가 마음에 와닿았다..!

논의 결과

꼭 이런 내용으로 논의한거는 아니고... 여러 다른 조언들을 받긴 했지만 너무 늦게 기록하는 바람에 기억이 잘 안난다

로그인기능을 맡아주신 장호님과 상의한 결과,
kakao_access_token이랑 flix_access_token을 비교할게 아니라

1. 클라이언트 → 카카오 서버 : 카카오로그인을 통해 kakao_access_token 요청
2. 클라이언트 → 우리 서버 : kakao_access_token 전달
3. 서버 내부에서 kakao_access_token와 카카오서버에서 받을수 있는 회원정보를 통해 flix_access_token 자체 토큰으로 변환을 하고
4. 서버 → 클라이언트 : 그렇게 만들어진 flix_access_token를 전달한다

이러한 과정을 통해,

• 클라이언트에서는 kakao로 로그인을 했던, 자체로그인을 했던 결과적으로 flix_access_token을 받게 되기 때문에
• fetch() 함수를 통해 서버와 통신했을 때 받은 response에 flix_access_token가 있다면 → 그 토큰을 localStorage에 저장하고 main 페이지로 리다이렉트해주고
• 그렇지 않다면 (=우리 서버로부터 flix_access_token을 받지 못했다면) 로그인을 성공하지 못한거고 즉, 우리 회원임을 인증하지 못한 것이기 때문에 → 사용자에게 다시 로그인을 해달라는 식의 알림을 전달하면 될거라 생각했다
• 다만, localStorage에 token을 저장한 상태에서 새로 token을 넣게 되면 기존에 발급받은 토큰이 삭제되고 새로 들어가는 것이 아니라,
• 기존에 발급받은 토큰에 나란히 새로 발급받은 토큰을 저장되기 때문에 Login 페이지가 렌더링될 때마다 localStorage의 내용을 지우도록 로직을 구성했다

kakao 소셜로그인 기능구현

index.html

headers영역에 추가

kakao Developer 페이지에서 설명을 볼 수 있다

// JavaScript SDK 적용
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
  // SDK 초기화 
  Kakao.init("발급받은 javascript key");
    // SDK 초기화 여부 판단 
  Kakao.isInitialized();
</script>

Login.js

// Login 페이지 화면 렌더링되면 localStorage내용 비우기
useEffect(() => {
  localStorage.clear();
});

// 카카오 로그인버튼 누르면 실행할 함수 선언
const handleKakao = () => {
Kakao.Auth.login({
    success: function (authObj) {
    fetch(KAKAO_URL, {
        method: "POST",
        headers: {
        Authorization: authObj.access_token,
        },
    })
        .then((res) => res.json())
        .then((res) => {
        localStorage.setItem("kakao_access_token", authObj.access_token);
        localStorage.setItem("kakao_refresh_token", authObj.refresh_token);
        localStorage.setItem("flix_access_token", res.flix_access_token);
        if (res.flix_access_token) {
            alert("Flix의 재미를 느껴보세요!");
            history.push("/");
        } else alert("다시 카카오 로그인을 해주세요.");
        });
    },
    fail: function (err) {
    alert(JSON.stringify(err));
    },
  });
};

<Btn backColor="transparent" onClick={handleKakao} padding="0">
  <img src="./images/kakaoBtn.png" alt="kakaoBtn" />
</Btn>;

1. handleKakao() 코드 설명

Kakao.Auth.login({
  success: 콜백함수1,
  fail: 콜백함수2,
});

index.html에 입력한 script 태그를 통해 실행할 수 있는
Kakao.Auth.login() 메서드를 통해 카카오로그인을 하는데
로그인이 성공하면 콜백함수1 을 호출하고
로그인이 실패하면 콜백함수2 를 호출하게 된다

2. 카카오로그인이 성공했을 때 실행할 함수

function (authObj) {
  fetch(KAKAO_URL, {
    method: "POST",
    headers: {
      Authorization: authObj.access_token
    }
  })
  .then((res) => res.json())
  .then((res) => {
    localStorage.setItem("kakao_access_token", authObj.access_token);
    localStorage.setItem("kakao_refresh_token", authObj.refresh_token);
    localStorage.setItem("flix_access_token", res.flix_access_token);
    if (res.flix_access_token) {
      alert("Flix의 재미를 느껴보세요!");
      history.push("/");
    } else alert("다시 카카오 로그인을 해주세요.");
  });
}

fetch() 함수로 서버에 통신

fetch(KAKAO_URL, {
    method: "POST",
    headers: {
      Authorization: authObj.access_token
    }
  })

이 블로그 내용을 읽으면 이해에 도움이 될 것 같다
서버에 새로운 데이터를 저장할 것이기 때문에 method: "POST" 방식으로
headers에는 카카오서버로부터 받은 access_token kakao_access_token을 Authorization 키값으로 전달한다

서버로부터 받은 response 가공

  .then((res) => res.json())
  .then((res) => {
    localStorage.setItem("kakao_access_token", authObj.access_token);
    localStorage.setItem("kakao_refresh_token", authObj.refresh_token);
    localStorage.setItem("flix_access_token", res.flix_access_token);
    if (res.flix_access_token) {
      alert("Flix의 재미를 느껴보세요!");
      history.push("/");
    } else alert("다시 카카오 로그인을 해주세요.");
  });

• 서버로부터 받은 response를 json으로 변환해주고 거의 고정처럼 사용되는 것같다
• 카카오로부터 받은 access_token, refresh_token을 각각 "kakao_access_token", "kakao_refresh_token" 이라는 key값에 넣어서 localStorage에 저장하고
• 우리 서버로부터 받은 flix_access_token을 "flix_access_token" 라는 key값으로 localStorage에 저장한다
• 만약 우리서버로부터 response에 flix_access_token이 있으면 로그인이 성공적으로 된 것이기 때문에 main페이지로 이동시켜주고
• 그렇지 않다면 로그인이 정상적으로 작동되지 않은 것이기 때문에 다시 로그인을 하라는 alert를 띄운다

3. 카카오 로그인이 실패했을 때 실행할 함수

function (err) {
  alert(JSON.stringify(err));
}

에러내용을 객체형태 (JSON)로 alert 띄운다
아니면 카카오로그인 실패!의 이라고 alert을 띄워도 될것같긴하다
굳이 궁금하다면 console.log을 통해 우리가 확인할정도로만..?