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

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

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

​

Lock ウィジェットを使う

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

• このウィジェットの構成や見た目、操作感が気に入っている。
• すぐに使えるレスポンシブ UI を備えた、簡潔なクラシックログイン実装を使いたい。
• 自分のプロセスに、Lock が標準で処理できるユースケースが多く含まれている。
  • Enterprise ログイン
  • パスワードポリシーを備えた Database 接続
  • ユーザーの サインアップ とパスワードリセット
  • ソーシャルプロバイダーを使った認証
  • アバター

​

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

​

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

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 を使用する

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

​

詳細はこちら

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