[React] 소셜로그인- 카카오톡 로그아웃 Logout

로그인은 지난번 해보아서 로그아웃을 구현해보았다. (REST API)

 

1방법: 기본 로그아웃

- 로그아웃시키면 카카오토큰은 만료되어 API호출 불가

- 로그아웃시 다시 카카오 계정 로그인은 안함, 안해도 로그인하면 다시 토큰 받아옴

- 재로그인시 ID,PW치게하는 방법은 아래!!

 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#logout

Kakao Developers

 

나는 액세스토큰 방식 요청으로 진행했다.

아래는 구현 코드 

const snsLogout = async () => {
    const TOKEN = localStorage.getItem('token');
    try {
      const datas = await axios.post(
        'https://kapi.kakao.com/v1/user/logout',
        {},
        {
          headers: {
            Authorization: `Bearer ${TOKEN}`,
          },
        }
      );
      closeLogoutModal();
      localStorage.removeItem('token');
      setIsTokenLogin(false);
      navigate('/');
    } catch (error) {
      console.error('카카오 로그아웃 실패', error);
    }
  };

 

*여기서 로그아웃> 재로그인 할때 id,pw를 다시 치게 하고 싶었는데 안되서 보니 URL문제였다. 

prompt=login이 꼭 있어야지만 재로그인시 id,pw치는 화면이 나타남!! 

이것만 바꾸고 방법1 진행시 재로그인하면 ID,PW치는 화면으로 이동됨

 

 

2방법: 카카오 계정과 함께 로그아웃

기본적인 로그아웃은 토큰을 만료시켜 해당 사용자 정보로 더 이상 카카오 API를 호출할 수 없도록 하는 기능으로, 서비스 로그아웃과 카카오계정 로그아웃을 각각 수행해야 합니다. 이와 달리 카카오계정과 함께 로그아웃 기능은 카카오계정 로그아웃 처리 후 Logout Redirect URI로 302 리다이렉트(Redirect)하여 서비스 로그아웃까지 연속해서 수행할 수 있도록 구성돼 있습니다.

- 재로그인시 바로 로그인됨(id,pw 안침)

-Redirect URL (logout) 을 파라미터에 담아 GET으로 요청 (카카오개발자사이트>내애플리케이션>제품설정>카카오로그인>고급>Logout RedirectURL 설정하기/로그아웃후 전환되는 링크임) 

  const datas = await axios.get(
        `https://kauth.kakao.com/oauth/logout?client_id=${KAKAO_REST_API_KEY}&logout_redirect_uri=${KAKAO_LOGOUT_REDIRECT_URI}`
      );

 

3방법: 연결끊기

- 재로그인시 ID,PW을 다시 입력하진 않고, 아래와 같이 동의 화면만 뜸

  const datas2 = await axios.post(
        'https://kapi.kakao.com/v1/user/unlink',
        {},
        {
          headers: {
            Authorization: `Bearer ${TOKEN}`,
          },
        }
      );

 

4방법: 두가지 방법(바로 재로그인  or ID,PW재로그인)

-아래와 같이 두가지 버튼이 나온다.(이서비스만 로그아웃은 다시 바로 재로그인, 카카오 계정과 함께 로그아웃은 ID를 다시 쳐서 로그인)

카카오계정과 함께 로그아웃 클릭시)

window.location.href = `https://kauth.kakao.com/oauth/logout?client_id=${KAKAO_REST_API_KEY}&logout_redirect_uri=${KAKAO_LOGOUT_REDIRECT_URI}`;
      localStorage.removeItem('token');