[LAB-5] 카카오 소셜로그인 로그아웃 기능 구현 에러

질문 작성자

김서현

문제 상황

질문> 카카오 로그아웃 기능 구현이 안됩니다. 현재 저희가 원하는 상황은, 카카오 로그아웃 버튼을 누르면 카카오계정이 로그아웃되고 아래와같이 새로운 카카오로그인창이 뜨는 것입니다. 그러기 위해선 카카오에 관련된 쿠키내역이 모두 삭제가 되어야 합니다.
(카카오 developer에서 설명한대로 해야하는데 안되는 상황)
카카오에 야무쌤의 권한을 부여해두었습니다!

아래는 저희가 원하는 상황입니다. <카카오계정 로그아웃 후, 카카오 로그인 버튼 눌렀을때 다시 계정을 입력해야하는 상황> 2023-04-10 22;51;35

아래는 저희가 원하지 않는 "현재" 상황입니다. <카카오계정 로그아웃이 제대로 안되어, 원래 로그인했던 계정이 기억되어 바로 들어가지는 상황> 2023-04-10 22;35;52

프로젝트 저장소 URL

https://github.com/React-Project-lab5/React-Project-lab5
develop브랜치

현재 파일 위치
src파일 : src.zip
로그인은 구글로그인 혹은 아이디 : babjo@naver.com / 비번: aaaa1111 입니다.
.env파일에 작성하시면 되는 코드를 아래에 적어드립니다.
.env파일 평소와 바꼈으니 주의바랍니다!!!!!!!!!

VITE_API_KEY = AIzaSyDBWIctC8FjPlqPiJllfsIX_HveGYDD1ao VITE_AUTH_DOMAIN = babjo-life.firebaseapp.com VITE_PROJECT_ID = babjo-life VITE_STORAGE_BUCKET = babjo-life.appspot.com VITE_MESSAGE_SENDER_ID = 1065462580105 VITE_APP_ID = 1:1065462580105:web:a78b340517d5f108ee5758 VITE_MEASUREMENT_ID = G-YFM830245Z VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D VITE_KAKAO_API_KEY=ebf9334d7db030f4f026a0d53f08a62a

환경 정보

운영체제 : Windows
Node.js : v16.14.0
라이브러리 : React v18.2.0

문제 분석

https://github.com/yamoo9/likelion-FEQA/issues/288#issuecomment-1501027470 답변에서 안내해드렸던 방법으로 Kakao 로그아웃을 진행할 수 있습니다.

Kakao API 토큰 만료가 아니라, Kakao 계정 로그아웃은 서비스에서 직접 구현해야 됩니다. 그러므로 공식문서 가이드에 따라 Logout Redirect URI를 등록(최대 10개)해야 합니다.

Kakao 계정 로그아웃은 서비스가 아닌, Kakao의 URI에서 진행됩니다. 그러므로 로그아웃 이후 리디렉션 될 URL 설정이 필요합니다. 현재는 개발 중이므로 http://localhost:3000을 등록하였습니다. 추후 배포된 URI를 추가 입력해야 합니다.

문제 해결

Kakao 계정 로그아웃이 되면 Kakao 서비스에 의해 추가된 쿠키 정보를 삭제합니다.

아래 영상은 로그아웃 처리(Kakao 쿠키 모두 제거) 과정 이후, 다시 로그인 화면이 정상적으로 띄워지는 것을 보여 줍니다.

https://user-images.githubusercontent.com/1850554/231035636-de712ee5-355c-4bd0-a298-a13fec83aae0.mp4

MyPage.tsx 파일의 로그아웃 함수 코드를 아래와 같이 작성합니다.

MyPage.tsx

const handleSignOut = async () => {
  await signOut(auth);

  if (user.providerData[0].photoURL.includes('kakao')) {
    const { Kakao, location } = window;
    const CLIENT_ID = import.meta.env.VITE_KAKAO_API_KEY;
    const LOGOUT_REDIRECT_URI = 'http://localhost:3000';

    // Kakao API 토큰 만료 설정
    await Kakao.Auth.logout();

    // Kakao 계정 로그아웃 설정
    location.replace(`https://kauth.kakao.com/oauth/logout?client_id=${CLIENT_ID}&logout_redirect_uri=${LOGOUT_REDIRECT_URI}`);

  } else {
    alert('로그아웃이 되었습니다.');
    navigation('/');
  }
};

수정 가이드

Kakao는 TypeScript를 지원하지 않으므로 정확한 타입을 제공하지 않습니다. 그러므로 Kakao.Auth 타입을 아래와 같이 설정합니다.

global.d.ts

interface Window {
  Kakao: {
    Auth: {
      logout: () => Promise<unknown>;
      getAccessToken: () => string | null;
    };
  };
}

글로벌 타입을 설정한 후부터는 TypeScript에서 오류를 더 이상 표시하지 않습니다.

그리고 ButtonKakao.tsx 파일의 handleKakaoLogin 함수는 전면적으로 수정해야 합니다. 제 Kakao 계정으로 테스트 한 결과, response.profile.kakao_account 정보에는 email이 포함되지 않아 오류가 발생합니다.

const handleKakaoLogin = async (response: KakaoLoginResponse) => { ... };

그리고 Kakao 로그인 API로부터 응답받은 이메일 정보로 Firebase 인증에 회원가입을 시도하는 것과 로그인을 하는 것은 나눠져야 합니다. 현재 개발된 코드는 회원가입만 처리하고 있어, 한 번 가입된 이후 다시 가입을 시도하기 때문에 로그인에 실패하게 됩니다.

그러므로 Kakao 회원가입 버튼과 로그인 버튼에 따른 핸들링을 각각 구성해야 합니다.

// Kakao 회원가입
const handleKakaoSignUp = async() => {};

// Kakao 로그인
const handleKakaoSignIn = async() => {};

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인합니다. 😃

src.zip

yamoo9 / likelion-FEQA