Lockの構成オプション

Lockは、コンストラクターに送信されるoptionsパラメーターで設定できます。これらのオプションでは、Lockウィジェットの動作方法、Lockウィジェットが接続を処理する方法、プロジェクトに必要な追加のサインアップフィールド、ウィジェットの言語とテキストの値、色、画像など、さまざまな変更を行えます。探しているものが明確な場合は、下記のインデックスをご覧ください。詳細については、それぞれのオプションをご覧ください。

テーマオプションはoptionsオブジェクトのthemeプロパティにグループ化されています。

認証オプションはoptionsオブジェクトのauthプロパティにグループ化されています。

メールまたはユーザー名フィールドでオートコンプリート（<input autocomplete />）を許可するかどうかを決定します。デフォルトはfalseです。

allowAutocomplete: true

パスワードフィールドでオートコンプリート（<input autocomplete />）を許可するかどうかを決定します。デフォルトはfalseです。

パスワードマネージャーをサポートするため、またその他の好ましくない動作を回避するには、allowPasswordAutocompleteをtrueに設定します。

allowPasswordAutocomplete: true

このオプションでは、UIにチェックボックスを追加するかどうかを決定します。チェックボックスを選択すると、ユーザーはパスワードを入力する際にパスワードを表示できるようになります。このオプションのデフォルトはfalseです。

allowShowPassword: true

LockのallowShowPasswordをtrueに設定すると、次のようにパスワードが表示されるようになります。

signin|signup|resetのアクションで使用される接続の配列です。デフォルトは、すべての有効な接続です。

allowedConnections:['Username-Password-Authentication']

allowedConnections:['twitter', 'facebook', 'linkedin']

allowedConnections:['qraftlabs.com']

allowedConnectionsの例：

サインインが成功した後、Lockが自動的に閉じられるかどうかを決定します。デフォルトはfalseです。Lockがclosableではない場合、このオプションがtrueに設定されていてもLockは閉じられません。

autoclose: true

trueの場合、ウィジェットの最初のフィールドにフォーカスが設定されます。モバイルデバイスでレンダリングされる場合、またはcontainerオプションが指定されている場合のデフォルトはfalseです。それ以外の場合はすべて、デフォルトはtrueです。

autofocus: false

デフォルトでは、ユーザーのプロフィール画像と表示名の取得にはGravatarが使用されますが、avatarオプションを使用すると、どこからでも取得できるようになります。

var options = {
  avatar: {
    url: function(email, cb) {
      // Obtain the avatar url for the email input by the user, Lock
      // will preload the image before displaying it.
      // Note that in case of an error you call cb with the error in
      // the first arg instead of `null`.
      var url = obtainAvatarUrl(email);
      cb(null, url);
    },
    displayName: function(email, cb) {
      // Obtain the display name for the email input by the user.
      // Note that in case of an error you call cb with the error in
      // the first arg instead of `null`.
      var displayName = obtainDisplayName(email);
      cb(null, displayName);
    }
  }
};

avatarを一切表示したくない場合は、単にnullを渡します。

avatar: null

Gravatarのデフォルトの動作：

Lockを閉じられるかどうかを決定します。containerオプションが指定されている場合、その値は常にfalseです。それ以外の場合、デフォルトはtrueです。

closable: false

ウィジェットが表示されるhtml要素のidです。

これにより、ウィジェットはモーダルポップアウトウィンドウではなく、div内にインラインで表示されます。

<div id="hiw-login-container"></div>

<script>
  var options = {
    container: 'hiw-login-container'
  };

  // initialize
  var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com', options);

  // render
  lock.show();
</script>

Lockが表示されているときに、errorまたはsuccessのフラッシュメッセージを表示します。このオブジェクトは次のプロパティを含みます：

• type {String}：メッセージタイプ。サポートされているタイプはerror、info、successです。

• text {String}：表示するテキスト。

var options = {
  flashMessage: {
    type: 'success',
    text: 'Welcome!'
  }
};

ウィジェットの言語を指定します。デフォルトは「en」です。現在提供されている言語の一覧については、国際化ディレクトリを参照してください。

language:'es'

