> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Lock v11 API の詳細

# Lock 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) + "*****マスク済み*****";
          }
          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) - Lock をインスタンス化する
* [getUserInfo()](#getuserinfo-) - ログイン済みユーザーのプロファイルを取得する
* [show()](#show-) - Lock ウィジェットを表示する
* [on()](#on-) - イベントを監視する
* [resumeAuth()](#resumeauth-) - `autoParseHash` が false の場合に認証フローを完了するために使用する
* [checkSession()](#checksession-) - 認証済みユーザー向けに Auth0 から新しいトークンを取得する
* [logout()](#logout-) - ユーザーをログアウトする

<div id="auth0lock">
  ## Auth0Lock
</div>

`new Auth0Lock(clientID, domain, options)`

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

* **clientId `{String}`**: 必須パラメーターです。Auth0 におけるアプリケーションの clientId です。
* **domain `{String}`**: 必須パラメーターです。Auth0 のドメインです。通常は your-account.auth0.com です。
* **options `{Object}`**: 省略可能なパラメーターです。Lock の外観と動作を設定できます。詳しくは [the configuration options page](/ja/docs/libraries/lock/lock-configuration) を参照してください。

export const codeExample1 = `var Auth = (function() {

  var privateStore = {};

  function Auth() {
    // Lock をインスタンス化（カスタムオプションなし）
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
  }

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

  Auth.prototype.authn = function() {
    // authenticated イベントを監視し、プロファイルを取得
    this.lock.on("authenticated", function(authResult) {
      // authResult のトークンを使用して getUserInfo() を呼び出し、必要に応じて保存
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // エラーを処理
          return;
        }

        // 必要な場合にのみアクセストークンを保存
        privateStore.accessToken = accessToken;
        privateStore.profile = profile;

        // DOM を更新
      });
    });
  };
  return Auth;
}());`;

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

<div id="getuserinfo">
  ## getUserInfo()
</div>

`getUserInfo(accessToken, callback)`

ユーザーがログインしてトークンを取得したら、そのトークンを使って `getUserInfo` からユーザーのプロファイルを取得できます。このメソッドは、非推奨の \`getProfile()\`\` に代わるものです。

* **accessToken \{String}**: ユーザーのトークン。
* **callback \{Function}**: ユーザーのプロファイルが取得されたあとに呼び出されます。

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

<div id="show">
  ## show()
</div>

`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` の一覧全体について詳しくは、[ユーザーが設定可能なオプションのページ](/ja/docs/libraries/lock/lock-configuration)を参照してください。

オプションの上書きの例:

```js lines theme={null}
// オプションを上書きせずにLockウィジェットを表示する
lock.show();

// 一部のオプションを上書きしてLockウィジェットを表示する
lock.show({
  allowedConnections: ["twitter", "facebook"],
  allowSignUp: false
});
```

オプションは、Lock を最初にインスタンス化する際に `var lock = new Auth0Lock(clientId, domain, options);` で設定する必要があります。`show` にオプションを渡すのは、この時点でこの場所にウィジェットを表示する際に、以前設定したオプションを上書きする場合に限るべきです。

`show` メソッドでは、`flashMessage` という追加オプションも設定できます。

<div id="flashmessage">
  ### flashMessage
</div>

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

* **type** \{String}: メッセージの種類。`error` または `success` のいずれかを指定する必要があります。
* **text** \{String}: 表示するテキスト。

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

`flashMessage` オプションの実用的な使い方の 1 つは、認可エラーを処理することです。`flashMessage` には、エラーの説明文を設定できます。

```js lines theme={null}
lock.on('authorization_error', function(error) {
  lock.show({
    flashMessage: {
      type: 'error',
      text: error.errorDescription
    }
  });
});
```

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

<div id="hide">
  ## hide()
</div>

`hide()`

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

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

```js lines theme={null}
// authenticatedイベントをリッスンしてLockを非表示にする
lock.on("authenticated", function() {
  lock.hide();

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

});
```

<div id="on">
  ## on()
</div>

Lock はライフサイクルを通じてイベントを発行します。`on` メソッドを使うと、特定のイベントをリッスンして、それに応じた処理を実行できます。

* `show`: Lock が表示されたときに発行されます。引数はありません。
* `hide`: Lock が非表示になったときに発行されます。引数はありません。
* `unrecoverable_error`: 回復不能なエラーが発生したときに発行されます。たとえば、利用可能な接続がない場合です。引数はエラーのみです。
* `authenticated`: 認証が正常に完了した後に発行されます。引数は認証結果のみです。認証結果には、ユーザーのプロファイルの取得に使用したり、以後の確認時にログイン状態を維持するために保存したりできるトークンが含まれます。
* `authorization_error`: 認可に失敗したときに発行されます。引数はエラーのみです。
* `hash_parsed`: redirect モード (デフォルト) で新しい Auth0Lock オブジェクトが初期化されるたびに、ログイン試行の結果を探すために URL のハッシュ部分の解析が試行されます。これは高度なユースケース向けの低レベルイベントであり、可能であれば `authenticated` と `authorization_error` を優先して使用してください。その後、ハッシュ内に何も見つからなかった場合は、このイベントが `null` とともに発行されます。ログインに成功した場合は `authenticated` イベントと同じ引数で、問題が発生した場合は `authorization_error` と同じ引数で発行されます。[ポップアップモード](/ja/docs/libraries/lock/lock-authentication-modes) では 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 + 電話番号 の <Tooltip tip="Passwordless: Form of authentication that does not rely on a password as the first factor." cta="View Glossary" href="/ja/docs/glossary?term=Passwordless">パスワードレス</Tooltip> 画面が表示されたときに発行されます
* `socialOrPhoneNumber submit`: Social + 電話番号 のパスワードレス画面が送信されたときに発行されます
* `socialOrEmail ready`: Social + Email のパスワードレス画面が表示されたときに発行されます
* `socialOrEmail submit`: Social + Email のパスワードレス画面が送信されたときに発行されます
* `vcode ready`: ワンタイムパスワードを使用するパスワードレス画面が表示されたときに発行されます
* `vcode submit`: ワンタイムパスワードを使用するパスワードレス画面が送信されたときに発行されます

`authenticated` イベントリスナーは、単一の引数 `authResult` オブジェクトを受け取ります。このオブジェクトには、`accessToken`、`idToken`、`state`、`refreshToken`、`idTokenPayload` の各プロパティが含まれます。

`authenticated` イベントの使用例:

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() {
    // authenticated イベントを監視します
    this.lock.on("authenticated", function(authResult) {
      // authResult 内のトークンを使って getUserInfo() を呼び出し、必要に応じて保存します
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // エラーを処理します
          return;
        }

        privateStore.profile = profile;

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

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

<div id="resumeauth">
  ## resumeAuth()
</div>

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

* **hash** \{String}: リダイレクトで受け取ったハッシュフラグメント。
* **callback** \{Function}: 解析の完了後に呼び出されます。最初の引数にはエラー (存在する場合) が、2 番目の引数には認証結果が渡されます。使用可能なハッシュがない場合は、両方の引数が `null` になります。

```js lines theme={null}
lock.resumeAuth(hash, function(error, authResult) {
  if (error) {
    alert("Could not parse hash");
  }
  //これはあくまでサンプルです。本番環境ではアクセストークンをログに記録しないでください。
  console.log(authResult.accessToken);
});
```

<div id="checksession">
  ## checkSession()
</div>

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

* **options** \{Object}: 任意。通常 `/authorize` に送信する有効な OAuth2 パラメーターを受け付けます。これらを省略した場合は、Auth0 の初期化時に指定したものが使用されます。
* **callback** \{Function}: トークン更新の結果を受け取って呼び出されます。第 1 引数にはエラー (ある場合) 、第 2 引数には認証結果が渡されます。

```js lines theme={null}
lock.checkSession({}, function(err, authResult) {
  // エラーまたは新しいトークンを処理する
});
```

<div id="logout">
  ## logout()
</div>

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

* **options** \{Object}: 省略可能です。auth0.js の logout() と同じルールに従います。

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