Lock UI のカスタマイズ

Lock ウィジェットの外観のカスタマイズは、ブランディングや統一感のある UI を実現するうえで重要です。このリソースでは、プロジェクトに Lock を実装する際に、そのための方法を紹介します。

Lock ウィジェットの外観は、いくつかの方法でカスタマイズできます。最も適切で安全な方法は、用意されている JavaScript オプションを使用することです。

JavaScript オプション

Lock をインスタンス化する際に、options パラメーターを使ってさまざまなカスタマイズを設定できます。その一部では、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 をカスタマイズする際に、より詳しい情報が必要な場合は、設定オプション ページまたは Lock API ページを参照してください。

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