フロントエンドでOAUTH 2.0認証を使用する鍵は、承認プロセスを理解し、リクエストとコールバックの処理を正しく実裝することです。 1.承認リクエストの開始：Scope、Client_id、Redirect_uri、Response_Type、その他のパラメーターを含むサードパーティ認証URLを作成し、ユーザーにジャンプまたはポップアップログインをガイドします。 2。プロセスコールバック：Redirect_uriのURLパラメーターからコードを抽出し、トークンと交換するためにバックエンドに送信します。 3.トークンを保存および使用：トークンをLocalStorageまたはメモリに安全に保存し、各APIリクエストの承認ヘッダーに攜帯します。 4.ローカルアカウントを関連付ける：バックエンドは、Multi-Login Unifiedを?qū)g現(xiàn)するために、プロバイダーとプロバイダー_IDを介してOAuthユーザーをローカルアカウントにバインドします。プロセス全體には、XSSの防止やトークンの保管をCookieに避けるなど、セキュリティが必要です。

OAUTH 2.0を使用したフロントエンド認証は、見た目ほど神秘的ではありません。本質(zhì)的には、サードパーティのサービス（GoogleやGitHubなど）にユーザーのIDの確認を支援し、トークンを返すことであり、フロントエンドはこのトークンを使用して獨自のバックエンドインターフェイスにアクセスします。

プロセス全體の鍵は、OAuthの承認プロセスを理解し、リクエストを正しく開始し、フロントエンドのコールバックを処理することです。いくつかの実用的な観點からこれを達成する方法について話しましょう。

OAUTH承認リクエストを開始する方法

最初のステップは、ユーザーがサードパーティの承認ページにジャンプするように導くことです。この手順は通常、URLをスプライシングして、ユーザーが自動的にクリックまたはジャンプすることができるようにします。

Googleログインを例にとると、次のようなリンクを作成する必要があります。

 https://accounts.google.com/o/oauth2/v2/auth？
  scope =電子メールプロファイル＆
  client_id = your client_id＆
  Redirect_uri =コールバックアドレス＆
  Response_type = code＆
  state =ランダム文字列

• scope 、電子メールやプロファイルなど、取得する許可範囲です。
• client_id 、サードパーティのプラットフォームで適用したアプリケーションIDです。
• redirect_uri 、ユーザーの承認後にフロントエンドアプリケーションに戻るアドレスです。
• response_type=codeは、取得したいのは承認コードであることを意味します。

通常の練習は、フロントエンドに「ログインボタン」を提供し、クリックしてこのリンクにジャンプすることです。一部のWebサイトでは、ポップアップウィンドウで承認ページを開きます。これにより、メインページが更新されないようになります。

OAuthコールバックを処理する方法

ユーザーの承認が完了した後、サードパーティはユーザーを設定したredirect_uriにリダイレクトし、 codeパラメーターを搭載します。この時點で、トークンを交換するために次のステップのために、フロントエンドはこのコードをバックエンドに送信する必要があります。

たとえば、ユーザーはhttps://your-site.com/auth/callback?code=abc123xyzにリダイレクトされます。このページでJSのコードを抽出してから、 /auth/googleのようなバックエンドインターフェイスにpostリクエストを送信できます。

 const urlparams = new urlsearchparams（window.location.search）;
const code = urlparams.get（ 'code'）;

fetch（ '/auth/google'、{
  方法：「投稿」、
  ボディ：json.stringify（{code}）、
  ヘッダー：{'content-type'： 'application/json'}
}）
.then（res => res.json（））
.then（data => {
  //トークンをlocalStorageまたはlocalStorage.setItem（ 'token'、data.token）に保存します。
}）;

知らせ：

• セキュリティの問題を簡単に引き起こす可能性があるため、この段階でトークンを直接クッキーに保管しないでください。
• 単一ページアプリケーション（SPA）の場合は、ルーティング構(gòu)成で/auth/callbackために個別に処理することを忘れないでください。

トークンの使用方法は？どこに存在しますか？

トークンを取得した後、バックエンドAPIにアクセスする資格情報があります。通常、それをリクエストし、HTTPヘッダーのAuthorizationフィールドに入れるたびにそれを持參するために行われます。

 fetch（ '/api/user/me'、{
  ヘッダー：{
    承認： `Bearer $ {localStorage.getItem（ 'token'）}`
  }
}）;

トークンの保管場所にはいくつかのオプションがあります。

• LocalStorage ：長期的な効果的なトークンに適していますが、XSSリスクに注意してください。
• メモリ変數(shù)：より安全ですが、ページの更新は失われます。
• セキュアクッキーhttponly ：バックエンド制御により適しており、フロントエンドは直接操作を推奨しません。

トークンに有効期限がある場合は、有効期限をフロントエンドに記録し、期限が切れる前に自動的に更新することをお勧めします（バックエンドがリフレッシュトークンをサポートしている場合）。

サードパーティのログインをローカルアカウントに関連付ける方法

多くの製品により、ユーザーはOAUTHを介してログインしたり、ローカルアカウントを使用したりできます?，F(xiàn)時點では、OAUTHユーザーをローカルデータベースのユーザーにマッピングする方法を検討する必要があります。

一般的な慣行は次のとおりです。

1. ユーザーが初めてOAuthを介してログインすると、バックエンドはバインディングレコードがあるかどうかを確認します。
2. そうでない場合は、新しいローカルアカウントを作成し、OAuth IDに関連付けます。
3. 後でログインするときは、OAuth IDに基づいて対応するローカルユーザーを見つけます。

Provider（Google、Githubなど）、Provider_id（サードパーティユーザーの一意の識別子）、user_id（ローカルユーザーのID）などのフィールドを記録するuser_oauth_providersなど、各OAuthユーザーのテーブルを維持できます。

これの利點は、複數(shù)のOAUTHプラットフォームをサポートして同じアカウントにログインできることです。また、後でユーザーがバインドまたはバインドできるようにすることもできます。

基本的にそれだけです。 OAuth自體はプロトコル仕様であり、フロントエンドはプロセスに従う必要があります。重要なのは、コールバックの取り扱い、トークンの安全に保存、バックエンドと協(xié)力するなど、キーステップを見逃さないことです。

以上がOAUTH 2.0を使用してFrontEnd認証を?qū)g裝しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。