Lock または SDK を使用したクラシックログインページのカスタマイズ

Lock または Auth0 SDK をベースに構築したカスタム UI を使って、クラシックログインページをカスタマイズする方法を説明します。

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

クラシックログインは、高度なカスタマイズ のために JavaScript を利用する、Auth0 ホスト型のログイン体験です。クラシックログインの実装は、認証プロセスをアプリに直接埋め込む場合よりも複雑さが低く、cross-origin authentication に伴うリスクの軽減にも役立ちます。

デフォルトでは、クラシックログインページはユーザー認証に Lock ウィジェットを使用します。ただし、パスワードレス モードの Lock テンプレートや、auth0.js SDK を使って構築したカスタム UI をカスタマイズすることもできます。

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

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

利用できるテンプレートは次のとおりです。

• Lock
• Lock (パスワードレス)
• Custom Login Form

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

Auth0 SDK はクライアントサイドのライブラリで、UI は提供しませんが、ログインページの動作や見た目をより柔軟にカスタマイズできます。Authentication API では、Auth0 SDK を使わずに直接連携できます。

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

​

Lock ウィジェットを使う

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

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

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

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

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

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

• すぐに使えるレスポンシブ UI を備えた、簡潔なクラシックログイン実装を使いたい。

• 自分のプロセスに、Lock が標準で処理できるユースケースが多く含まれている。

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

​

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

​

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

以下のサンプルスクリプトでは、アプリケーションごとにロゴをカスタマイズしたり、デフォルトのロゴを設定したりできます。推奨される最小解像度は、幅 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>."
};

​

Auth0 SDK for Web を使用する

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

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

Lock とは異なり、これらのどちらの方法にもユーザーインターフェースは含まれていません。そのため、サインアップ や認証フローのユーザー体験に加え、レイアウト、ルック＆フィール、ブランディング、多言語対応、RTL サポートなどの UI 面を完全に制御できます。

次のような場合は、アプリ向けに Auth0 のライブラリまたは Authentication API と組み合わせて、カスタムのユーザーインターフェースを実装することを検討してください。

• ユーザーインターフェースの外観に厳しい要件がある
• ファイルサイズに厳しい要件がある - Auth0 のライブラリは Lock よりも大幅に軽量で、API を直接扱う場合は追加の負荷がまったく発生しません。
• HTML、CSS、JavaScript に慣れている - 独自の UI を作成することになるためです
• ユーザー名/パスワードと social provider 認証だけに対応できればよい
• 複数の Database または Active Directory Connections がある

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

​

詳細はこちら

• クラシックログインエクスペリエンス
• カスタムログインページにボット検出を追加