Authenticate
Manage Users
Customize
PlatformJavaScript オプション
Lock のインスタンス化時にoptions パラメーターを使うことで、Lock にさまざまなカスタマイズを設定できます。その一部では、UI もカスタマイズできます。UI のカスタマイズオプションは現在も開発中で、今後さらに追加される予定です。
まず、カスタマイズしたいオプションを含む options オブジェクトを定義します。次に、Lock をインスタンス化するときに、その options オブジェクトを 3 番目のパラメーターとして渡す必要があります。これについては以下で詳しく説明します。
テーマの設定オプション
現在利用可能なテーマの設定オプションがいくつかあり、いずれもtheme プロパティ配下にあります。
logo
logo の値には、Lock のヘッダーに表示される画像の URL を指定します。デフォルトでは Auth0 のロゴが使用されます。推奨される最小解像度は、幅 200 ピクセル × 高さ 200 ピクセルです。
primaryColor
primaryColor プロパティは、Lock のメインカラーを定義します。ウィジェットで使用されるすべての色は、この色をもとに計算されます。このオプションは、独自の logo を指定する際に、すべての色が logo のカラーパレットと自然に調和するようにするのに役立ちます。デフォルトは #ea5323 です。
authButtons {Object}
Lock のボタンをカスタマイズできます。ボタンをカスタマイズしたい各カスタム接続は、名前ごとに指定し、それぞれに独自のパラメーターセットを設定します。カスタマイズ可能なパラメーターは以下のとおりです。
- displayName {String}: ボタンのタイトルを生成する際に、接続名の代わりに表示する名前です (たとえば、ログイン時の
LOGIN WITH MYCONNECTIONなど) 。 - primaryColor {String}: ボタンの背景色です。既定値は
#eb5424です。 - foregroundColor {String}: ボタンのテキストの色です。既定値は
#FFFFFFです。 - icon {String}: この接続のアイコンの URL です。例:
http://site.com/logo.png。
テキストのカスタマイズ
languageDictionary オプションを使用すると、Lock に表示されるすべてのテキストをカスタマイズできます。デフォルトは です。例については以下を参照してください。
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 の変更については徹底的にテストし、顧客に意図したとおりの体験を提供できることを確認することをお勧めします。