- Express OpenID Connect SDK: このフローを実装する最も簡単な方法で、面倒な処理の大半を担ってくれます。弊社の Javascript SDK を使用する場合は、ご利用のアーキテクチャに適した対策を実装していることを確認してください。詳しくは、Auth0.js Reference をお読みください。
- Authentication API: 独自のソリューションを構築したい場合は、このまま読み進めて、API を直接呼び出す方法をご確認ください。
前提条件
Auth0 にアプリを登録します。詳しくは、シングルページアプリケーションの登録を参照してください。- アプリケーションの種類で Single-Page App を選択します。
- Allowed Callback URL に
{https://yourApp/callback}を追加します。 - アプリケーションの グラントタイプ に Implicit が含まれていることを確認します。詳しくは、グラントタイプの更新を参照してください。
ユーザーを認可する
ユーザーの認可を取得し、アプリにリダイレクトして戻します。フローを開始するには、まずユーザーの認可を取得する必要があります。このステップには、次のプロセスの 1 つ以上が含まれる場合があります。- ユーザーを認証すること;
- 認証を処理するために、ユーザーを にリダイレクトすること;
- アクティブな (SSO) セッションを確認すること;
- 以前に同意が与えられていない場合は、要求された権限レベルについてユーザーの同意を取得すること。
認可URLの例
パラメータ
例として、アプリに login を追加する際の認可 URL 用 HTML スニペットは次のようになります。
レスポンス
問題なく進むと、HTTP 302 レスポンスが返されます。要求した資格情報はレスポンスボディにエンコードされています：
response_type に何を指定したかによって異なる点に注意してください。
Auth0 は、認可 URL の呼び出し時に含めた state 値も返します。
ID トークンには、デコードして抽出する必要のあるユーザー情報が含まれています。
ユースケース
基本的な認証リクエスト
この例では、ステップ 1 でユーザーを認証する際に送信できる、最も基本的なリクエストを示します。Auth0 のログイン画面が表示され、設定済みの任意の接続を使ってユーザーがサインインできます。 これにより、ID トークンが返されます。この ID トークンはリダイレクト URL から取得できます。ユーザーの名前とプロフィール画像を要求する
この例では、通常のユーザー認証に加えて、名前やプロフィール画像などの追加のユーザー情報を要求する方法を示します。 ユーザーの名前とプロフィール画像を要求するには、ユーザーの認可時に適切なスコープを追加する必要があります。 これで、ID トークンに要求した name とプロフィール画像のクレームが含まれます。ID トークンをデコードすると、次のようになります。GitHub でユーザーをログインさせる
通常のユーザー認証に加えて、この例では GitHub のようなソーシャルアイデンティティプロバイダーにユーザーを直接リダイレクトする方法を示します。この例を機能させるには、Auth0 Dashboard > 認証 > Social に移動して、適切な接続を設定する必要があります。接続名は 設定 タブで確認してください。 ユーザーを GitHub のログイン画面に直接送るには、ユーザーを認可する際にconnection パラメーターを渡し、その値を接続名 (この場合は github) に設定する必要があります。
これで、ID トークンには GitHub から返されたユーザー固有の ID を持つ sub クレームが含まれるようになります。ID トークンをデコードすると、次のような内容になります。