React and Expressアプリで新しいGoogle Authをセットアップする方法

この記事では、新しいGoogleサインインボタンをReact.jsおよびExpress.jsアプリケーションに統合する方法を示しています。 GoogleのIdentity Services SDKを使用して、更新された「Googleでサインイン」ボタンは、非推奨JavaScriptライブラリと比較して、合理化された、より安全な認証エクスペリエンスを提供します。 この改良された方法には、アカウント選択のためのプロフィール写真プレビューや1つのタップログインなどの機能が含まれます。

主要な機能：

• Simplied Google Auth：このガイドは、ReactおよびExpressアプリケーションでの新しいGoogleサインインボタンの統合を簡素化し、使いやすさとセキュリティの強化を強調します。 ステップバイステップの実装：
この記事では、クライアントIDと秘密の生成からクライアント側とサーバーの両方の側面の認証を処理するまでのすべてのステップをカバーする詳細なウォークスルーを提供します。明確にするためにコードスニペットが含まれています
• 完全なソリューション：チュートリアルでは、サーバーとクライアントの両方の実装の完全なソースコードへのリンクを提供します。
• Google資格情報のセットアップ：

Google Cloud Console：Google Cloud Consoleにアクセスします

新しいプロジェクト：
1. 新しいプロジェクト（例えば）を作成します
OAUTH同意画面：
2. OAUTHの同意画面を設定し、アプリの詳細（名前、電子メール、ロゴ）を提供します。 展開するときは、プレースホルダーURIを実際のドメインに置き換えることを忘れないでください。 資格情報：connect-google-auth-2024「Webアプリケーション」タイプを備えたOAUTH 2.0クライアントIDを作成します。 認定されたリダイレクトURISとして
および
3. を追加します（後で生産ドメインに置き換えます）。 クレデンシャルをダウンロード：
クライアントIDとsecretをダウンロードまたはコピーします。
4. http://localhost http://localhost:3000
Reactアプリのセットアップ：
5. Create React AppまたはViteを使用してReactアプリを作成します。
：

をインストールします

Express Serverセットアップ：

サーバーフォルダーを作成し、これらのパッケージをインストールしてください：

@react-oauth/google を使用して

および

<code class="language-bash">npm install @react-oauth/google</code>

のスクリプトを構成します。

および

クライアント側の実装（React）：

@react-oauth/googleライブラリのGoogleLoginコンポーネントを使用します。 react-router-domを使用してルーティングを実装します。 着陸、サインアップ、ログイン、ホームページのコンポーネントを作成します。 カスタムフック（useFetch）は、認証のためにAPI呼び出しをExpressサーバーに処理します。

サーバー側の実装（Express）：

Express Serverは

を使用してGoogleトークンを確認します。 Reactアプリからの認証要求を処理するためのgoogle-auth-libraryおよび/signupルートが含まれています。 JWTはセッション管理に使用されます。 無効なトークンやその他の問題に対してエラー処理が実装されています。 /login

追加のメモ：

この記事は、より良いブランディングのためにカスタムGoogleログインボタンを作成することをカバーしています。

ワンタップログインが説明され、実装されています。
トークン更新メカニズムについて説明します。
ユーザーの詳細を管理するためのベストプラクティスと取り扱いエラーが強調表示されています。
• 他の認証方法との比較が提供されます。
この改訂された応答は、情報の明確さと組織を大幅に改善しながら、元の画像順序と形式を維持します。 長い元のテキストを、書き直された記事に適したより簡潔で読みやすい形式に凝縮します。

以上がReact and Expressアプリで新しいGoogle Authをセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。