TIL 85일차

카카오 소셜 로그인

로그인 버튼 있는 jsx 파일에

const KakaoMove = `https://kauth.kakao.com/oauth/authorize?
client_id=${카카오 키}
&redirect_uri=${카카오리다이렉트 URL}&response_type=code`;

// 버튼 클릭시 kakaoMove 실행
const KakaoLogin = (e) => {
    e.preventDefault();
    window.location.href = KakaoMove;
  };

라우터부분

<Route path="/login/kakao" element={<kakao 실행할 컴포넌트/>}/>

backend와 통신api 연결

export const kakao = async (post) => {
  try {
    const data = await instanceAxios.get(`백엔드 카카오api?code=${post}`);
    return data;
  } catch (error) {
    alert(error);
  }
};

kakao 실행할 컴포넌트

const navigate = useNavigate();
let code = new URL(window.location.href).searchParams.get("code");

kakao(code).then((res) => {
// 통신 성공했을때 access/refresh 토큰발행 해준다!
  if (res.data.customHttpStatus === 2000) {
    setCookie("accesstoken", res.headers.accesstoken, {
        path: "/",
        maxAge: 1800,
      });
      setCookie("refreshtoken", res.headers.refreshtoken, {
        path: "/",
        maxAge: 1800,
      });
      navigate("/");
    } else {
      alert("로그인 실패");
    }
  });
};