Lock APIのリファレンス

Lockには、多くのメソッド、機能、構成可能なオプションがあります。このリファレンスでは、必要なものを紹介し、その使用方法について説明します。以下をクリックして、探しているメソッドに直接移動するか、単に参照してください。Lockによって生成されるイベントに関する情報を探している場合は、on()メソッドのセクションに記載されています。

• new Auth0Lock-ロックのインスタンス化

• getUserInfo()-ログインしているユーザーのプロファイルの取得

• show() - Lockウィジェットの表示

• on() - イベントのリッスン

• resumeAuth() - autoParseHashがfalseの場合に認証フローを完了するために使用します

• checkSession() - 認証済みユーザーのAuth0から新しいトークンを取得します

• logout() - ユーザーのログアウト

new Auth0Lock(clientID、ドメイン、オプション)

アプリケーションのclientIDとAuth0管理ダッシュボードのアカウントのドメインを使用して構成されたAuth0Lockの新しいインスタンスを初期化します。3番目のオプションのパラメーターは、アプリケーションのニーズに合わせてLockを構成するために使用されるオプションオブジェクトです。この情報は、アプリケーションの設定で確認できます。

• clientId {String}:必須パラメーター。Auth0のアプリケーションのclientId。

• ドメイン{String}:必須パラメーター。Auth0ドメイン。通常は、your-account.auth0.comです。

• オプション {Object}:オプションのパラメーター。ロックの外観と動作を構成できます。詳細については、構成オプションのページを参照してください。

var Auth = (function() {

  var privateStore = {};

  function Auth() {
    // Instantiate Lock - without custom options
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
  }

  Auth.prototype.getProfile = function() {
    return privateStore.profile;
  };

  Auth.prototype.authn = function() {
    // Listening for the authenticated event and get profile
    this.lock.on("authenticated", function(authResult) {
      // Use the token in authResult to getUserInfo() and save it if necessary
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // Handle error
          return;
        }

        //save Access Token only if necessary
        privateStore.accessToken = accessToken;
        privateStore.profile = profile;

        // Update DOM
      });
    });
  };
  return Auth;
}());

getUserInfo（accessToken、コールバック）

ログインし、トークンを所有している場合は、そのトークンを使用してgetUserInfoでユーザーのプロファイルを取得できます。このメソッドは、廃止のgetProfile()に代わるものです。

• accessToken{String}：ユーザートークン。

• コールバック{Function}:ユーザープロファイルが取得された後に呼び出されます。

lock.getUserInfo(accessToken, function(error, profile) {
  if (!error) {
    alert("hello " + profile.name);
  }
});

show(オプション)

showメソッドはウィジェットを表示します。Lockバージョン10.2.0以降では、showメソッドはパラメーターとしてオプションオブジェクトを受け取ることができるようになりました。このパラメーターは、ウィジェットのこの特定の表示に対してLockのオプションをオーバーライドする方法として使用されることに注意してください。オプションは、Lockをインスタンス化するときに設定し、特定のユースケースで必要な場合にのみオーバーライドする必要があります。

次のオプションのサブセットは、ロックがインスタンス化されたときに指定された値（またはデフォルト）からオーバーライドされます。

• allowedConnections

• auth.params

• allowLogin

• allowSignUp

• allowForgotPassword

• initialScreen

• rememberLastLogin

showメソッドでオーバーライドできる上記の限られたサブセットとは対照的に、Lockのインスタンス化時に選択できる設定可能なオプションの全リストの詳細については、ユーザー構成可能オプションのページを参照してください。

オプションのオーバーライド例:

// Show the Lock widget, without overriding any options
lock.show();

// Show the Lock widget, overriding some options
lock.show({
  allowedConnections: ["twitter", "facebook"],
  allowSignUp: false
});

オプションは、最初にLockをインスタンス化するときに設定する必要がありますvar lock = new Auth0Lock(クライアン、ドメイン、オプション);.オプションは、この特定の時間と場所でウィジェットを表示するときに、以前に設定したオプションをオーバーライドするためにのみshowに渡す必要があります。

showメソッドで設定できるflashMessageという追加オプションがあります。

このオブジェクトは、showメソッドのオプションとしてのみ使用でき、Lockをインスタンス化するときに通常のオプションオブジェクトでは使用できません。flashMessageオブジェクトは、Lockが表示されたときにエラーまたは成功のフラッシュメッセージを表示します。次のパラメーターがあります。

• タイプ {String}:メッセージタイプ。エラーまたは成功のいずれかである必要があります。

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

lock.show({
  flashMessage:{
    type: 'success',
    text: 'Amazing Success!!'
  }
});

flashMessageオプションの実際の用途は、認可エラーを処理することです。flashMessageには、エラーの説明テキストを入力できます。

lock.on('authorization_error', function(error) {
  lock.show({
    flashMessage: {
      type: 'error',
      text: error.errorDescription
    }
  });
});

したがって、ブロックされているユーザーであるtester@example.comがサインインしようとすると、ログインに失敗してLockが閉じるのではなく、上部のバーにエラーメッセージが表示され、Lockが再度表示されます。

hide()

hideメソッドは、現在開いているウィジェットを閉じます。ほとんどの場合、ウィジェットは自動的に閉じるため、このメソッドは主に特定のユースケースでのみ呼び出されます。たとえば、unrecoverable_errorイベントをリッスンしてからLockを非表示にして、独自のカスタムエラーページにリダイレクトしたい場合があります。別の例としては、ポップアップモードを実装しているユーザーが、認証済みイベントが発生した後にウィジェットを手動で非表示にする必要がある場合があります。

