Auth0のユニバーサルログイン

Auth0のユニバーサルログインには、認可サーバーの重要な機能であるログインフローが備わっています。ユーザーがアプリケーションにアクセスするために本人確認を行う必要がある場合は、ユニバーサルログインにリダイレクトし、Auth0に認証プロセスを処理してもらうことができます。

ユニバーサルログインを使用すれば、さまざまな認証方法に対処するための統合作業が不要になります。識別子とパスワードの簡単なフローから開始し、ソーシャルログインや多要素認証（MFA）など他の機能を追加して、安全かつユーザーフレンドリーなエクスペリエンスをカスタマイズすることができます。

ユニバーサルログインの構成は動的に行われます。また、Auth0の集中型認証サーバーでホストされたWebページがログインフローを完全に駆動するため、アプリケーションレベルでの変更は不要です。さらに、アプリケーションのコードを手動で更新しなくても、Auth0がユニバーサルログインに対して行う改善のメリットが得られます。

Auth0 Dashboardからログインページの外観と動作をカスタマイズし、一貫性のあるブランドエクスペリエンスを創造することができます。より高度なユースケースでは、各ページのコードを個別に変更することもできます。

ユニバーサルログインと埋め込みログインの違いについては、「中央集中型ユニバーサルログインと埋め込みログイン」を参照してください。

ユニバーサルログインを構成する

Auth0 Dashboardの［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Advanced Options（高度なオプション）］では、デフォルトのログインページに使用するエクスペリエンスを選択することができます。

Auth0には、2種類のホストされたログインエクスペリエンスが用意されています。

  • ユニバーサルログインでは、ユーザー向けに効率化されたエクスペリエンスを受けることができ、カスタマイズにJavaScriptを使用する必要はありません。

  • クラシックログインでは、ログインフローの各ページにJavaScript制御を使用します。

現時点では、Auth0の開発作業は主にユニバーサルログインに焦点を当てており、クラシックログインは更新されなくなりました。特定のユースケースでクラシックエクスペリエンスが必要でない限り、ユニバーサルログインの実装をお勧めします。

これら2つのエクスペリエンスの比較方法については、「ユニバーサルログインとクラシックログイン」をお読みください。

アクセシビリティ

Auth0は、以下の標準に従って、アシスティブテクノロジーを活用するユーザーに対する、ユニバーサルログインフローへのアクセシビリティを強化しました。

任意で、Auth0 Dashboardの［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Advanced Options（高度なオプション）］に移動し、トグルを使用して、これらの規格を有効にすることができます。

早期アクセスでは、このトグルでサインインフローのWCAG要素を有効にします。

また、enable_ulp_wcag_complianceフラグをプロンプト設定更新エンドポイントで更新し、Management APIでこの機能を有効にすることもできます。

curl -L -X PATCH 'https://<tenant_name>.auth0.com/api/v2/prompts' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Bearer abc123' \
-d '{"enable_ulp_wcag_compliance":true}'

Was this helpful?

/

ユニバーサルログインにHTML、CSS、およびJavascriptカスタマイズを大規模に行った場合、カスタマーエクスペリエンスにダウンストリームの影響を及ぼす可能性があります。WCAG準拠バージョンのAuth0を非運用テナントで有効にし、更新によってユニバーサルログインのカスタマイズが壊れていないかを認証フローでテストします。

顧客のカスタマイズに影響する可能性のある領域は以下のとおりです。

  • スクリーンリーダーにアクセスできるよう、検証エラーが代わりにツールチップとしてインライン表示される

  • デフォルトのインターフェイスコンポーネントの色が色のコントラストに関するWCAGガイドラインに沿っている

  • フォームがオートコレクトを使用する

  • インターフェイスコンポーネントのARIAとその他の属性によって、スクリーンリーダーを簡単に移動できる

  • メールアドレスはクライアント側で検証され、サーバー側の検証と同じ形式ルールが適用されます。

  • HTMLラベルはアクセス可能で、それぞれの入力フィールドに関連付けられます。

  • パスワードの複雑さの要件とインラインエラーメッセージはスクリーンリーダーによって読み上げられます。

  • すべての認可フロー画面には便利で分かりやすいページタイトルがあります。

  • 必須フィールドにはラベルに視覚的なインジケーターが使用されます。

ログインページをカスタマイズする

ユニバーサルログインを有効にしたら、Auth0 Dashboardから直接ログインページをカスタマイズすることができます。具体的には、ページテンプレートやテーマ、サインアップとログインプロンプト、およびその他のテキストエレメントをカスタマイズできます。詳細については、「ユニバーサルログインのカスタマイズ」を参照してください。

クラシックログインを実装する場合は、Auth0 Dashboardから基本的なブランディングオプションをカスタマイズすることができます。次に、ログインフローの構築に使用するSDKで、高度なカスタマイズを構成できます。詳細については、「クラシックログインのカスタマイズ」を参照してください。

ユニバーサルログインを実装する

ユニバーサルログインまたはクラシックログインをテナント内で有効にしたら、以下の手順に従ってエクスペリエンスを実装します。

  1. Auth0にアプリケーションを登録します。

  2. 認証APIのログインエンドポイントを呼び出すようにアプリケーションを構成し、ログインフローをトリガーして応答を処理します。これを行うには、直接構成するか、Auth0のいずれかのSDKを使用します。

  3. データベース、エンタープライズ、またはソーシャル接続を作成し、アプリケーション向けに有効にします。

ログインページに移動する

ログインエンドポイントは任意のブラウザーから直接呼び出すことができます。

https://{yourDomain}/authorize?
  response_type=code|token&
  client_id={yourClientId}&
  connection={connectionName}&
  redirect_uri={https://yourApp/callback}&
  state={state}

Was this helpful?

/

要求には以下の値を含めなければなりません。

あるいは、connectionパラメーターを含めて、指定された接続で認証を行うようユーザーを促すこともできます。

Quickstartガイドを使用する

アプリケーションにユニバーサルログインをセットアップする方法については、「クイックスタートガイド」を参照してください。使用している技術に合った方法を選択し、クイックスタートに従って段階的に説明を受けながら実装が進められます。

もっと詳しく