Skip to main content
Lock には多数のメソッド、機能、設定可能なオプションがあります。このリファレンスでは、必要な項目を見つけやすいように案内し、それぞれの使い方を説明します。探しているメソッドに直接移動するには以下をクリックするか、そのまま参照してください。Lock が発行するイベントについては、on() メソッドのセクションに一覧があります。
  • new Auth0Lock - Lock をインスタンス化する
  • getUserInfo() - ログイン済みユーザーのプロファイルを取得する
  • show() - Lock ウィジェットを表示する
  • on() - イベントを監視する
  • resumeAuth() - autoParseHash が false の場合に認証フローを完了するために使用する
  • checkSession() - 認証済みユーザー向けに Auth0 から新しいトークンを取得する
  • logout() - ユーザーをログアウトする

Auth0Lock

new Auth0Lock(clientID, domain, options) Auth0 管理ダッシュボードにあるアプリケーションの clientID とアカウントの domain を使用して設定された、新しい Auth0Lock インスタンスを初期化します。3 番目の省略可能なパラメーターは options オブジェクトで、アプリケーションの要件に合わせて Lock を設定するために使用します。この情報は application settings で確認できます。
  • clientId {String}: 必須パラメーターです。Auth0 におけるアプリケーションの clientId です。
  • domain {String}: 必須パラメーターです。Auth0 のドメインです。通常は your-account.auth0.com です。
  • options {Object}: 省略可能なパラメーターです。Lock の外観と動作を設定できます。詳しくは the configuration options page を参照してください。

getUserInfo()

