![[Auth0] Auth0デフォルトのログイン画面をカスタマイズしてみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-e37cf03c5caac969de0f633e4738977d/1862834d1806cb03b64a8000a5a1a39e/Auth0ByOkta.jpg?w=3840&fm=webp)
[Auth0] Auth0デフォルトのログイン画面をカスタマイズしてみた
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。
ゲームソリューション部の西川です。
今回はAuth0でデフォルトで用意されているログイン画面をカスタマイズしてみます。
Auth0を導入するにあたって、使用したいアプリケーションのデザインやコンセプト、要件によってログイン画面のカスタマイズが必要になるかと思います。
どのように、どれくらいカスタマイズすることができるのかお伝えできればと思います。
実際にカスタマイズに入る前に、そもそもAuth0が提供する（または、連携できる）ログイン画面にはどのようなものが存在するか、概要の説明をします。
Auth0のログイン画面について
Universal Login
Universal Loginとは、Auth0から提供されるログイン画面のことです。
エンジニア側でログイン画面の実装を行う必要がなく、パスワードリセットなどの基本的な機能も網羅されております。
また、Universal Loginの中でもUniversal LoginとClassic Loginに分岐します。
公式としては基本的にUniversal Loginを推奨されており、今後のアップデートなどもUniversal Loginの方で行われていきます。
パスキーなどを使用する場合などもUniversal Loginを選択する必要があります。
従って、特定のユースケースでClassic Loginを使わざるを得ない場合を除いて、Universal Loginを使用するのが良いかと思います。
詳細は下記公式ドキュメントをご参照ください。
Embedded Login
アプリケーションにログインを埋め込むことができます。
ログイン画面を自前で実装する必要がある反面、デザインについては自由に実装することができます。
ただし、Auth0の公式としては非推奨となっております。
詳しくは下記ページをご確認ください。
カスタマイズしてみる
今回は推奨されているUniversal Loginを利用してカスタマイズを行なっていきます。
公式ドキュメントはこちら。
基本的にダッシュボートからさまざまなカスタマイズを行えます。
Management APIを用いて、カスタマイズを行う方法もあります。
今回はダッシュボードを利用していきます。
Branding > Univesal Loginに、設定のページがあります。
Customization Optionsからは色やフォントの指定を行えます。
ここからカスタマイズできる項目の例としては以下のようになります。
| 設定名 | 説明 |
|---|---|
| Colors | ボタンやテキストの色、エラーや成功時のダイアグラムの色などを指定できます |
| Fonts | woffやwoff2を利用してフォントの指定が行えます。テキストのサイズの変更も行えます |
| Borders | ボタンのボーダの太さや形を指定できます |
| Widgets | ロゴを任意のものに置き換えたり、場所が指定できます |
| Page Background | 背景の色や、メインフレームの位置を指定できます |
Advanced Optionsからはテンプレートやテキストの変更を行えます。
ロゴの変更
それでは早速、ロゴを差し替えてみます。
クラスメソッドHPからロゴのURLを取得してきました。
WidgetのLogo urlにURLを設定します。
以下のようにサンプルに反映されました。
Auth0にロゴ用のファイルアップロードを行う箇所はないので、あらかじめS3などにロゴをアップロードしてURLからロゴを表示できるようにしておく必要があります。
ボタンのデザイン変更
続いて、ボタンのデザインを変更してみます。
丸角に変更し、色も変更します。
サンプルに反映されました。
設定画面右上の「Save And Publish」を押下します。
チュートリアルの際に作ったアプリで起動したところ、反映されていることを確認できました。
テンプレートのカスタマイズ
Management APIを利用すればもう少し、細かいデザインの変更を行えます。
HTMLに加え、Liquidテンプレート言語というものを利用して動的な情報の表示を行います。
ただし、テンプレートのカスタマイズを行うには、カスタムドメインの設定を行っておく必要があります。
カスタムドメインの設定方法については後ほど記事にしようと考えております。
今回はカスタムドメインはすでに作成した前提で進めていきます。
まずは、HTMLを用意します。
（※ChatGPTで生成しました）
<!DOCTYPE html>
<html lang="ja">
<head>
{%- auth0:head -%}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header-content {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
main {
padding: 20px;
background-color: #FFFFFF;
}
</style>
</head>
<body class="_widget-auto-layout">
<header class="header-content">
<h1>ウェブサイトのタイトル</h1>
</header>
<main>
<h2>メインコンテンツ</h2>
<p>{%- auth0:widget -%}</p>
</main>
<footer>
<p>© 2024 サンプルウェブサイト. All rights reserved.</p>
</footer>
</body>
</html>
続いて、APIのBodyパラメータとして送信するので1行に直します。
<!DOCTYPE html><html lang="ja"><head>{%- auth0:head -%}<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>サンプルページ</title><style>body{font-family:Arial,sans-serif;margin:0;padding:0;}.header-content{background-color:#4CAF50;color:white;padding:10px 0;text-align:center;}footer{background-color:#333;color:white;text-align:center;padding:10px 0;position:relative;bottom:0;width:100%;}main{padding:20px;background-color:#FFFFFF;}</style></head><body class="_widget-auto-layout"><header class="header-content"><h1>ウェブサイトのタイトル</h1></header><main><h2>メインコンテンツ</h2><p>{%- auth0:widget -%}</p></main><footer><p>© 2024 サンプルウェブサイト. All rights reserved.</p></footer></body></html>
続いてManagement APIのトークンを取得しておきます。
Auth0 Management APIのAPI ExplorerやTestからアプリケーションを作成して、取得できます。
取得したトークンをAuthorizationに入力して、dataには1行に直したHTMLを入力します。
以下のようにcurlで用意しました。
curl -L -X PUT 'https://<カスタムドメイン>/api/v2/branding/templates/universal-login' \
-H 'Content-Type: text/html' \
-H 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6Ik.......xhhnT6uU9rofpaBg' \
-d '<!DOCTYPE html><html lang="ja"><head>{%- auth0:head -%}<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>サンプルページ</title><style>body{font-family:Arial,sans-serif;margin:0;padding:0;}.header-content{background-color:#4CAF50;color:white;padding:10px 0;text-align:center;}footer{background-color:#333;color:white;text-align:center;padding:10px 0;position:relative;bottom:0;width:100%;}main{padding:20px;background-color:#FFFFFF;}</style></head><body class="_widget-auto-layout"><header class="header-content"><h1>ウェブサイトのタイトル</h1></header><main><h2>メインコンテンツ</h2><p>{%- auth0:widget -%}</p></main><footer><p>© 2024 サンプルウェブサイト. All rights reserved.</p></footer></body></html>'
アプリで起動確認したところ、HTML通りヘッダーフッターが表示されました。
以上のようにHTMLやCSSを利用することで、より詳細にカスタマイズを行なっていくことができます。
さいごに
以上、ログイン画面のカスタマイズを行うことができました。
その他、ログイン画面の機能面でのカスタマイズとして、認証方法の変更も行えます。
使用できる認証方法については、前回執筆した記事にていくつか紹介させていただいておりますので、詳細は下記記事をご参照ください。
また、上記でご紹介していないものとして、SSOやエンタープライズコネクション（Microsoft Azure ADなどの外部IdPを利用した認証）なども使用できますので、公式ドキュメント等も含めご参照いただければと思います。
SaaSを利用しているとカスタマイズ性など気になるところかと思います。
今回のようにAuth0はダッシュボードやAPIを利用してログイン画面の見た目のカスタマイズを行え、サイトのブランディングイメージに寄せることができます。
本記事がAuth0利用中の方や検討中の方のご参考になれば幸いです。
