クラシックログインページをLockまたはSDKでカスタマイズする

Auth0 SDKに加え、クラシックログインをLockまたはSDKでカスタマイズする方法を紹介します。

クラシックログインはAuth0がホスティングするログインエクスペリエンスで、JavaScriptを使って高度なカスタマイズを実現しています。クラシックログインの実装は認証プロセスをアプリに直接埋め込む場合ほど複雑ではなく、cross-origin認証の危険性を防ぐのに役立ちます。

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

クラシックログインページのテンプレートをカスタマイズするには、まず高度なカスタマイズを有効にする必要があります。次の手順の通りに操作してください：

1. Auth0 Dashboardで［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Login（ログイン）］タブに移動します。
2. [Customize Login Page (ログインページをカスタマイズ)] トグルを有効にします。
3. HTMLコードエディター上で、デフォルトのテンプレートメニューを選択し、希望するオプションを選びます。

利用できるテンプレートには以下が含まれます。

• Lock
• Lock（パスワードレス）
• カスタムログインフォーム

Lockテンプレートではいずれも、認証に用いられるLockウィジェットをカスタマイズできます。Lockウィジェットは、標準的な一連の動作とカスタマイズ可能なユーザーインターフェイスを提供しています。または、カスタムログインフォームテンプレートを使ってAuth0 SDK for WebやAuthentication APIでログインページをカスタマイズすることもできます。

Auth0 SDKは、ユーザーインターフェイスは提供しない ものの、ログインページの動作と外観を幅広くカスタマイズ可能にするクライアント側のライブラリーです。Authentication APIは、Auth0 SDKを用いることなく、直接の統合を提供します。

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

​

Lockウィジェットを使用する

Lockは、ユーザーが接続を選択して認証しやすくするログインフォームです。Lockは、ユーザーの作成と認証に関する詳細のほとんどを自動的に取り扱います。

Lockにより、次の特徴を持つUIを実装できるようになります：

• 堅牢で、あらゆる解像度のデバイス上で得られる優れたユーザーエクスペリエンス
• カスタムカラーに少しの変更を加えるだけでほとんどのウェブサイトに合うシンプルなデザイン
• 構成に適用し、それぞれ利用可能な接続のための適切なフォームコントロールと許可されるもののみ（サインアップやパスワードリセットなど）を表示
• 適切な接続を自動的に選択。あいまいなケースでは、希望するデフォルトの動作を指定することも可能
• 特定のユーザーで最後に用いた接続を記憶
• 自動的に国際化を適応
• サインアップ時に即時的なパスワードポリシーチェックを提供

Lockの動作を大幅に変更することはできないものの、複数の基本オプションを設定してLockの外観と動作を変更できます。

Lockは、次の場合に利用を検討してください：

• ウィジェットの構造、外観、操作性が気に入っている場合。

• 既成のレスポンシブUIを備えたクラシックログインの合理的な実装を好む場合。

• プロセスに、Lockがそのまま取り扱える多くのユースケースが含まれている場合。

  • エンタープライズログイン
  • パスワードポリシーを持つデータベース
  • ユーザーサインアップとパスワードリセット
  • ソーシャルプロバイダーを利用しての認証
  • アバター

​

サンプルログインカスタマイズスクリプト

​

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

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

var logourl = "https://example.com/defaultlogo1.png"; //set default logo
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のWeb用ライブラリーを使用すると、サインアップや認証をトリガーする動作や処理フローをカスタマイズできます。選ぶのであれば、ラッパーを一切用いずにAuthentication APIを直接利用することもできます。

Lockとは異なり、これらのオプションのいずれにもユーザーインターフェイスは含まれません：サインアップと認証フローのユーザーエクスペリエンス、さらにUI観点でのレイアウト、外観と操作感、ブランディング、国際化、RTLサポートなどについて完全に制御できるようになります。

次の場合、Auth0ライブラリーまたはAuthentication APIと併せ、カスタムユーザーインターフェイスの実装を検討してください：

• ユーザーインターフェイスの外観について厳格な要件がある
• ファイルサイズについて厳格な要件がある - Auth0ライブラリーはLockより大幅に小さいため、APIと直接やり取りすることを選んだとしても、負荷は追加されません。
• HTML、CSS、JavaScriptに問題がなければ、独自のUIを作成することになります。
• ユーザー名/パスワードおよびソーシャルプロバイダー認証のみを取り扱うことになります。
• 複数のデータベースまたはActive Directory Connectionsがある場合

クイックスタートには、さまざまなプログラミング言語とプラットフォームでLockやAuth0 SDKを使用する例が提供されています。これらのガイドにより、特定のアプリのニーズに合わせどれを使うかについての判断がさらにしやすくなります。

​

もっと詳しく

• クラシックログインエクスペリエンス
• ボット検知をカスタムログインページに追加する
• 廃止関連のエラー