Lockで表示されるあらゆるテキストをカスタマイズできます。デフォルトは{}です。このオブジェクトで変更できるlanguageDictionary値の一覧については、英語の言語辞書仕様ページを参照してください。

var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Log me in"
  },
};

また、languageDictionaryオプションの詳しい使用方法については、エラーメッセージのカスタマイズページまたは国際化ページを確認してください。

画面上のポップアップの位置をカスタマイズできます。window.openで許可されている位置とサイズの機能はすべて受け入れられます。デフォルトは{}です。

window.open機能のオプション。これは、redirectがfalseに設定されている場合にのみ適用されます。

var options = {
  auth: {
      redirect: false
  },
  popupOptions: { width: 300, height: 400, left: 200, top: 300 }
};

前回使用したアカウントで素早くログインできる画面を表示するかどうかを決定します。シングルサインオン（SSO）データを要求し、［Last time you signed in with（前回サインインに使用したとき）］のメッセージを有効にします。デフォルトはtrueです。この情報はユーザーのAuth0セッションから取得されるため、この機能はユーザーのAuth0セッション（設定可能）が有効である限り有効です。

rememberLastLogin: false

新規テナントでは自動的にシームレスSSOが有効になります。これを有効にすると、rememberLastLoginオプションは関係なくなります。有効なセッションがある場合は、ユニバーサルログインページは一切表示されないためです。シームレスSSOを使用すると、ユーザーは一度ログインするだけで、構築されたアプリケーションやサードパーティ製アプリを移動する際に認証情報を再入力する必要がなくなります。認証がシームレスに進むので、シームレスSSOの使用を強く推奨します。ユーザーがログインしていない場合は、想定通りログイン画面にリダイレクトされます。さらに、以下の状況では、［Last time you signed in with（前回サインインに使用したとき）］のメッセージは利用できなくなります。

• パスワードレス認証を使用して確立されたセッションで、ホストされたログインページでLockを使用した

• responseType: codeの埋め込み型ログインシナリオでLockを使用した（通常のWebアプリで使用される認証コードフローを示します）

globalMessageをユーザーのビューポートにスクロールインさせるかどうかを決定します。デフォルトはtrueです。

scrollGlobalMessagesIntoView: false

テーマオプションはoptionsオブジェクトのthemeプロパティにグループ化されています。

var options = {
  theme: {
    labeledSubmitButton: false,
    logo: "https://example.com/assets/logo.png",
    primaryColor: "green",
    authButtons: {
      connectionName: {
        displayName: "...",
        primaryColor: "...",
        foregroundColor: "...",
        icon: "https://.../logo.png"
      }
    }
  }
};

カスタムOAuth2接続を使用して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",
      }
    }
  }
};

このオプションは、送信ボタンにラベルを付けるかどうかを示し、デフォルトではtrueです。falseに設定すると、代わりにアイコンが表示されます。

var options = {
  theme: {
    labeledSubmitButton: false
  }
};

ラベルがデフォルトのtrueに設定されている場合、ラベルのテキストは、languageDictionaryオプションでカスタマイズできます。

logoの値は、画像のURLであり、Lockのヘッダーに配置され、Auth0のロゴのデフォルトになります。ユーザーエクスペリエンスを向上させるために推奨される最大高さは58pxです。

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

primaryColorプロパティは、Lockのプライマリカラーを定義します。ウィジェットで使用されるカラーはすべて、そこから計算されます。このオプションは、すべてのカラーがlogoのカラーパレットと合うように、カスタムlogoを提供する際に、役立ちます。デフォルトは、#ea5323です。

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

認証オプションはoptionsオブジェクトのauthプロパティにグループ化されています。

Lockによってデフォルトで使用されるスコープはopenid profile emailです。

var options = {
  auth: {
   params: {
    param1: "value1",
    scope: "openid profile email"
   },
   autoParseHash: true,
   redirect: true,
   redirectUrl: "some url",
   responseMode: "form_post",
   responseType: "token",
   sso: true,
   connectionScopes: {
    connectionName: [ 'scope1', 'scope2' ]
   }
  }
};

audienceオプションは、認証後に受け取ったアクセストークンを消費するAPIを示します。

var options = {
  auth: {
    audience: 'https://{yourDomain}/userinfo',
  }
}

