소셜로그인 토큰에 대해서...

박은정·2021년 9월 16일

목록 보기

63/70

fkix_token = 우리 서버에서 발급한 토큰
카카오서버에서 받은 토큰이랑 다르다!!

1. 카카오 로그인이 성공

Kakao.Auth.login({
      success: function (authObj) {

카카오 로그인 메서드를 통해 카카오 소셜로그인을 했을 때 성공한다면 실행할 콜백함수를 선언할 것이다

1-1. 클라이언트 → 서버 : access_token 전달

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

클라이언트가 Kakao.Auth.login() 메서드를 통해 카카오 로그인을 했을 때
성공하면 카카오 API로부터 받은 authObj 객체를 매개변수로 하는 콜백함수를 실행해서
Kakao 로그인을 하는 장호님 서버에 POST 메서드 방식으로
{ Authorization: authObj.access_token } 의 headers를 보냈을 때

1-2. 서버 → 클라이언트 : flix_token 변환하고 전달

클라이언트에서 보내준 authObj.access_token와 카카오API로부터 받은 회원의 id를 가지고
우리 자체의 flix_token을 만들어서 클라이언트에 다시 보내주는 것 같다

1-3.token → localStorage에 저장

.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_token", res.flix_token);

받은 response를 json형식으로 변환한 다음, response에 있는 flix_token 를 localStorage에 flix_token라는 키값에 넣어주고
카카오 API로부터 받은 authObj의 access_token과 refresh_token을 각각의 키값으로 동일하게 localStorage에 넣어준다

localStorage에는 총 3개의 데이터를 저장하게 되는 것이다

flix_token

kakao_access_token

kakao_refresh_token

1-4. 우리 서버에서 받은 응답에 flix_token이 있다면 메인페이지로 이동

    if (res.flix_token) {
      alert("Flix의 재미를 느껴보세요!");
      history.push("/");
     } else {
      alert("다시 카카오 로그인을 해주세요.");
     }
});

우리쪽 서버에서 클라이언트인 나에게 flix_token을 response로 준다는 것 자체가
카카오소셜로그인을 통해 신원이 확인된 회원을 우리 회원으로 인정해준다는 것이기 때문에
이러한 response에 flix_token이 존재한다면 main페이지로 이동해서 서비스를 누리게 해주고
이러한 response에 ~~유효기간만료로 인해~~ flix_token이 없다면 다시 카카오 로그인을 하라는 alert를 띄우게 했다

2. 카카오 로그인 실패

fail: function (err) {
  alert(JSON.stringify(err));
},

카카오로그인을 했는데 실패한다면 실행할 콜백함수를 선언한다
실패한 데이터를 json형태로 alert를 띄어준다
이런 경우는 보통 kakao developer의 애플리케이션에서 설정한 플랫폼 도메인 주소를 잘못 지정한 경우인 것 같다 우선

위와 같은 로직으로
서버에서는 kakao에서 받은 access_token을 가지고 우리 자체의 토큰으로 만들어서 클라이언트에서 전달하고
클라이언트에서는 이러한 flix_token이 존재한다면 서비스를 이용하도록 권한을 줬는데

이 다음에 논의되는 것이 flix_token의 유효기간이었다

flix_token의 유효기간 지정

kakao에서 받는 access_token과 refresh_token의 유효기간은 각각 아래와 같이 다른데

flix_token의 유효기간과 kakao_access_token의 유효기간을 비슷하게 할지
: 동일하게 할 수 없던 이유는 kakao_access_token의 유효기간이 초 단위로 주어지기 때문에 정확히 동일하게 주기 어렵다고 하셨다
flix_token의 유효기간이 ~~kakao_access_token의 유효기간 보다~~ 더 길게 할지
: 이런경우 만약 kakao_access_token이 먼저 만료되면 flix_token만 남게 되고
kakao_access_token의 유효기간이 ~~flix_token의 유효기간 보다~~ 더 길게 할지
: 이런경우 만약 flix_token이 먼저 만료되면 kakao_access_token만 남게 된다

이렇게 때문에

kakao_access_token이랑 flix_token 이렇게 두개로만 다룰지
kakao_refresh_token이랑 flix_token 이렇게 두개로만 다룰지
kakao_access_token, kakao_refresh_token, flix_token 이렇게 세개 모두 다룰지 고민을 했는데

준영님의 조언

어차피 kakao_access_token은 (혹은 kakao_refresh_token이던) 이 사람의 신원을 믿을만 한지 확인만 하는거고
우리는 그러한 카카오의 신원확인을 통해 우리 회원으로 인정을 해서 flix_token을 발급해서
이렇게 발급된 flix_token이 있기만 하면 서비스를 이용하면 되지 않겟냐는 ~~뉘앙스... (정확히 기억을 못하는 것같다)~~
그리고 우리의 서비스는 동영상을 보는 것이기 때문에 출입증의 역할인 토큰의 유효기간이 긴 것이 좋을것같기 때문에