[ベータ版] Auth0でテンプレートを使用したNewユニバーサルログインページのカスタマイズができるようになりました

2020.06.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Liquidテンプレートを使ってNewユニバーサルログインページをカスタマイズできるようになったよ とお知らせがありました。

Auth0のユニバーサルログインには、 ClassicとNewの2パターンのエクスペリエンスが提供されていますが、今回のアップデートはNewが対象です。 そして、テナントでカスタムドメインが有効になっている場合にのみ使用できます。

今まで、Newユニバーサルログインページのカスタマイズはロゴの変更、ボタンのプライマリーカラー、バックグラウンドカラーぐらいしかカスタマイズできませんでしたが、今回のアップデートでより柔軟にカスタマイズできるようになる と説明されています。

※ Newを選んでいてもHTMLカスタマイズは可能ですが、Classicと同じようなページが表示されていました。

参考: ClassicとNewの違い

どういうことが可能になるかというと、ドキュメントに以下のように説明されていました。

  • グラデーションや背景画像で背景をカスタマイズする
  • ページレイアウトを変更する
  • ヘッダーまたはフッターを追加する
  • アプリケーションまたはユニバーサルログインページに応じて異なるコンテンツを提供する

すべてのページに同じテンプレートが使用されているので、テンプレート1枚を変更していくことになります。

利用可能な変数が決まっていて、 変数によって処理を分けたりすることが可能です。

なお、テンプレートに含む必要があるタグがあるので注意が必要です。

  • auth0:widget : すべてのページに表示されるウィジェットのHTMLが含まれます(ログイン、パスワードのリセットなど)。
  • auth0:head : ウィジェットのレンダリングに必要なタグが含まれています

簡単な例ですが、 ログインページにヘッダーを追加する といった場合は、以下のコードになります。

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {% if prompt.name = "login" %}
    <div style="height:56px;background-color: #000;color:#ffffff;padding:1.375rem 0;"><h1>ここは {{application.name}} のヘッダーです</h1></div>
    {% endif %}
    {%- auth0:widget -%}
  </body>
</html>

prompt.name : レンダリングされるユニバーサルログインプロンプトの名前

このテンプレートを反映させるには、Management APIを利用する必要があります。

curl --request PUT \
  --url 'https://<<YOUR_DOMAIN>>/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer <<MGMT_API_ACCESS_TOKEN>>' \
  --header 'content-type: text/html' \
  --data '<<反映させたいテンプレートのコード>>'

--data にテンプレートコードを入れます(1行に)。

ちなみに、必須のタグがないと以下のエラーが返ってきました.

{"statusCode":400,"error":"Bad Request","message":"The template must contain a single auth0:head tag and at least one auth0:widget tag.","errorCode":"invalid_body"}

APIの実行が終わり、ログインページにアクセスすると、

デフォルトのユニバーサルログインだと、ログインウィジェットが表示されているだけですが、上記の画像のようにデザインの変更ができました。

この機能を実際に使ってみて疑問に思ったことがあります。

  • ユニバーサルログインのウィジェットを変更するのではなく、ウィジェットが表示されているページにコンテンツを追加するもの
  • 利用可能な変数の上書きはできない

この2点は現在サポートに確認中なので、進捗があったら更新します。

追記:

ウィジェットデザインの変更はauth0:widgetを囲むhtmlとcssで行ってください cssでクラスが足りなくてデザインしづらいとかあったらフィードバックしてください

とのことでした

現在はベータ版なので、今後追加される機能もあるかと思いますが、Auth0を使っている方は是非試してみて、フィードバックを送信しましょう。

フィードバック

GAの時にはダッシュボード上から編集できると良いな。