GPTea☕️ 카카오 로그인 / 로그아웃 구현

1️⃣ 카카오 로그인

1. 네이버 로그인을 구현한 후 카카오 로그인을 추가했다. 둘은 isLoggedIn상태를 공유한다. 네이버 로그인을 하거나 카카오 로그인을 하면 setIsLoggedIn상태끌어올리기를 통해 isLoggedIn상태가 true로 갱신되고, MyGptea컴포넌트가 조건부 렌더링된다.

2. 네이버 로그인 api는 함수를 제공하여 code를 받고 access_token을 요청하는 과정 없이, 로그인 버튼을 누르면 바로 redirect url로 access_token을 발급해주었다.(함수 내부에서는 과정을 거친다.) 카카오는 redirect url로 Authorization Code를 받아 이것으로 access_token을 요청하는, Authorization Code Grant Type 과정을 직접 구현해 주었다. 좋은 연습이 되었다. 

 

🔨 TypeScript에서 src의 img파일 import하여 src에 경로를 지정하는 방법이다.

// src/custom.d.ts
declare module '*.png';

위처럼 .d.ts파일을 만들어서 허용하고 싶은 파일 형식을 작성해주면 해결된다.

 

🔨 접근 토큰 발급 시 에러 KOE010이 떴다. 두가지 원인이 있었다.

 

1. 내 애플리케이션>제품 설정>카카오 로그인>보안 Client Secret을 활성화 시켜주면 접근 토큰 요청 시 client_secret 파라미터도 필수로 넘겨주어야 한다. 나의 경우, 활성화를 시켜준 상태여서 넘겨주었다.

 

2. POST요청 시 body에 JSON.stringify()로 넘겨주지 말고 url encoding을 해서 넘겨주어야 한다.

알고있던 fetch 사용법에 따라 JSON.stringify로 JSON으로 변환한 뒤 POST를 해주었는데, 여전히 같은 에러가 떴다. 이 문제에 대한 카카오팀의 답변을 참고하였다. JavaScript의 encodeURIComponent()함수를 이용하여 data encoding을 해준다. 예를 들어, 고양이&강아지를 검색하고 싶은데 특수문자 &을 쿼리스트링 파라미터를 구분하는 용도로 해석하여 고양이로만 검색이 된다. 그렇기 때문에 encoding을 해주어야 한다. 다음과 같이 접근 토큰을 요청할 수 있다.

const { search } = useLocation();

  const getAccessToken = () => {
    const code = search.split('=')[1];

    const parameterForTokenRequest: any = {
      grant_type: 'authorization_code',
      client_id: `${process.env.REACT_APP_KAKAO_API_KEY}`,
      redirect_uri: `${process.env.REACT_APP_KAKAO_CALLBACK_URL}`,
      code: code,
      client_secret: `${process.env.REACT_APP_KAKAO_SECRET_KEY}`,
    };

    const queryString = Object.keys(parameterForTokenRequest)
      .map((param: any) => encodeURIComponent(param) + '=' + encodeURIComponent(parameterForTokenRequest[param]))
      .join('&');

    fetch(`https://kauth.kakao.com/oauth/token?${queryString}`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
    })
      .then((response) => response.json())
      .then((json) => {
        if (json.access_token) {
          localStorage.setItem('kakao_access', json.access_token);
        }
      });
  };

  useEffect(() => {
    if (search.includes('code')) getAccessToken();
  }, []);

 

 

2️⃣ 카카오 로그아웃

  const handleKakaoLogout = () => {
    if (!localStorage.getItem('kakao_access')) {
      console.log('not logged in.');
      return;
    }

    fetch('https://kapi.kakao.com/v1/user/logout', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: `Bearer ${localStorage.getItem('kakao_access')}`,
      },
    })
      .then(() => {
        localStorage.removeItem('kakao_access');
        setIsLoggedIn(false);
        navigate('/');
        alert('bye kakao!');
      })
      .catch((e) => console.log('error!', e));
  };

  const handleLogout = () => {
    if (localStorage.getItem('access')) {
      handleNaverLogout();
    } else if (localStorage.getItem('kakao_access')) {
      handleKakaoLogout();
    }
  };

네이버 access_token은 로컬스토리지에 access로 저장하고(추후 naver_access로 수정하였다), 카카오 access_token은 kakao_access로 저장했다.
로그아웃할 때 api 요청으로 토큰을 만료하고 로컬스토리지에서도 삭제한다. 따라서 로컬스토리지에는 현재 로그인중인 토큰만 저장하기 때문에 로컬스토리지에 저장되어있는 토큰의 종류로 현재 어떤 소셜로그인을 로그아웃할 것인지 결정하고 그에 따른 url로 요청하도록 작성했다. 

 

3️⃣ 결과

 

 

🙌 github commit 🙌

feat: make KAKAO login and logout feat · evergarden0412/gptea-web@6c50088

 

4️⃣ 고민

React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희

My구독의 React Query 전환기

위 글들을 보니 Redux와 Redux-saga라이브러리를 서버 데이터를 관리하기 위해 많이 사용하는 것 같다. 
gptea의 경우 prompt에서 메세지를 작성하고 등록하면 메세지가 화면에 현시되어야 하는데, 이것을 서버에 등록하고 바로 가져올 방법에 대해 생각해보았다.
실시간 채팅 프로그램은 보통 웹소켓 기술을 이용해서 서버에서 업데이트되는 데이터를 지속적으로 가져오는 것 같은데, gptea는 채팅서비스라기보단 게시글 서비스에 가깝기 때문에(UI는 채팅이지만) 필요하지 않을 것 같다.
하지만 메세지를 등록하고, 바로 AI가 실시간으로 답변을 해주는 것이라서 실시간 업데이트는 필요하다.

프로젝트를 만드는 것은 아직 모르는게 많아서 프로젝트를 진행하며 직접 경험하고 학습을 하려는 것이 가장 큰 목적이다. 그래서 gptea를 먼저 Redux와 필요하면 Redux-saga로 관리를 해보고 장단점을 따져본 뒤, React-query와 Recoil을 사용하는 것으로 변경할까 한다.

 

Reference

https://velog.io/@hunmok1027/Typescript-image-import

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