Lock または SDK を使用した Classic Login ページのカスタマイズ

Lock または Auth0 SDK をベースに構築したカスタム UI を使用して、Classic Login ページをカスタマイズする方法を説明します。

現在、Auth0 の開発は Universal Login に注力しており、Classic Login は今後更新されません。ログインページをカスタマイズする場合、Auth0 では Advanced Customizations for Universal Login の利用を推奨しています。

Classic Login は Auth0 がホストするログインエクスペリエンスで、高度なカスタマイズ には JavaScript を使用します。Classic Login の実装は、認証プロセスをアプリケーションに直接埋め込むよりも複雑さが低く、クロスオリジン認証に伴うリスクの軽減にも役立ちます。

デフォルトでは、Classic Login ページではユーザー認証に Lock ウィジェットを使用します。ただし、パスワードレス モードの Lock テンプレートや、Auth0.js SDK で構築したカスタム UI を使用することもできます。

Classic Login ページテンプレートをカスタマイズするには、まず高度なカスタマイズを有効にする必要があります。手順は次のとおりです。

1. Auth0 Dashboard で、Branding > Universal Login > Login tab に移動します。
2. Customize Login Page トグルを有効にします。
3. HTML コードエディターの上にある Default Templates メニューを選択し、使用するオプションを選びます。

利用可能なテンプレートには、次のものがあります。

• Lock
• Lock (passwordless)
• Custom Login Form

どちらの Lock テンプレートでも、認証に使用する Lock ウィジェットをカスタマイズできます。Lock ウィジェットは、標準的な動作セットとカスタマイズ可能なユーザーインターフェースを提供します。別の方法として、Custom Login Form テンプレートを使用し、Auth0 SDK for Web または Authentication API でログインページをカスタマイズすることもできます。

Auth0 SDK はクライアントサイド ライブラリであり、ユーザーインターフェースは提供しませんが、ログインページの動作や外観をより柔軟にカスタマイズできます。Authentication API では、Auth0 SDK を使用せずに直接統合できます。

ログインページのカスタマイズに使用するテンプレートは、アプリケーション固有の要件によって異なります。以下の各セクションでは、Lock、Auth0 SDK、Authentication API の各オプションの概要を説明します。

​

Lock ウィジェットの使用

Lock はログインフォームで、ユーザーが選択した接続を使って簡単に認証できるようにします。Lock は、ユーザーの作成と認証に関わる処理の大部分を自動的に行います。

Lock を使用すると、次のような UI を実装できます。

• 堅牢で、あらゆる解像度のデバイスで優れたユーザー体験を提供する
• シンプルなデザインで、カスタムカラーを少し調整するだけでほとんどの Web サイトになじむ
• 設定に応じて、利用可能な各接続に適したフォームコントロールのみを表示し、さらに許可されているもの (サインアップやパスワードリセットなど) だけを表示する
• 適切な接続を自動的に選択する。あいまいな場合の既定の動作を指定することもできる
• 特定のユーザーについて、前回使用した接続を記憶する
• 自動的に国際化に対応する
• サインアップ時にパスワードポリシーを即座にチェックする

Lock の動作を大きく変更することはできませんが、いくつかの基本オプションを設定して、Lock の見た目や動作を変えることはできます。

次の場合は Lock の使用を検討してください。

• このウィジェットの構成、見た目、操作感が好みに合っている。

• すぐに使えるレスポンシブ UI を備えた Classic Login のシンプルな実装を求めている。

• Lock が標準で処理できるユースケースの多くが、実装するフローに含まれている。

  • Enterprise ログイン
  • パスワードポリシーを備えたデータベース
  • ユーザーのサインアップとパスワードリセット
  • ソーシャルプロバイダーを使用した認証
  • アバター

​

ログインをカスタマイズするスクリプトの例

​

アプリケーションのロゴをカスタマイズする

以下のスクリプト例では、アプリケーションごとにロゴをカスタマイズできます。デフォルトのロゴを設定することも可能です。推奨される最小解像度は、幅 200 ピクセル × 高さ 200 ピクセルです。logouturl の設定を <scripts> ブロックに追加します。

var logourl = "https://example.com/defaultlogo1.png"; //デフォルトロゴを設定
if(config.clientID === "HUXwC72R3qr9JJo9ImPsdzJbtY8aD5kS")
{
    logourl = "https://example.com/defaultlogo2.png";
}
theme: {
    logo: logourl,
    primaryColor: colors.primary ? colors.primary : 'green'
},

​

サインアップ時の文言をカスタマイズする

以下の例では、アプリケーションのサインアップ時に表示する文言をカスタマイズします。ユーザーがサインアップする際に表示するカスタム文言を追加できます。

var languageDictionary;

languageDictionary = {
    signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
};

​

Web 向け Auth0 SDK の使用

アプリの要件を Lock の標準的な動作では満たせない場合や、複雑なカスタム認証プロセスが必要な場合は、カスタムユーザーインターフェースが必要です。既存のユーザーインターフェースを使用したい場合にも、この方法が適していることがあります。

Auth0’s library for Web を使用すると、サインアップや認証を開始するためのプロセスの動作やフローをカスタマイズできます。また、必要に応じて、ラッパーを使わずに Authentication API を直接利用することもできます。

Lock とは異なり、これらの方法にはどちらもユーザーインターフェースは含まれていません。サインアップや認証フローのユーザー体験に加え、レイアウト、ルックアンドフィール、ブランディング、国際化、RTL サポートなど、UI に関する要素を完全に制御できます。

次のいずれかに当てはまる場合は、Auth0 のライブラリまたは Authentication API と組み合わせて、アプリ用のカスタムユーザーインターフェースの実装を検討してください。

• ユーザーインターフェースの見た目に厳しい要件がある
• ファイルサイズに厳しい要件がある - Auth0 のライブラリは Lock より大幅に小さく、API を直接扱う場合は追加の負荷も発生しません。
• HTML、CSS、JavaScript に慣れている - 独自の UI を作成することになります
• username/password とソーシャルプロバイダー認証だけを扱えればよい
• 複数のデータベース接続または Active Directory 接続がある

また、さまざまなプログラミング言語やプラットフォームでの Lock と Auth0 SDK の具体的な使用例は、Quickstarts でも確認できます。これらのガイドは、アプリの要件に応じてどれを使用するか判断する際にも役立ちます。

​

詳しくはこちら

• Classic Login エクスペリエンス
• カスタムログインページに Bot Detection を追加する
• 非推奨エラー