항해 9주차 실전프로젝트(2)

이번주에 http통신연결하고, 데이터주고받고, 추가데이터요청하고, 불필요데이터 제거해달라 요청하고...

사실 저번주와 다를 건 없었다.

하지만 이번주에 처음 해본 것은 하나 있었다.

바로 소셜로그인이었다.

OAuth2.0을 사용하여 카카오로그인을 연결했다.

처음에는 제공된 설명을 읽어도 당최 뭔소린지 이해를 못했는데, 여러번 읽고, 저번 기수의 코드를 읽어보며 대충 어떻게 굴러가는지 이해하게되었다.

 

그리고 백엔드분이 준비해준 API KEY를 사용하여 연결했다.

처음부터 잘 되지는 않았다.

그 이유는 Redirect URI를 설정하는데있어, 이해도가 적었기 때문이다.

처음 사용자가 카카오로그인 버튼을 누르면 미리 설정된 API KEY와 REDIRECT_URI를 주소값에 담아 카카오가 준비한 주소로 이동한다.

주소값은 다음과 같다.

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REACT_APP_KAKAO_REST_API_KEY}&redirect_uri=${REACT_APP_KAKAO_LOGIN_REDIRECT_URI}&response_type=code`;

해당 주소로 이동하면 원하는 정보를 사용자로부터 동의를 받은 뒤 해당 데이터를 코드화시켜서 가져온다.

그리고 해당 코드를 쿼리스트링에담아 백엔드에 요청을 해준다.

그럼 백엔드에서 해당 코드에 알맞는 토큰을 발급해 프론트로주어서 로그인에 성공한다!

 

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REACT_APP_KAKAO_REST_API_KEY}&redirect_uri=${REACT_APP_KAKAO_LOGIN_REDIRECT_URI}&response_type=code`;

const handleKakaoLogin = () => {
    window.location.href = KAKAO_AUTH_URL;
  };

      <KakaoBtn onClick={handleKakaoLogin}>
        <Kakao src={kakao_login_medium_wide} />
      </KakaoBtn>

버튼을 누르면 해당 값이 지정된 주소로 이동하게함

카카오에서 제공한 사이트에서 로그인하고 코드를 발급받음

 

import React, { useEffect } from 'react';
import { __kakaoLogin } from '../apis/userApi';
import { useAppDispatch } from '../redux/store';

const OAuthKakao = () => {
  const dispatch = useAppDispatch();
  const kakaoLogin = (payload: any) => {
    dispatch(__kakaoLogin(payload)).then(res => {
      console.log(res);
      const { type, payload }: any = res;
      console.log(payload);
      if (type === 'kakaoLogin/fulfilled') {
        localStorage.setItem('userId', payload.userId);
        window.location.href = 'http://localhost:3000/';
      }
      // 에러처리
      else if (type === 'kakaoLogin/rejected') {
        alert(`${payload.response.data.errorMessage}`);
      }
    });
  };

  let code = new URL(window.location.href).searchParams.get('code');
  console.log(code);

  useEffect(() => {
    kakaoLogin(code);
  }, []);
  return <div>kakao</div>;
};

export default OAuthKakao;

리다이렉트 URI로 이동하고 useEffect를 사용해서 페이지에 들어올 때 백엔드와 통신하는 함수를 실행시킨다.

이때 인자로 전달되는 code는 카카오에서 지급받은 코드이다.

 

res값을 받아와서 성공했을 때 userId와 accesstoken, refreshtoken을 저장함.

 

끝!

설명만 보면 너무 어려웠는데, 실제로 사용됐던 코드를 보고, 백엔드와 라이브코딩을하다보니 잘 해결이되었고, 이해도 훨씬 쉬웠다.

 

역시 소통은 굉장히 중요하다.

다음주엔 css를 적용하고, 새롭게 적용될 api를 잘 분담하여 중간발표를 준비해야겠다.