KaKao Loginの実現

10065 ワード
テキストリンク
本当に苦労しましたね.私のような人が苦労するのを恐れているので、ちゃんと整理したいです.
kakao開発者からアプリキーをもらい、edirect uriを登録するなど、他にもいろいろあるので省略しましょう!
好奇心のある人がここに来ます!
どんなに毒薬を探して報告しても、nextjsで初めてやったので、どうすればいいか分からない.
まず、フロントだけで実現しますか?フロントエンド+バックエンドが使用されているかどうかを確認する必要があります.
フロント+バックグラウンドを選びました.
Kakaoにログインした人が私たちのユーザー表にいることを確認するため、どうせ私たちのサーバーを通らなければなりません.最初はダメだったけど、フロントだけでやるためにもがいていた自分が…ううう
今から解決過程を説明して、私は相応の毒薬と一緒に記録します!毒薬を見たら、どう説明すればいいか、追加の助けが必要なら、もっと役に立つはずだ.(余計なことをする)

1.Javascript SDKの追加


KakaoAPIを使うにはSDKを追加する必要があります.
参照DOCS
上記のように、以下のスクリプトを追加する必要があります.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
next構造に見知らぬ私はいったいどこにいるの?入れますか?とても混乱した部分でした^^
Next jsの構造上、最上位ヘッダ部分に追加する必要があるスクリプトはdocumentです.tsxに追加するには!下図のように.
import Document, { Html, Head, Main, NextScript } from 'next/document';

import { AppConfig } from '@/utils/AppConfig';

// NextScript가 _app.tsx를 송출한다.
// Need to create a custom _document because i18n support is not compatible with `next export`.

class MyDocument extends Document {
  render() {
    return (
      <Html lang={AppConfig.locale}>
        <Head>
          <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
        </Head>
        <body className="min-h-screen bg-gray-800">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
これでscriptが追加され、エラーが表示されます
(property) JSX.IntrinsicElements.script: DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>

External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scriptseslint(@next/next/no-sync-scripts)

この問題を解決しようとnext scriptなどを書いてめちゃくちゃになったのですが、まだ解決していないのでlint disableを掛けました.
/* eslint-disable @next/next/no-sync-scripts */
私はあなたを治すことができます...とにかくこのSDKが追加されて良かった!!

2.初期化


初期化させてください...
Kakaoで作った初期化毒液

nextタイプのスクリプトにどのように適用するか分かりません.
これをしないKaKaoAuthがこのように毒を使うと
kakao is not defined
こんな文がたくさん見られます^^
この問題を解決するためにapp.tsxには次のコードが追加されています.
import { useEffect } from 'react';

import { AppProps } from 'next/app';
import { SWRConfig } from 'swr';

import '../styles/global.css';

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

const App = ({ Component, pageProps }: AppProps) => {

  useEffect(() => {
    window.Kakao.init(process.env.KAKAO_KEY);
  }, []);

  return (
    <SWRConfig>
      <Component {...pageProps} />
    </SWRConfig>
  );
};

export default App;
これでappの一番上にuserefextで初期化すればいいです.あちこち使っていたので、一番上に置いておきました.
この時KEYをenvに入れて書けばいいJavascript KEYを書け!(REST API KEYじゃない!!)
declare global {
  interface Window {
    Kakao: any;
  }
}
この部分では、WindowsにKaKaoというオブジェクトがあることを事前にお知らせします.だから、今はもうKaKaoが誰なのか分からない.windowを吼えの戦いと定義すべきだ.next君は本当に^^;

3.レンダリング画面


既存のログイン画面に次のボタンを追加しました.
サンプルと変形が報告されています
  function loginFormWithKakao() {
    Kakao.Auth.loginForm({
      success(authObj) {
        getKakao(authObj.access_token);
      },
      fail(err) {
        console.log(err);
      },
    });
  }
  
  return (
  <button onClick={loginFormWithKakao}>
  <img
    src="//k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg"
    width="222"
    alt="카카오 로그인 버튼"
  />
</button>
)
レンダー部分にボタンを入れて、ポップアップさせたいのでloginFormと書きました.

4.サーバ通信


いつapiをリクエストしますか?
フロントでKakao Token->backリクエストを受信
はい.だから簡単に言えば以下の通りです.
export async function getKakao(accessToken: string): Promise<any> {
  const payload = {
    kakaoToken: accessToken,
  };
  try {
    const data: any = await poster('/auth/kakao', payload);
    return data.kakaoProfile;
  } catch (error) {
    return defaultUser;
  }
}
ポスターは自分が使っていたものを使えばいいです.気になる方はメッセージを!

📍 注意:バックグラウンドでapiを要求するのではなくフロントでCORSエラーが発生します。


REST API DOCS
急いで編んで、anyも多くて、まだ整理していませんが、更新するとヒントが更新されます!
ガチャガチャとKACA登録完了V 1を実現し、
参考文献
https://yong-nyong.tistory.com/16
https://han-py.tistory.com/417?category=931233
https://docs.strapi.io/developer-docs/latest/developer-resources/content-api/integrations/next-js.html#get-request-your-collection-type
NotifyCenterオブザーバモード
中国語の数字がアラビア数字に変わる(最大1兆元を超えない)