Lock UI のカスタマイズ

Lock widget の見た目のカスタマイズは、ブランディングや統一感のある UI を実現するうえで重要です。このページでは、プロジェクトに Lock を組み込む際に利用できるカスタマイズ方法を紹介します。

Lock widget の見た目は、いくつかの方法でカスタマイズできます。最も安全で確実な方法は、用意されている JavaScript オプションを使用することです。

JavaScript オプション

Lock のインスタンス化時に options パラメーターを使うことで、Lock にさまざまなカスタマイズを設定できます。その一部では、UI もカスタマイズできます。UI のカスタマイズオプションは現在も開発中で、今後さらに追加される予定です。

まず、カスタマイズしたいオプションを含む options オブジェクトを定義します。次に、Lock をインスタンス化するときに、その options オブジェクトを 3 番目のパラメーターとして渡す必要があります。これについては以下で詳しく説明します。

テーマの設定オプション

現在利用可能なテーマの設定オプションがいくつかあり、いずれも theme プロパティ配下にあります。

logo

logo の値には、Lock のヘッダーに表示される画像の URL を指定します。デフォルトでは Auth0 のロゴが使用されます。推奨される最小解像度は、幅 200 ピクセル × 高さ 200 ピクセルです。

var options = {
  theme: {
    logo: 'https://example.com/logo.png'
  }
};

primaryColor

primaryColor プロパティは、Lock のメインカラーを定義します。ウィジェットで使用されるすべての色は、この色をもとに計算されます。このオプションは、独自の logo を指定する際に、すべての色が logo のカラーパレットと自然に調和するようにするのに役立ちます。デフォルトは #ea5323 です。

var options = {
  theme: {
    logo: 'https://example.com/logo.png',
    primaryColor: '#31324F'
  }
};

authButtons {Object}

Lock のボタンをカスタマイズできます。ボタンをカスタマイズしたい各カスタム接続は、名前ごとに指定し、それぞれに独自のパラメーターセットを設定します。カスタマイズ可能なパラメーターは以下のとおりです。

• displayName {String}: ボタンのタイトルを生成する際に、接続名の代わりに表示する名前です (たとえば、ログイン時の LOGIN WITH MYCONNECTION など) 。
• primaryColor {String}: ボタンの背景色です。既定値は #eb5424 です。
• foregroundColor {String}: ボタンのテキストの色です。既定値は #FFFFFF です。
• icon {String}: この接続のアイコンの URL です。例: http://site.com/logo.png。

var options = {
  theme: {
    authButtons: {
      "testConnection": {
        displayName: "Test Conn",
        primaryColor: "#b7b7b7",
        foregroundColor: "#000000",
        icon: "http://example.com/icon.png"
      },
      "testConnection2": {
        primaryColor: "#000000",
        foregroundColor: "#ffffff",
      }
    }
  }
};

テキストのカスタマイズ

languageDictionary オプションを使用すると、Lock に表示されるすべてのテキストをカスタマイズできます。デフォルトは です。例については以下を参照してください。

var options = {
  languageDictionary: {
    emailInputPlaceholder: "[e-mail]",
    title: "Log me in"
  },
};

languageDictionary でカスタマイズできる項目の一覧については、リポジトリ内の English Language Dictionary Specification を参照してください。

Lock のインスタンス化

最後に、定義したカスタムオプションを含む options オブジェクトを使って、Lock をインスタンス化します。

var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);

CSS の上書き

CSS を上書きして Lock をカスタマイズすることは、推奨されません。というのも、Lock の新しいリリースでは一部のスタイルが変更されることがあり、CSS を上書きしていると意図しない問題につながる可能性があるためです。さらに、別の箇所で使われているスタイルを見落としてしまうこともあり、あるビューでは問題なく見えても、別のビューではそうならない場合があります。

それでも CSS を上書きして Lock のスタイルをさらに調整したい場合は、メジャーバージョンやマイナーバージョンではなく、Lock の特定のパッチバージョンを使用することをお勧めします。そうすることで、スタイルを変更したあとに別のパッチがデプロイされ、その変更によって UI に予期しない挙動が生じたとしても、想定外の影響をできるだけ抑えられます。これは、Lock を組み込むとき、またはダウンロードするときに、そのパッチバージョン (x.y.z) を明示的に指定することで実現できます。

また、もちろん、CSS の変更については徹底的にテストし、顧客に意図したとおりの体験を提供できることを確認することをお勧めします。

詳細情報

アプリケーション向けに Lock をカスタマイズする際、さらに詳しい情報が必要な場合は、configuration options ページまたは Lock API ページをご覧ください。

追加してほしいテーマ設定オプションがあれば、ぜひお知らせください。現在、JavaScript で利用できるカスタマイズオプションの拡充を進めており、新しいオプションが追加されるたびにこの一覧も更新されます。