> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Lock APIのリファレンス

> Lock v11 APIの詳細。

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

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

* [new Auth0Lock](#auth0lock)-ロックのインスタンス化
* [getUserInfo()](#getuserinfo-)-ログインしているユーザーのプロファイルの取得
* [show()](#show-) - Lockウィジェットの表示
* [on()](#on-) - イベントのリッスン
* [resumeAuth()](#resumeauth-) - `autoParseHash`がfalseの場合に認証フローを完了するために使用します
* [checkSession()](#checksession-) - 認証済みユーザーのAuth0から新しいトークンを取得します
* [logout()](#logout-) - ユーザーのログアウト

## Auth0LockPasswordless

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

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

* **clientId `{String}`** :必須パラメーター。Auth0のアプリケーションのclientId。
* **ドメイン{String}** :必須パラメーター。Auth0ドメイン。通常は、your-account.auth0.comです。
* **オプション `{Object}`** :オプションのパラメーター。ロックの外観と動作を構成できます。詳細については、[構成オプションのページ](/docs/ja-jp/libraries/lock/lock-configuration)を参照してください。

export const codeExample1 = `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;
}());`;

<AuthCodeBlock children={codeExample1} language="javascript" />

## getUserInfo()

`getUserInfo（accessToken、コールバック）`

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

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

```javascript lines theme={null}
lock.getUserInfo(accessToken, function(error, profile) {
  if (!error) {
    alert("hello " + profile.name);
  }
});
```

## show()

`show(オプション)`

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

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

* allowedConnections
* auth.params
* allowLogin
* allowSignUp
* allowForgotPassword
* initialScreen
* rememberLastLogin

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

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

```javascript lines theme={null}
// 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`という追加オプションがあります。

### flashMessage

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

* **タイプ** `{String}`:メッセージタイプ。`エラー`または`成功`のいずれかである必要があります。
* **テキスト** `{String}`:表示するテキスト。

```javascript lines theme={null}
lock.show({
  flashMessage:{
    type: 'success',
    text: 'Amazing Success!!'
  }
});
```

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

```javascript lines theme={null}
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を`非表示`にして、独自のカスタムエラーページにリダイレクトしたい場合があります。別の例としては、[ポップアップモード](/docs/ja-jp/libraries/lock/lock-authentication-modes)を実装しているユーザーが、`認証済み`イベントが発生した後にウィジェットを手動で`非表示`にする必要がある場合があります。

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

```javascript lines theme={null}
// Listen for authenticated event and hide Lock
lock.on("authenticated", function() {
  lock.hide();

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

});
```

## on()

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

* Show:`show`: Lockが表示されたときに生成されます。引数はありません。
* `hide`: Lockが非表示のときに生成されます。引数はありません。
* `unrecoverable_error`: 接続が利用できないなど、回復できないエラーが発生したときに生成されます。唯一の引数はエラーです。
* `authenticated`: 認証が成功した後に生成されます。唯一の引数は認証結果です。認証結果にはトークンが含まれ、このトークンを使用してユーザーのプロファイルを取得したり、次回以降のログインに使用したりすることができます。
* `authorization_error`:認可が失敗したときに生成されます。唯一の引数はエラーです。
* `hash_parsed`: 新しいAuth0Lockオブジェクトがリダイレクトモード（デフォルト）で初期化されるたびに、ログイン試行の結果を探してurlのハッシュ部分を解析しようとします。これは高度な使用例のための低レベルのイベントであり、可能な場合は`認可済み`と`authorization_error`を優先する必要があります。その後、ハッシュ内に何も見つからなかった場合、このイベントは`null`と共に生成されます。これは、ログインが成功した後に`認可済み`イベントと同じ引数を使用して、または何か問題が発生した場合に`authorization_error`と同じ引数を使用して生成されます。このイベントは、urlのハッシュ部分を解析する必要がないため、[ポップアップモード](/docs/ja-jp/libraries/lock/lock-authentication-modes)では生成されません。
* `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`。

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

export const codeExample2 = `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;
}());`;

<AuthCodeBlock children={codeExample2} language="javascript" />

## resumeAuth()

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

* **hash** `{String}`:リダイレクトから受信したハッシュフラグメント。
* **コールバック** {Function}:解析が完了した後に呼び出されます。最初の引数としてエラー（存在する場合）があり、2番目の引数として認証結果があります。使用できるハッシュがない場合は、両方の引数が`null`になります。

```javascript lines theme={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()

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

* **オプション** `{Object}`:オプション。通常は`/authorize`に送信される有効なOAuth2パラメーターを受け入れます。省略した場合は、Auth0の初期化時に指定されたパラメーターが使用されます。
* **コールバック** {Function}:トークンの更新結果で呼び出されます。最初の引数としてエラー（存在する場合）があり、2番目の引数として認証結果があります。

```javascript lines theme={null}
lock.checkSession({}, function(err, authResult) {
  // handle error or new tokens
});
```

## logout()

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

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

```javascript lines theme={null}
lock.logout({
  returnTo: 'https://myapp.com/bye-bye'
});
```