3월16일TIL

임덤덤·2023년 3월 16일
0

Oauth Login Front

  • 이번 프로젝트로 Oauth 개발을 처음 진행해봤다
    • KaKao , Google을 구현했음

개발순서

  1. 사용자가 누를수있는 버튼 만들기
  2. KaKao,Google 둘중에 하나를 클릭하면 해당하는 Oauth Page로 리다이랙트 시키기
  3. 로그인 이후 백앤드 로직처리 후 Oauth Callback Page로 돌아오기
  4. Oauth Callback Page의 로직 바로 실행하여 로그인 후 토큰정보 localStoreage에 담기
  5. 루트로 이동하기

구현코드

KaKao Button

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>
    </>
  );
};

Oauth Callback Page

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 공식문서에서는 인가코드를 받고 토큰까지 받아서 백엔드한테 넘겨주라는 흐름으로 되어있는데 또 다른곳은 클라이언트는 리다이랙트만 시켜준다고 한다.. 많은 혼동이 있었다

profile
응애🐣 예비 개발자 입니다.

0개의 댓글