getUserInfo(accessToken, callback) ユーザーがログインしてトークンを取得したら、そのトークンを使って getUserInfo からユーザーのプロファイルを取得できます。このメソッドは、非推奨の `getProfile()“ に代わるものです。
  • accessToken {String}: ユーザーのトークン。
  • callback {Function}: ユーザーのプロファイルが取得されたあとに呼び出されます。
lock.getUserInfo(accessToken, function(error, profile) {
  if (!error) {
    alert("hello " + profile.name);
  }
});

show()

show(options) show メソッドはウィジェットを表示します。Lock バージョン 10.2.0 以降では、show メソッドで options オブジェクトをパラメーターとして受け取れるようになりました。このパラメーターは、この表示時に限って Lock の options を上書きするために使用します。options は Lock のインスタンス化時に設定し、ここでは特定のユースケースで必要な場合にのみ上書きしてください。 Lock のインスタンス化時に設定した値 (またはデフォルト値) を上書きできる options のサブセットは、次のとおりです。
  • allowedConnections
  • auth.params
  • allowLogin
  • allowSignUp
  • allowForgotPassword
  • initialScreen
  • rememberLastLogin
show メソッドで上書きできる上記の限られたサブセットではなく、Lock のインスタンス化時に指定できる設定可能な options の一覧全体について詳しくは、ユーザーが設定可能なオプションのページを参照してください。 オプションの上書きの例:
// オプションを上書きせずにLockウィジェットを表示する
lock.show();

// 一部のオプションを上書きしてLockウィジェットを表示する
lock.show({
  allowedConnections: ["twitter", "facebook"],
  allowSignUp: false
});
オプションは、Lock を最初にインスタンス化する際に var lock = new Auth0Lock(clientId, domain, options); で設定する必要があります。show にオプションを渡すのは、この時点でこの場所にウィジェットを表示する際に、以前設定したオプションを上書きする場合に限るべきです。 show メソッドでは、flashMessage という追加オプションも設定できます。

flashMessage

このオブジェクトは、Lock のインスタンス化時に指定する通常の options オブジェクトでは使用できず、show メソッドのオプションとしてのみ使用できます。flashMessage オブジェクトは、Lock の表示時にエラーまたは成功を示すフラッシュメッセージを表示します。指定できるパラメーターは次のとおりです。
  • type {String}: メッセージの種類。error または success のいずれかを指定する必要があります。
  • text {String}: 表示するテキスト。
lock.show({
  flashMessage:{
    type: 'success',
    text: 'Amazing Success!!'
  }
});
flashMessage オプションの実用的な使い方の 1 つは、認可エラーを処理することです。flashMessage には、エラーの説明文を設定できます。
lock.on('authorization_error', function(error) {
  lock.show({
    flashMessage: {
      type: 'error',
      text: error.errorDescription
    }
  });
});
したがって、tester@example.com がサインインを試みると、ブロックされているユーザーであるため、単にログインに失敗して Lock が閉じるのではなく、上部バーにエラーメッセージが表示された状態で、Lock が再び表示されます。

hide()

hide() hide メソッドは、現在開いているウィジェットを閉じます。通常、ウィジェットはほとんどの場合自動的に閉じるため、このメソッドを呼び出すのは主に特定のユースケースに限られます。たとえば、unrecoverable_error イベントを監視し、その後 Lock を hide して独自のカスタムエラーページにリダイレクトしたい場合があります。別の例として、ポップアップモード を実装しているユーザーは、authenticated イベントの発生後にウィジェットを手動で hide する必要がある場合があります。 ポップアップモードで Lock ウィジェットを非表示にする (閉じる) 使用例:
// authenticatedイベントをリッスンしてLockを非表示にする
lock.on("authenticated", function() {
  lock.hide();

  // authenticatedイベントで実行したいその他の処理

});

on()

Lock はライフサイクルを通じてイベントを発行します。on メソッドを使うと、特定のイベントをリッスンして、それに応じた処理を実行できます。
  • show: Lock が表示されたときに発行されます。引数はありません。
  • hide: Lock が非表示になったときに発行されます。引数はありません。
  • unrecoverable_error: 回復不能なエラーが発生したときに発行されます。たとえば、利用可能な接続がない場合です。引数はエラーのみです。
  • authenticated: 認証が正常に完了した後に発行されます。引数は認証結果のみです。認証結果には、ユーザーのプロファイルの取得に使用したり、以後の確認時にログイン状態を維持するために保存したりできるトークンが含まれます。
  • authorization_error: 認可に失敗したときに発行されます。引数はエラーのみです。
  • hash_parsed: redirect モード (デフォルト) で新しい Auth0Lock オブジェクトが初期化されるたびに、ログイン試行の結果を探すために URL のハッシュ部分の解析が試行されます。これは高度なユースケース向けの低レベルイベントであり、可能であれば authenticatedauthorization_error を優先して使用してください。その後、ハッシュ内に何も見つからなかった場合は、このイベントが null とともに発行されます。ログインに成功した場合は authenticated イベントと同じ引数で、問題が発生した場合は authorization_error と同じ引数で発行されます。ポップアップモード では URL のハッシュ部分を解析する必要がないため、このイベントは発行されません。
  • forgot_password ready: “Forgot password” 画面が表示されたときに発行されます。 (Version >10.18 のみ)
  • forgot_password submit: ユーザーが “Forgot password” 画面の送信ボタンをクリックしたときに発行されます。 (Version >10.14 のみ)
  • signin ready: “Sign in” 画面が表示されたときに発行されます。
  • signup ready: “Sign up” 画面が表示されたときに発行されます。
  • signin submit: ユーザーが “Login” 画面の送信ボタンをクリックしたときに発行されます。 (Version >10.18 のみ)
  • signup submit: ユーザーが “Sign Up” 画面の送信ボタンをクリックしたときに発行されます。 (Version >10.18 のみ)
  • federated login: ユーザーがソーシャル接続ボタンをクリックしたときに発行されます。引数として接続名と strategy を受け取ります。 (Version >10.18 のみ)
  • socialOrPhoneNumber ready: Social + 電話番号 の 画面が表示されたときに発行されます
  • socialOrPhoneNumber submit: Social + 電話番号 のパスワードレス画面が送信されたときに発行されます
  • socialOrEmail ready: Social + Email のパスワードレス画面が表示されたときに発行されます
  • socialOrEmail submit: Social + Email のパスワードレス画面が送信されたときに発行されます
  • vcode ready: ワンタイムパスワードを使用するパスワードレス画面が表示されたときに発行されます
  • vcode submit: ワンタイムパスワードを使用するパスワードレス画面が送信されたときに発行されます
authenticated イベントリスナーは、単一の引数 authResult オブジェクトを受け取ります。このオブジェクトには、accessTokenidTokenstaterefreshTokenidTokenPayload の各プロパティが含まれます。 authenticated イベントの使用例:

resumeAuth()

このメソッドは、auth.autoParseHash オプションを false に設定している場合にのみ使用できます。認証フローを完了するには、resumeAuth を呼び出す必要があります。このメソッドは、# を使って URL を処理するクライアントサイドルーター (useHash を使用する angular2 や、hashHistory を使用する react-router) を使用している場合に便利です。
  • hash {String}: リダイレクトで受け取ったハッシュフラグメント。
  • callback {Function}: 解析の完了後に呼び出されます。最初の引数にはエラー (存在する場合) が、2 番目の引数には認証結果が渡されます。使用可能なハッシュがない場合は、両方の引数が null になります。
lock.resumeAuth(hash, function(error, authResult) {
  if (error) {
    alert("Could not parse hash");
  }
  //これはあくまでサンプルです。本番環境ではアクセストークンをログに記録しないでください。
  console.log(authResult.accessToken);
});

checkSession()

checkSession メソッドを使用すると、対象のドメインで Auth0 に対してすでに認証済みのユーザーについて、Auth0 から新しいトークンを取得できます。次のパラメーターを受け取ります。
  • options {Object}: 任意。通常 /authorize に送信する有効な OAuth2 パラメーターを受け付けます。これらを省略した場合は、Auth0 の初期化時に指定したものが使用されます。
  • callback {Function}: トークン更新の結果を受け取って呼び出されます。第 1 引数にはエラー (ある場合) 、第 2 引数には認証結果が渡されます。
lock.checkSession({}, function(err, authResult) {
  // エラーまたは新しいトークンを処理する
});

logout()

ユーザーをログアウトします。
  • options {Object}: 省略可能です。auth0.js の logout() と同じルールに従います。
lock.logout({
  returnTo: 'https://myapp.com/bye-bye'
});