autoParseHashがtrueに設定されている場合、Lockはインスタンス化された際にwindow.location.hash文字列を解析します。falseに設定されている場合は、resumeAuthメソッドを使用して認証を手動で再開する必要があります。

var options = {
  auth: {
    autoParseHash: false
  }
};

このオプションでは、認証用にoauth2/ソーシャル接続に送信するスコープを設定できます。

var options = {
  auth: {
    connectionScopes: {
      'facebook': ['scope1', 'scope2']
    }
  }
};

ソーシャル接続の具体的なスコープの一覧は、該当するプロバイダーから取得できます。たとえば、開発者向けFacebookのリファレンスには、接続用に要求できる個別の許可の一覧があります。

optionsオブジェクトにパラメーターを追加することで、ログインを開始する際にパラメーターを送信できます。以下の例では、fooに等しい値を持つstateパラメーターを追加し、さらにscopeパラメーター（スコープ、さらに要求された属性を含む）を追加します。

var options = {
  auth: {
    params: {
      state: 'foo',
      scope: 'openid email user_metadata app_metadata picture'
    }
  }
};

サポートされているパラメーターの詳細については、Lock認証パラメーターを参照してください。

デフォルトはtrueです。trueに設定すると、リダイレクトモードが使用されます。falseに設定すると、ポップアップモードが選択されます。

var options = {
  auth: {
    redirect: false
  }
};

URL Auth0が認証後にリダイレクトされます。デフォルトは空の文字列「」（リダイレクトURLなし）です。

var options = {
  auth: {
    redirectUrl: 'http://testurl.com'
  }
};

redirectUrlが指定されている場合（空の値以外が設定されている場合）のresponseTypeオプションは、手動で設定されていない場合はデフォルトでcodeになります。

コードまたはトークンを、クエリ部やフラグメント部分に含めるのではなく、HTTP POST要求でredirectUrlに送信する場合は、"form_post"に設定する必要があります。

それ以外の場合、このオプションは省略しなければならず、デフォルトでは省略されています。

var options = {
  auth: {
    responseMode: 'form_post'
  }
};

responseTypeの値は、シングルページアプリケーションの場合は「token」に、それ以外の場合には「code」に設定する必要があります。redirectUrlが指定されている場合のデフォルトは「code」、指定されていない場合のデフォルトは「token」です。

var options = {
  auth: {
    responseType: 'token'
  }
};

responseTypeがcodeに設定されている場合、Lockは絶対に［Last time you logged in with（前回ログインしたとき）］のメッセージを表示せず、常にユーザーに認証情報の入力を求めます。

デフォルトはtrueです。trueに設定すると、Lockでシングルサインオンが有効になります。

var options = {
  auth: {
    sso: false
  }
};

additionalSignUpFieldsオプションを使用すると、サインアップ画面に追加の入力フィールドを追加できます。そうすることで追加された各オプションは、そのユーザーのuser_metadataに追加されます。詳細については、「ユーザープロファイルでのメタデータの使い方」をお読みください。すべての入力にnameとplaceholderが必要です。また、icon URLを指定することもできます。さらに、初期値はprefillオプションで指定でき、値を含む文字列またはそれを取得する関数を使用できます。その他のオプションはフィールドのタイプによって異なります。フィールドのタイプはタイプオプションで定義され、デフォルトは「text」です。

新しいフィールドは、通常のサインアップ入力フィールドの下に、指定された順番で表示されます。

textフィールドは追加のサインアップフィールドのデフォルトのタイプです。validator関数も指定できることに注意してください。

var options = {
  additionalSignUpFields: [{
    name: "address",
    placeholder: "enter your address",
    // The following properties are optional
    icon: "https://example.com/assests/address_icon.png",
    prefill: "street 123",
    validator: function(address) {
      return {
         valid: address.length >= 10,
         hint: "Must have 10 or more chars" // optional
      };
    }
  },
  {
    name: "full_name",
    placeholder: "Enter your full name"
  }]
}

validatorを指定しない場合、textフィールドは必須になります。textフィールドをオプションにする場合は、常にtrueを返すバリデーターを使用してください。

var options = {
  additionalSignUpFields: [{
    name: "favorite_color",
    placeholder: "Enter your favorite color (optional)",
    validator: function() { 
      return true;
    }
  }]
}

