エラーページをカスタマイズする

認可エラーイベント用のカスタムエラーページを作成する方法を説明します。

認可エラーが発生し、コールバックURLが有効な場合、認可サーバーは適切なエラーパラメーターと状態パラメーターをコールバックURLに返します。コールバックURLが無効な場合、アプリケーションはデフォルトのAuth0エラーページを表示します。

アプリケーションは次のような場合、無効なコールバックURL以外の理由でも、デフォルトのAuth0エラーページを表示することがあります。

• Auth0 Authentication APIログインエンドポイントを呼び出すときに必要なパラメーターが不足している。
• ユーザーが期限切れのパスワードリセットリンクを開いた（クラシックログインエクスペリエンスを使用している場合）。
• ユーザーがブックマークされたログインページに移動し、デフォルトのログインルートが指定されていない。

​

パラメーター

カスタムエラーページを構成することを選択した場合、認可サーバーはクエリ文字列としてURLに追加されたパラメーターを返します。

パラメーター	説明
client_id	Auth0アプリケーションの識別子。
connection	エラー時に使用された接続。
lang	エラー時に使用された言語セット。
error	エラーコード。
error_description	エラーの説明。
tracking	内部ログでエラーを見つけるためにAuth0で使用される識別子。

このパラメーターはエラーの種類によって異なり、要求固有のものになります。たとえば、エラーの原因となった要求にclient_idが含まれていない場合、認可サーバーはclient_idパラメーターを返しません。

​

カスタムエラーページを表示する

カスタムエラーページを表示する場合は、次の2つのオプションがあります。

1. Auth0 DashboardまたはAuth0 Management APIを使用して、ユーザーをカスタムエラーページにリダイレクトする。
2. Auth0がManagement API経由でカスタムエラーページをレンダリングするように構成する。

​

Dashboardを使用してユーザーをカスタムエラーページにリダイレクトする

Dashboardを使用して、ユーザーをカスタムエラーページにリダイレクトするようにAuth0を構成します。

1. ［Auth0 Dashboard］>［Tenance Settings（テナント設定）］に移動します。
2. ［Error Pages（エラーページ）］ セクションを見つけます。
3. ［Redirect users to your own error page（ユーザーを独自のエラーページにリダイレクトする）］ オプションを選択します。
4. ユーザーに表示するエラーページのURLを入力し、［Save（保存）］ を選択します。

​

Management APIを使用してユーザーをカスタムエラーページにリダイレクトする

Management APIのテナント設定更新エンドポイントを使用します。{mgmtApiAccessToken}プレースホルダー値をManagement APIのアクセストークンに置き換え、JSON本文のurlフィールドの値をエラーページの場所をポイントするように更新します。

cURL

curl --request PATCH \
  --url 'https://{yourDomain}/api/v2/tenants/settings' \
  --header 'authorization: Bearer {mgmtApiAccessToken}' \
  --header 'content-type: application/json' \
  --data '{"error_page": {"html": "", "show_log_link":false, "url": "http://www.example.com"}}'

フィールド	説明
{mgmtApiAccessToken}	update:tenant_settingsのスコープを持つManagement APIのアクセストークン。
show_log_link	テナントログにエラーへのリンクを表示するかどうかを示します。有効な値はtrueとfalseです。
url	リダイレクトしたいカスタムエラーページの場所。

​

カスタムエラーページをレンダリングする

Classic Loginウィジェットの一環としてエラーが表示される場合（パスワードリセット用リンクの有効期限が切れた場合など）、Auth0がホストするカスタムエラーページは、構成済みであっても表示されません。

Management APIのテナント設定更新エンドポイントを使用します。{mgmtApiAccessToken}プレースホルダー値をManagement APIのアクセストークンに置き換え、JSON本文のhtmlフィールドの値をページのHTMLを含む文字列に更新します。

Liquid構文を使用して、次の変数を含めることができます。

• {client_id}
• {connection}
• {lang}
• {error}
• {error_description}
• {tracking}

cURL

curl --request PATCH \
  --url https://login.auth0.com/api/v2/tenants/settings \
  --header 'authorization: Bearer MGMT_API_ACCESS_TOKEN' \
  --header 'content-type: application/json' \
  --data '{"error_page": {"html": "<h1>{{error | escape }} {{error_description | escape }} This error was generated {{'\''now'\'' | date: '\''%Y %h'\''}}.</h1>", "show_log_link": false, "url": ""}}'

フィールド	説明
{mgmtApiAccessToken}	update:tenant_settingsのスコープを持つManagement APIのアクセストークン。
show_log_link	テナントログにエラーへのリンクを表示するかどうかを示します。有効な値はtrueとfalseです。
html	表示したいカスタムエラーページのHTML。

XSS脆弱性を防ぐには、Liquidのescapeフィルターとstrip_htmlフィルターを使用してカスタムテンプレートをサニタイズします。

​

もっと詳しく

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