javascriptとbunを使用したGoogle Oaututhenticationの段階的なガイド

このガイドは、Google OAUTH2ユーザー認証の基本的なJavaScriptとExpress Serverの実装を示しています。 図書館はプロセスを簡素化しますが、この実践的なアプローチはコアの概念を明確にします。速いJavaScriptランタイムであるBunを使用します

---

Google Oauth2セットアップ

コーディングする前に、Googleクラウドプロジェクトを構成します：

ステップ1：Googleクラウドプロジェクトを作成

Google Cloud Consoleにアクセスします。
新しいプロジェクトを作成します（または既存のプロジェクトを使用します）。
2. 

ステップ2：OAUTHの同意画面を構成

1. api＆services＆gt;に移動しますOAuthの同意画面。
アプリ名、サポートメール、およびその他の必要な詳細を提供します。
2. 
（オプション）より有益な同意画面のためにブランディングをカスタマイズします。
3. 

ステップ3：スコープを定義します

1. scopesの下で、add：
   • ：ユーザーの電子メールにアクセスします。email
   • ：ID検証のためのOpenID Connect。openid
   • ：基本的なプロファイルデータ（名前、写真）にアクセスします。 profile

ステップ4：OAUTHクライアントIDを生成

（処理に数分をかけます。）

1. 資格情報＆gtに移動します。資格情報を作成します＆gt; oauthクライアントID。
webアプリケーション
2. を選択型として選択します setauthorized javascript origins
a を指​​定します：http://localhost:3000をリダイレクトします。 生産展開のためにこれらのURIを更新することを忘れないでください。 Googleは、認証後にユーザーをリダイレクトURIにリダイレクトします。簡単にするために、同じページを使用します。
3. http://localhost:3000ステップ5：テストユーザーを追加 テストの場合は、テストユーザーのメールアドレスを追加します。徹底的なテスト後にアプリを公開してください。

Google Oauth2コードの実装

---

プロジェクト構造

BUNバージョン1.2。

を使用しています

<code>project/
├── public/
│   └── index.html
├── src/
│   └── index.js
├── .env
└── bun.lock</code>

このHTMLは、GoogleのサインインとOAuthコールバック処理用のシンプルなインターフェイスを提供します。 （Brevityのために省略されたコードですが、元のプロンプトに含まれています）

index.html（サーバー側のロジック）

（Brevityのためにコードが省略されましたが、元のプロンプトに含まれています）

プロジェクトの実行index.js

bun（bunwebサイトで入手可能）をインストールします

、

。

サーバーの実行：
2. フローをテストします：アクセス.env、Googleにサインインし、トークンのコンソールを確認してください。 GOOGLE_CLIENT_ID GOOGLE_CLIENT_SECRET GOOGLE_REDIRECT_URI
結論
3. bun run index.js
この手動の実装は、Google OAuth2を強く理解しています。 PassportやNextAuthなどのライブラリは利便性を提供しますが、このアプローチは基礎となる認証メカニズムを照らします。

以上がjavascriptとbunを使用したGoogle Oaututhenticationの段階的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。