プロフィールのルートに属性の値を保存する場合は、storage:'root'を使用します。この方法で保存できるのは、値の一部のみです。ルートプロファイルに追加できる属性の一覧はこちらで確認できます。デフォルトでは、追加のサインアップフィールドはすべてuser_metadataオブジェクト内に保存されます。

var options = {
  additionalSignUpFields: [{
    name: "name",
    storage: "root"
  }]
};

サインアップフィールドのtype:"select"を使用すると、ユーザーが値を選択するためのselect要素を使用できます。

var options = {
  additionalSignUpFields: [{
    type: "select",
    name: "location",
    placeholder: "choose your location",
    options: [
      {value: "us", label: "United States"},
      {value: "fr", label: "France"},
      {value: "ar", label: "Argentina"}
    ],
    // The following properties are optional
    icon: "https://example.com/assests/location_icon.png",
    prefill: "us"
  }]
}

selectフィールドのoptions配列の項目は、 {label:“non empty string”, value:“non empty string”}のフォーマットに従う必要があり、少なくとも1つのオプションを定義する必要があります。

optionsとprefillの値は、次のように関数で指定できます。

var options = {
  additionalSignUpFields: [{
    type: "select",
    name: "location",
    placeholder: "choose your location",
    options: function(cb) {
      // obtain options, in case of error you call cb with the error in the
      // first arg instead of null
      cb(null, options);
    },
    icon: "https://example.com/assests/location_icon.png",
    prefill: function(cb) {
      // obtain prefill, in case of error you call cb with the error in the
      // first arg instead of null
      cb(null, prefill);
    }
  }]
}

カスタムサインアップフィールドの3つ目のタイプはtype:"checkbox"です。prefill値でチェックボックスのデフォルトの状態（trueまたはfalse）を決定できます。この値は必須です。

var options = {
  additionalSignUpFields: [{
    type: "checkbox",
    name: "newsletter",
    prefill: "true",
    placeholder: "I hereby agree that I want to receive marketing emails from your company"
  }]
}

サインアップフィールドのtype:"hidden"を使用すると、固定値を持つ隠し入力を使用できます。

var options = {
  additionalSignUpFields: [{
    type: "hidden",
    name: "signup_code",
    value: "abc123"
  }]
}

一部のユースケースでは、言語設定のオプションなど、メールテンプレート用のadditionalSignUpFieldsデータを使用できる場合があります。その値を使用して、テンプレート化されたメール通信の言語を設定できます。

falseに設定すると、ウィジェットのログイン画面が表示されなくなります。これは、ウィジェットをサインアップ専用にしたい場合（サインアップ画面のログインタブとサインアップタブは非表示になります）や、パスワードのリセット専用にしたい場合（パスワード再設定画面の戻るボタンは非表示になります）に便利です。そのような場合、initialScreen、allowForgotPassword、allowSignUpのオプションも指定しなければならないことがあります。デフォルトはtrueです。

allowLogin: false

allowForgotPasswordをfalseに設定すると、ログイン画面の「パスワードを覚えていない場合」のリンクが非表示になり、「パスワードを忘れた場合」画面にアクセスできなくなります。デフォルトはtrueです。パスワード変更スクリプトを持たないカスタムデータベースとのデータベース接続を使用している場合、「パスワードを忘れた場合」画面は使用できなくなります。

allowForgotPassword: false

falseに設定すると、ログイン画面のログインタブとサインアップのタブが非表示になり、サインアップ画面にアクセスできなくなります。デフォルトはtrueです。データベース接続でサインアップが無効になっている場合、または作成スクリプトのないカスタムデータベースを使用している場合は、サインアップ画面は使用できなくなることに注意してください。

また、このオプションはクライアント側の外観のみを制御するものであり、特定の匿名訪問者からの新規サインアップを完全に阻止するものではないことに注意してください。新規ユーザーのサインアップを完全に防止したい場合は、ダッシュボードの接続設定でサインアップを無効にするオプションを使用する必要があります。

allowSignUp: false

複数のデータベース接続が利用可能な場合に、使用するデータベース接続を指定します。

defaultDatabaseConnection:'test-database'

