Next typescript 카카오 로그인

REST API
1

안녕하세요. 넥스트와 타입스크립트로 카카오 로그인 구현 중인데 Javascript 키를 제대로 입력했음에도 동작하지 않는 것 같습니다.

//LoginForm.tsx
 const onClickComingSoon = () => {
    const kakao = KakaoInit();
    kakao.Auth.authorize({
      redirectUri:
        '[aws서]/login/oauth2/code/kakao',
    });

    // 카카오 로그인 구현
    kakao.Auth.login({
      success: () => {
        kakao.API.request({
          url: '/v2/user/me', // 사용자 정보 가져오기
          success: (res: any) => {
            // 로그인 성공할 경우 정보 확인 후 /kakao 페이지로 push
            console.log(res);
            router.push('/kakao');
          },
          fail: (error: any) => {
            console.log(error);
          },
        });
      },
      fail: (error: any) => {
        console.log(error);
      },
    });
  };

  return (
    <form
      className="flex flex-col mx-auto justify-center items-start mt-10 "
      onSubmit={handleSubmit(onValid)}
    >
        로그인
      </button>
      <section className="flex w-full justify-center mt-4">
        <Image
          onClick={onClickComingSoon}
          src={KaKao}
          alt="kakaologin"
          className="cursor-pointer rounded-[20px]"
          priority
        />
      </section>
    </form>
  );
};


import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ko">
        <Head>
          <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

//utils.ts
export const KakaoInit = () => {
  const kakao = (window as any).Kakao;
  if (!kakao.isInitialized()) kakao.init('키를 입력하세요!');

  return kakao;
};


//react-app-env.d.ts
interface Window {
  Kakao: any;
}

카카오 로그인 버튼을 클릭하면 이런 오류가 뜹니다 ㅜㅜ
image

2

안녕하세요.

kakao.init 전에 파라미터를 콘솔 로그로 확인해 보시겠어요?
그리고 해당 앱키를 공유 부탁드립니다.

첨부 이미지를 보니 clinet_id=키를%20입력하세요! 로 되어 있네요 올바를 키를 사용부탁드립니다.

3

감사합니다! 한가지 더 질문이 있는데 인가코드로 토큰을 가져오는 과정은 onClickComingSoon 함수 내에서 kakao.Auth.login (인가코드 받아오는 과정) 이후에 /oauth/token 으로 POST 요청보내면 토큰 받을 수 있는게 맞는걸까요?

4

Kakao.Auth.login (팝업방식로그인)의 경우 success 콜백으로 접근토큰이 발급됩니다.

Kakao.Auth.login({
    success: function(authObj) {
        console.log(authObj);
    }
})

authObj: Auth - Kakao JavaScript SDK