Lock UIのカスタマイズ

Lockウィジェットの外見をカスタマイズすることは、ブランディングおよびまとまりのあるUIを確立するために重要です。このリソースは、プロジェクトにLockを実装しながら、これを行う方法に焦点を合わせます。

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

JavaScriptOptions

Lockをインスタンス化するときに、optionsパラメーターを介してLockにさまざまなカスタマイズを設定できます。その中には、UIをカスタマイズできるものがあります。UIのカスタマイズオプションは、まだ発展中であり、今後さらに追加されます。

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

テーマオプション

themeプロパティの下の名前空間で、現在利用できるテーマオプションがいくつかあります。

logo

logoの値は、画像のURLであり、Lockのヘッダーに配置され、Auth0のロゴのデフォルトになります。推奨される最小解像度は200ピクセル（幅） x 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

Lockのボタンをカスタマイズできます。カスタマイズを希望するカスタムの接続ボタンはそれぞれ、独自のパラメーターセットと一緒に名前で表記する必要があります。カスタマイズ可能なパラメーターは以下です。

• displayName ：ボタンタイトルを作成する際に、接続名の代わりに表示する名前、たとえばログインのための「LOGIN WITH MYCONNECTION」など。
• primaryColor ：ボタンの背景色。デフォルトは、#eb5424です。
• foregroundColor :ボタンの文字の色。デフォルトは、#FFFFFFです。
• icon :この接続のためのアイコンの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を使用してカスタマイズできる項目の全リストは、リポジトリの英語辞書の仕様をご覧ください。

Lockをインスタンス化する

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

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

CSSの上書き

CSSを上書きしてLockをカスタマイズすることは、お勧めしません。Lockの新しいリリースで、何かスタイリングが変更する可能性があり、CSSを上書きしている場合に意図しない問題を引き起こすことがあります。さらに、別の場所のスタイルの使用を見落とす可能性があり、一方では変更が問題なく見えたとしても、他方では問題がある場合があります。

それでもLockのスタイルをさらに設定するためにCSSを上書きしたい場合は、メジャーまたはマイナーバージョンではなく、Lockの特定のパッチバージョンを使用することをお勧めします。そうすることで、スタイルを変更し、その変更によりUIに予期しない動作を引き起こす可能性がある別のパッチがデプロイされた場合に発生する可能性のある予期しない結果の量を制限できます。これは、Lockを含めるとき、またはダウンロードするときに、パッチバージョン（x.y.z）を指定することで行えます。

さらに、CSSの変更を徹底的にテストすることをもちろんお勧めします。顧客のために意図したエクスペリエンスになっていることを確認してください。

その他の詳細情報

アプリケーション用のLockをカスタマイズする際に、より詳細な情報が必要な場合は、構成オプションページまたはLock APIページをご覧ください。

追加を希望する特定のテーマオプションがある場合は、ぜひお知らせください。私たちは、JavaScriptを通して利用できるカスタマイズオプションを向上するために取り組んでいます。新しいオプションが追加されるたびに、このリストは更新されます。