ウィジェットを開いたときに表示される画面の名前です。有効な値はlogin、signUp、forgotPasswordです。このオプションが指定されていない場合、ウィジェットのデフォルト画面は、リストに用意されている最初の画面になります。

initialScreen:'forgotPassword'

ユーザーがサインアップに成功した後、自動的にサインインされるかどうかを決定します。デフォルトはtrueです。

loginAfterSignUp: false

ユーザーがパスワードをリセットできるページのURLを設定します。空でない文字列に設定すると、ログイン画面で「パスワードを覚えていない場合」のリンクをクリックしたユーザーは、指定したURLにリダイレクトされます。

forgotPasswordLink:'https://yoursite.com/reset-password'

trueに設定すると、languageDictionary.signUpTerms文字列が表示されます。デフォルトはtrueです。

showTerms: false

trueに設定すると、サインアップ前に確認する必要がある利用規約の横にチェックボックス入力が表示されます。利用規約はlanguageDictionaryオプションから指定できます。このオプションは、データベース接続でサインアップするユーザーにのみ有効です。デフォルトはfalseです。

mustAcceptTerms: true

メールおよび/またはユーザー名の入力に対する初期値を設定できます。省略すると初期値は指定されません。

var options = {
  prefill: {
    email: "someone@auth0.com",
    username: "someone",
    phoneNumber: "+1234567890"
  }
};

サインアップボタンをクリックした際に要求されるURLを設定します。空でない文字列に設定すると、このオプションはallowSignUpを強制的にtrueにします。

signUpLink:'https://yoursite.com/signup'

requires_usernameフラグが設定されているデータベース接続で、ユーザーを識別するために使用される情報を決定します（フラグが設定されていない場合、usernameStyleオプションは無視されます）。可能な値は"username"と"email"です。デフォルトでは、usernameとemailの両方が許可されています。このオプションを設定すると、ログインはどちらか一方のみに制限されます。

usernameStyle:'username'

複数のエンタープライズ接続がある場合や、データベース接続がある場合に、ユーザー名とパスワードを使用してログインできるエンタープライズ接続を指定します。defaultDatabaseConnectionが指定されている場合はデータベース接続が使用され、このオプションは無視されます。

defaultEnterpriseConnection:'test-database'

メールのプレフィックスからADプレースホルダーのユーザー名を解決します。デフォルトはtrueです。

defaultADUsernameFromEmailPrefix: false

Auth0LockPasswordlessをメール接続で使用する場合、このオプションを使用して、ユーザー認証用のコードまたはマジックリンクの送信を選択できます。メール接続で利用可能な値はcodeとlinkです。デフォルトはcodeです。SMSパスワードレス接続では、常にcodeが使用されます。

passwordlessMethod: code

アプリケーション設定のベースURLを上書きします。デフォルトでは、指定されたドメインを使用します。このオプションは、お客様の特定のユースケースにおいて、アプリケーションがデフォルトの動作を使用しないよう指定する場合にのみ必要となります。

configurationBaseUrl:"https://www.example.com"

Auth0が提供する翻訳の言語ソースURLを上書きします。デフォルトでは、このオプションはAuth0のCDN URL https://cdn.auth0.comを使用します。これは、提供されているすべての翻訳がここに保存されているためです。別の値を指定することで、必要に応じて言語翻訳に別のソースを使用できます。

languageBaseUrl:"https://www.example.com"

hashCleanupオプションを有効にすると、ユーザー認証後にコールバックURLのハッシュ部分が削除されます。デフォルトはtrueです。

hashCleanup: false

使用時に、ユーザー名情報に基づいて使用する接続を選択できるようにする拡張ポイントを指定します。

パラメーターにはusername、context、callbackがあります。コールバックは、{type:'database', name:'connection name'}のようなオブジェクトを期待します。これはデータベース接続にのみ有効です。このリゾルバーはフォームのonSubmitイベントで実行されるため、シンプルかつ高速に保つように注意してください。

これはベータ機能です。バグを見つけた場合は、GitHubのissueを作成してください。

leewayオプションは整数（秒単位の値）に設定でき、これを使用してIDトークンの有効期限のクロックスキューを考慮できます。通常、この値は1～2分を超えることはありません。

leeway:30