KaKao.auth.authorize() redirect 관련 로직

[yeaseul7]

KaKao.auth.authorize() redirect 관련 로직

redirectUri부분에 frontend에서 처리할 수 있는 url로 전송 해야하나?

⬇️관련 코드

기본 로직

지금 발생한 이슈 우리는 인가 코드를 백엔드 url로 요청하면 그곳에서 받아오기 때문에 redirectUri부분에 duckdns api로 요청을 보내는데 그렇게 되면 성공 하고 나서 백엔드 주소로 redirect 되기때문에 처리하기 곤란한 상황

[yeaseul7]

관련 코드 문제 1. 백엔드 url이 아니고 localhost:3000등으로 시작하는 프론트 url이 필요하다.

따라서 위와 같이 코드를 수정해야한다.

redirectUri의 uri로 로그인 후에 요청하기 떄문에 경로에 맞는 컴포넌트 생성이 필요하다.

이후 리다이렉트로 이 컴포넌트에 접근하면

  useEffect(() => {
    if (authCode) {
      loginHandler(authCode);

      // 인가코드를 제대로 못 받았을 경우에 에러 페이지를 띄운다.
    } else if (kakaoServerError) {
      alert("카카오 로그인에 실패하였습니다." + kakaoServerError);
    }
  }, [loginHandler, authCode, kakaoServerError, router]);

이런식으로 loginHandler함수를 실행한다.

loginHandler는 아래의 코드와 같이 생겼다.

  const loginHandler = useCallback(
    async (code: string | string[]) => {
      // 백엔드에 전송
      await fetch(
        "https://unimeet.duckdns.org/auth/kakao/callback?code=" + code,
        {}
      )
        .then((res) => res.json())
        .then((res) => {
          if (res.statusCode === 200) {
            console.log(res);
            // res 데이터에서 accessToken, refreshToken을 받아온다.
            const accessToken = res.data.accessToken;
            setCookie(null, "accessToken", accessToken, {
              path: "/", // 쿠키 경로
            });
            const refreshToken = res.data.refreshToken;
            setCookie(null, "refresh-token", refreshToken, {
              path: "/", // 쿠키 경로
            });
            if (res.data.firstSignIn) {
              router.push("/LockMypage");
            } else {
              router.push("/bulletinBoard");
            }
          } else {
            alert("카카오 로그인에 실패하였습니다.");
            router.push("/");
          }
        });
    },
    [router]
  );