ポップアップモードでLockウィジェットを非表示にする（閉じる）使用例:

// Listen for authenticated event and hide Lock
lock.on("authenticated", function() {
  lock.hide();

  // Whatever else you'd like to do on authenticated event

});

Lockは、そのライフサイクル中にイベントを生成します。onメソッドを使用して、特定のイベントをリッスンし、それらに対応できます。

• Show:show: Lockが表示されたときに生成されます。引数はありません。

• hide: Lockが非表示のときに生成されます。引数はありません。

• unrecoverable_error: 接続が利用できないなど、回復できないエラーが発生したときに生成されます。唯一の引数はエラーです。

• authenticated: 認証が成功した後に生成されます。唯一の引数は認証結果です。認証結果にはトークンが含まれ、このトークンを使用してユーザーのプロファイルを取得したり、次回以降のログインに使用したりすることができます。

• authorization_error:認可が失敗したときに生成されます。唯一の引数はエラーです。

• hash_parsed: 新しいAuth0Lockオブジェクトがリダイレクトモード（デフォルト）で初期化されるたびに、ログイン試行の結果を探してurlのハッシュ部分を解析しようとします。これは高度な使用例のための低レベルのイベントであり、可能な場合は認可済みとauthorization_errorを優先する必要があります。その後、ハッシュ内に何も見つからなかった場合、このイベントはnullと共に生成されます。これは、ログインが成功した後に認可済みイベントと同じ引数を使用して、または何か問題が発生した場合にauthorization_errorと同じ引数を使用して生成されます。このイベントは、urlのハッシュ部分を解析する必要がないため、ポップアップモードでは生成されません。

• forgot_password ready:「パスワードを忘れた」場合、画面が表示されたときに生成されます。(バージョン>10.18)

• forgot_password submit:「パスワードを忘れた」場合、画面の送信ボタンをクリックしたときに生成されます。(バージョン>10.14)

• signin ready:「サインイン」画面が表示されたときに生成されます。

• signup ready:「サインアップ」画面が表示されたときに生成されます。

• signin submit: ユーザーが「ログイン」画面の送信ボタンをクリックしたときに生成されます。(バージョン>10.18)

• signup submit: ユーザーが「サインアップ」画面の送信ボタンをクリックしたときに生成されます。(バージョン>10.18)

• federated login: ソーシャル接続ボタンをクリックしたときに生成されます。引数として接続名と戦略を持ちます。(バージョン>10.18)

• socialOrPhoneNumber ready: ソーシャル+電話番号を使用したパスワードレス画面が表示されたときに生成されます

• socialOrPhoneNumber submit: ソーシャル+電話番号を使用したパスワードレス画面が送信されたときに生成されます

• socialOrEmail ready: ソーシャル+電子メールを使用したパスワードレス画面が表示されたときに生成されます

• socialOrEmail submit: ソーシャル+電子メールを使用したパスワードレス画面が送信されたときに生成されます

• vcode ready: ワンタイムパスワードを使用したパスワードレス画面が表示されたときに生成されます

• vcode submit: ワンタイムパスワードを使用したパスワードレス画面が送信されたときに生成されます

認証済みイベントリスナーには、authResultオブジェクトという1つの引数があります。このオブジェクトには、次のプロパティが含まれています。accessToken、idToken、state、refreshTokenおよびidTokenPayload。

認証済みイベントの使用例:

var Auth = (function() {

  var privateStore = {};

  function Auth() {
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
  }

  Auth.prototype.getProfile = function() {
    return privateStore.profile;
  };

  Auth.prototype.authn = function() {
    // Listening for the authenticated event
    this.lock.on("authenticated", function(authResult) {
      // Use the token in authResult to getUserInfo() and save it if necessary
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // Handle error
          return;
        }

        privateStore.profile = profile;

      });
    });
  };
  return Auth;
}());

このメソッドは、auth.autoParseHashオプションをfalseに設定した場合にのみ使用できます。認証フローを完了するには、resumeAuthを呼び出す必要があります。このメソッドは、#を使用してurl (useHashを使用したangular2、またはhashHistoryを使用したreact-router)を処理するクライアント側ルーターを使用している場合に便利です。

• hash {String}:リダイレクトから受信したハッシュフラグメント。

• コールバック{Function}:解析が完了した後に呼び出されます。最初の引数としてエラー（存在する場合）があり、2番目の引数として認証結果があります。使用できるハッシュがない場合は、両方の引数がnullになります。

lock.resumeAuth(hash, function(error, authResult) {
  if (error) {
    alert("Could not parse hash");
  }
  //This is just an example; you should not log Access Tokens in production.
  console.log(authResult.accessToken);
});

checkSessionメソッドを使用すると、ドメインのAuth0に対して既に認証済みのユーザーのAuth0から新しいトークンを取得できます。次のパラメーターがあります。

• オプション {Object}:オプション。通常は/authorizeに送信される有効なOAuth2パラメーターを受け入れます。省略した場合は、Auth0の初期化時に指定されたパラメーターが使用されます。

• コールバック{Function}:トークンの更新結果で呼び出されます。最初の引数としてエラー（存在する場合）があり、2番目の引数として認証結果があります。

lock.checkSession({}, function(err, authResult) {
  // handle error or new tokens
});

ユーザーをログアウトします。

• オプション {Object}:これはオプションであり、auth0.js logout()と同じルールに従います。

lock.logout({
  returnTo: 'https://myapp.com/bye-bye'
});