카카오 로그인 질문입니다

REST API
1 
//index.html
    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<JavaScript 키>&amp;libraries=services"
    ></script>
  </head>
  <body>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

declare global {
  interface Window {
    kakao: any;
  }
}

const Login = () => {
  const CLIENT_ID = process.env.REACT_APP_KAKAO_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/api/user/kakao/callback";
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const kakaoLoginClick = () => {
    console.log("clicked");
  };

  const { register } = useForm();
  return (
    <>
      <InputContainer>
        <Input
          {...register("이메일")}
          type="email"
          placeholder="이메일을 입력하세요"
        />
        <Input
          {...register("비밀번호")}
          type="password"
          placeholder="비밀번호를 입력하세요"
        />
        <Link to="/signup">
          <h3>회원가입</h3>
        </Link>
      </InputContainer>

      <a href={KAKAO_AUTH_URL}>
        <LoginButton>
          <img src={require("../img/kakao_logo.png")} alt="kakao_logo" />
        </LoginButton>
      </a>
    </>
  );
};

export default Login;

//Router.tsx
const CLIENT_ID = process.env.REACT_APP_KAKAO_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/api/user/kakao/callback";
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          <Route exact path="/login">
            <Login />
          </Route>
          <Route path="/api/user/kakao/callback">
            <Test />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>


//Test.tsx

const Test = () => {
  return window.kakao.Auth.login({
    scope: "profile, account_email",
    success: function (res: any) {
      console.log(res);
    },
  });
};
export default Test;

Test.tsx에서

Test.tsx:2 Uncaught TypeError: Cannot read properties of undefined (reading 'login')
    at Test (Test.tsx:2:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

react-dom.development.js:20085 The above error occurred in the <Test> component:

    at Test (http://localhost:3000/static/js/bundle.js:1062:28)
    at Route (http://localhost:3000/static/js/bundle.js:44250:29)
    at Switch (http://localhost:3000/static/js/bundle.js:44452:29)
    at div
    at Router (http://localhost:3000/static/js/bundle.js:43885:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:43506:35)
    at Router
    at App

이렇게 뜨는데 구글링 해봐도 뭐가 문제인지 모르겠습니다…

2

현재 리액트와 타입스크립트로 구현중입니다.

3

안녕하세요.
(1) undefined (reading ‘login’) 메시지로 봐서는 JS SDK 접근을 못하는 것으로 보입니다. 이부분 먼저 확인해보시면 좋을 것 같아요.
(2) kakao.Auth.login 함수는 리다이렉트 URI가 필요없는 방식인데, REDIRECT_URI, KAKAO_AUTH_URL은 어떤 용도인가요?
(3) kakao.Auth.login 함수에 scope는 설정하지 않으셔도 됩니다. (기본 디벨로퍼스 설정 동의항목 표시됩니다.)

4

답변을 늦게 봤네요…제가 맞게 이해한지는 모르겠는데
로그인을 하기 전에 Kakao.Auth.authorize() 이런식으로
authorize 처리를 먼저 하는게 맞나요?

5

안녕하세요.

Kakao.Auth.authorize()과 Kakao.Auth.login()

어떤 것을 사용하셔도 상관 없으나, 각각 특성을 확인하셔서 사용하시면 좋을 것 같습니다.

대략 login()은 팝업 방식이며 별도 리다이렉트 설정 없이 사용합니다.
authorize()는 스크립트에 리다이렉트 설정하고 리다이렉트 된 이후에는 REST-API방식과 동일하게 사용하시면됩니다.
authorize()는 어떤 브라우저 환경에서든 카카오톡앱으로 간편 로그인을 제공합니다.

Kakao.Auth.authorize( ): JavaScript | Kakao Developers 문서
Kakao.Auth.login(): JavaScript | Kakao Developers 문서

6

질문이 더 있습니다. 지금 react-kakao-login 라이브러리를 사용하고 있는데

 const CLIENT_ID = process.env.REACT_APP_KAKAO_API_KEY;
  const REDIRECT_URI = "[aws 서버]/api/user/kakao/callback";
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

...

<a href={KAKAO_AUTH_URL}>
        <KakaoLogin
          token={String(process.env.REACT_APP_KAKAO_API_KEY)}
          onSuccess={() => {
            console.log("로그인성공");
          }}
          onFail={(err) => {
            console.log("로그인실패", err);
          }}
        >
          <img src={require("../img/kakao_logo.png")} alt="kakao_logo" />
        </KakaoLogin>
      </a>

제 쪽에서는 400에러가 뜨고 백엔드에서는 401에러가 뜬다고 하네요…뭐가 문제일까요…