export const KakaoOauthButton = () => {
const navigate = useNavigate();
const handleKakaoLogin = async () => {
const kakaoLoginUrl =
"서버주소/oauth2/authorization/kakao";
window.location.href = kakaoLoginUrl;
};
return (
<>
<button
className="KaKao_Oauth_Button"
onClick={() => {
handleKakaoLogin();
navigate("/oauth/kakao/login"); // Oauth Callbakc Page
}}
>
K
</button>
</>
);
};
export default function OauthPage() {
const navigate = useNavigate();
useEffect(() => {
const email = new URLSearchParams(window.location.search).get("email");
baseInstance.get(`/oauth?email=${email}`).then((res) => {
localStorage.setItem("memberId", res.data.memberId);
localStorage.setItem("accessToken", res.data.accessToken);
localStorage.setItem("refreshToken", res.data.refreshToken);
navigate("/");
window.location.reload();
});
}, []);
return <div>loading...</div>;
}
우선 위 코드들 처럼 구현을 진행 했지만 좋은 방법은 아니다
1. 서버에서 사용자의 정보를 리다이랙트 시킬때 URL로 넣어서 보내준다
1-1. 이말은 사용자의 이메일 정보만 안다면 그사람의 정보를 다 받을수있다는것
2. 복잡도가 올라간다
2-1. Oauth로 3일을 지새운 나로써 지금 이 코드도 너무 복잡하고 보기도 힘들다 일단 구현하자는 마음으로 코드를 썼지만 리팩토링이 많이 필요해보인다
3. 어디까지가 프론트가 해야할일인지
3-1. 사실 이 부분을 가장많이 고민했다 KaKao API 공식문서에서는 인가코드를 받고 토큰까지 받아서 백엔드한테 넘겨주라는 흐름으로 되어있는데 또 다른곳은 클라이언트는 리다이랙트만 시켜준다고 한다.. 많은 혼동이 있었다