- Express OpenID Connect SDK：フローを実装する最も簡単な方法です。難しくて手間がかかる作業のほとんどが処理されます。Javascript SDKを使用する場合は、アーキテクチャに適した軽減措置を実施しているか確認してください。詳細については、「Auth0.js v9の参考情報」をお読みください。
- Authentication API：独自のソリューションを構築したい場合は、このまま読み続けて、APIを直接呼び出す方法を学習してください。
前提条件
アプリをAuth0に登録する必要があります。詳細については、「シングルページアプリケーションの登録」をお読みください。- ［Single-Page App（シングルページアプリ）］ を ［Application Type（アプリケーションタイプ）］ として選択します。
{https://yourApp/callback}の ［Allowed Callback URL（許可されているコールバックURL）］ を追加します。- アプリケーションの ［Grant Types（付与タイプ）］ に ［Implicit（暗黙）］ が含まれていることを確認します。詳細については、「付与タイプを更新する」をお読みください。
ユーザーを認可する
ユーザーの認可を要求しすると、アプリにリダイレクトされます。フローを開始するには、ユーザーの認可が必要です。この手順には、以下のようなプロセスが含まれます。- ユーザーを認証する
- 認証を行うために、ユーザーをIDプロバイダーへリダイレクトする
- 有効なシングルサインオン（）セッションを確認する
- 以前に同意を得ていない場合は、要求された権限レベルについてユーザーの同意を得る
認可URLの例
パラメーター
たとえば、アプリにログインを追加する際の認可URLのHTMLスニペットは、以下のようになります。
応答
すべてが成功すると、HTTP 302応答を受け取ります。要求された資格情報は本文にエンコードされます。
response_typeとして何を要求したかによって異なります。
Auth0は、認可URLへの呼び出しに含めた状態値も返します。
IDトークンには、デコードして抽出する必要があるユーザー情報が含まれています。
ユースケース
基本的な認証要求
この例では、手順1でユーザーを認可する際に行う最も基本的な要求について説明します。Auth0のログイン画面を表示して、構成されている接続でユーザーがサインインできるようにします。 これによってIDトークンが返され、リダイレクトURLから解析することができます。ユーザーの名前とプロファイルの写真を要求する
通常のユーザー認証に加えて、この例では名前や写真など、追加のユーザー詳細情報を要求する方法について説明します。 ユーザーの名前や写真を要求するには、ユーザーを認可する際に、適切なスコープを追加する必要があります。 これで、IDトークンには要求された名前と写真のクレームが含まれます。IDトークンをデコードする際には、以下のようになります。GitHubでのユーザーログインを要求する
通常のユーザー認証に加えて、この例では、ユーザーをGitHubなどのソーシャルIDプロバイダーへ直接送る方法について説明します。この例を利用するには、［Auth0 Dashboard］>［Authentication（認証）］>［Social（ソーシャル）］の順に移動し、適切な接続を構成します。［Settings（設定）］ タブから接続名を取得します。 ユーザーをGitHubログイン画面に直接送るには、ユーザーを認可する際にconnectionパラメーターを渡し、その値を接続名（この場合、github）に設定する必要があります。
これで、subクレームがGitHubから返されたユーザーの一意のIDとともにIDトークンに表示されます。IDトークンをデコードする際には、以下のようになります。