✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지
Issue ▸
카카오 로그인 REST-API 기반의 프론트 구현에 대한 이슈들. 결국엔 백엔드 API 개발의 문제였지만, 그래도 기록해본다.
Solve :
const kakaoLogin: any = () => {
const REST_API_KEY = "BE와 합의한 REST API ID를 작성한다.";
// 클라이언트에서 리다이렉트 받을 페이지 라우팅을 준비하고, 그 주소를 기입
const REDIRECT_URI = "http://localhost:5173/kakao";
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
// kakaoURL 변수에 담긴 동적 쿼리 주소를 통해 코드를 반환 받을 수 있다.
window.location.href = kakaoURL;
};
const Kakao = () => {
// searchParams 라는 메소드를 이용하여 주소 속 code라는 key를 가진 value를 가져와 변수에 담을 수 있다.
const code = new URL(window.location.href);
const codeValue = code.searchParams.get("code");
const navigate = useNavigate();
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get(
`${
import.meta.env.VITE_REACT_API_KEY
}/api/members/kakao/callback?code=${codeValue}`,
{
headers: {
"Content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
}
);
if (res.status === 200) {
toast.success("카카오 계정을 통해 로그인 되었습니다.");
localStorage.setItem("authorization", res.headers.authorization);
// localStorage.setItem("authorization_refresh", refreshToken);
navigate("/");
}
} catch (error) {
toast.error("카카오 로그인에 문제가 생겼습니다.");
}
};
fetchData();
}, []);
return (
<div className="flex flex-col justify-center items-center h-[100%]">
<Loading />
</div>
);
};
export default Kakao;