Kakao Developersのドキュメントを参照してください.

開始前の準備

1.アプリケーションの追加

kakao開発者、私のアプリケーションに入ります👉🏻 アプリケーションの追加👉🏻 入力情報

この手順では、アプリケーション全体に追加したアプリケーションが表示されます.

2.アプリケーションキーの確認

新しく作成したアプリケーションをクリックすると、多くの情報が表示され、ログイン時に必要なアプリケーションキーを表示できます.

3.登録プラットフォーム

設定するプラットフォームを選択します.Webプラットフォーム登録を選択しました.ドメイン名を登録します.

⑪エラーページ∧エラーの原因は、ドメインアドレスの後に2479142を削除するだけでよいからです.

✔АААААААААААААААА

登録済み.

4.Redirect URIの登録

ここでRedirect URIを登録する際に疑問があります.
私はlocalhost:3000/をホームページとして指定します.現在のバックエンドに接続せずにログインしようとすると、最初にホームページにアクセスすることはありません.
なお、KACA開発者の文書では、REST APIを使用する場合は、ダイレクトURIを使用する必要がある.Javascriptで実現した私にとって、不適切な物語かどうかを区別するのは難しいです.
私の場合、まだアクセスtokenに対するRedirectはありませんので、メイン画面で登録されていると思いますが、反映されていないと思います.完璧な通信をしていないからだと思います.(バックエンド通信後、ブログで再更新!)

5.ログインの有効化

活性化をONに変更すると、以下の確認ができます.

6.JavaScriptのKaKao SDKの設定

👉🏻 まず、/をnpmに取り付ける.
👉🏻 Step 1.WebページにはJavaScript SDKが含まれています.

//index.html

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

👉🏻 Step 2.初期化
「≪マイ・アプリケーション｜My Application｜Eas≫」>「≪アプリケーション・キー｜Application Key｜Eas≫」の下で、JavaScriptキーを確認します.JavaScriptキーをJAVASCRIPT KEYに割り当てて初期化関数を呼び出し、関数を呼び出して初期化が成功したかどうかを確認します.
関数呼び出しに成功しました.

7. init

 <script>
        // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('JAVASCRIPT_KEY');

        // SDK 초기화 여부를 판단합니다.
        console.log(Kakao.isInitialized());
    </script>

KACA開発コンサルティング書では、上記のようにinitを行っています.
ロギンに必要なロギンですjsは適用されます

//Login.js

 useEffect(() => {
    window.Kakao.init('JAVASCRIPT_KEY입력');
  }, []);

react hooksを使用しているので、userEffectにinit設定を書きました.
➊ここでwindowを設定する前に、関数呼び出しは良いが、トークンが不確定な問題を発見…!同じ問題に遭遇したら、"react-kakao-loginに近づいてみましょう.

8.KaKaoログインをボタンにバインドする

注意:https://developers.kakao.com/tool/demo/login/login?method=dynamic

私が選択した実装方法に基づいてコードを決定することができます.コードをコピーして、私のボタンと連動すればいいです!

//Login.js
// 로그인 버튼 함수

const loginWithKakao = () => {
    window.Kakao.Auth.login({
      success: function (authObj) {
        console.log(authObj.access_token);
      },
      fail: function (err) {
        alert(JSON.stringify(err));
      },
    });
  };

//Login.js
//로그인 버튼
<LoginButton kakao onClick={loginWithKakao}>
            <i className="fas fa-comment" />
            카카오톡으로 로그인
          </LoginButton>

9.起動完了！

ログイントークンも落とされやすい!Redirect URIセクションの補足説明、フィードバック🙏