> ## 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.

> web app向けに、スムーズなログインおよびサインアップ体験を提供するウィジェット。

# Lock for Web

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 は、[ニーズに合わせて設定できる](/docs/ja-jp/libraries/lock/lock-configuration)埋め込み可能なログインフォームです。Lock を使うと、ソーシャル<Tooltip tip="アイデンティティプロバイダー（IdP）: デジタルアイデンティティを保存・管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=identity+providers">アイデンティティプロバイダー</Tooltip>を簡単に追加できるため、ユーザーは使いたいプロバイダーでシームレスにログインできます。

<Warning>
  Web アプリケーションでの埋め込みログインでは、テナントに[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定しない限り、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)が使用されます。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを可能にするために、サードパーティ Cookie が使用されます。
</Warning>

<div id="lock-installation">
  ## Lock のインストール
</div>

Lock は複数の方法でインストールできます。ご利用の環境やアプリケーションに最適な、以下のインストール元を選択してください。

<div id="installation-sources">
  ### インストール方法
</div>

[npm](https://npmjs.org) でインストールします。
`npm install auth0-lock`

[bower](http://bower.io) でインストールします。

`bower install auth0-lock`

CDN 経由で読み込みます (`.x` と `.y` は、[Lock GitHub repository](https://github.com/auth0/lock/releases) にある最新のマイナーおよびパッチのリリース番号に置き換えてください) 。

最新のマイナーリリース:`<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>`最新のパッチリリース:
`<script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>`

本番環境のアプリケーションでは、特定のパッチバージョン、少なくとも特定のマイナーバージョンを使用することを推奨します。Lock をどの方法で読み込む場合でも、バージョンは固定し、更新は手動でのみ行うことをおすすめします。これにより、更新によって実装に悪影響が及ぶのを防げます。現在のリリース一覧は、[GitHub repository](https://github.com/auth0/lock/releases) を確認してください。

<div id="mobile">
  ### モバイル
</div>

モバイル向けの場合、Auth0 ではアプリケーションの `head` に次のメタタグを追加することを推奨しています。

`<meta name="viewport" content="width=device-width, initial-scale=1"/>`

<div id="bundling-dependencies">
  ### 依存関係のバンドル
</div>

browserify または webpack を使ってプロジェクトをビルドし、依存関係をバンドルしている場合は、`auth0-lock` モジュールをインストールした後、それもすべての依存関係とあわせてバンドルする必要があります。[Browserify](https://github.com/auth0/lock/tree/master/examples/bundling/browserify) と [webpack](https://github.com/auth0/lock/tree/master/examples/bundling/webpack) の例を参照してください。

<div id="cross-origin-authentication">
  ### クロスオリジン認証
</div>

<Warning>
  Web アプリケーションの埋め込みログインでは、テナントに[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定していない限り、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)が使用されます。クロスオリジン認証では、異なるオリジン間で認証トランザクションを安全に行えるようにするため、サードパーティ Cookie を使用します。
</Warning>

アプリケーションに Lock を埋め込むには、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)が適切に設定されている必要があります。具体的には、**Allowed Web Origins** プロパティに、リクエスト元のドメインを設定する必要があります。この項目は、[アプリケーション設定](https://manage.auth0.com/#/applications/\{yourClientId}/settings)にあります。

<div id="usage">
  ## 使用状況
</div>

<div id="step-1-initializing-lock">
  ### Step 1. Lock を初期化する
</div>

まず、新しい `Auth0Lock` オブジェクトを初期化し、Auth0 の <Tooltip tip="Client ID: Auth0 から登録済みリソースに付与される識別子。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=client+ID">クライアント ID</Tooltip> (Auth0 アプリケーションごとに固有のクライアント ID で、[管理ダッシュボード](https://manage.auth0.com/#) から確認できます) と Auth0 のドメイン (例: `yourname.auth0.com`) を指定する必要があります。

export const codeExample1 = `// Auth0Lock を初期化
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}'
);`;

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

<div id="step-2-authenticating-and-getting-user-info">
  ### ステップ 2. 認証してユーザー情報を取得する
</div>

次に、`on` メソッドを使って `authenticated` イベントを監視します。イベントが発生したら、受け取った `accessToken` を使って `getUserInfo` メソッドを呼び出し、必要に応じてユーザーのプロファイル情報を取得します。

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

  var wm = new WeakMap();
  var privateStore = {};
  var lock;

  function Auth() {
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
    wm.set(privateStore, {
      appName: "example"
    });
  }

  Auth.prototype.getProfile = function() {
    return wm.get(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;
        }

        // アクセストークンは、どうしても必要な場合を除き保存しないことを推奨します
        wm.set(privateStore, {
          accessToken: authResult.accessToken
        });

        wm.set(privateStore, {
          profile: profile
        });

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

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

その後、ページの内容を操作して、ユーザーにプロファイル情報を表示できます (たとえば、ウェルカムメッセージに名前を表示するなど) 。

`<h2>Welcome <span id="nick" class="nickname"></span></h2>`

ユーザープロファイルを保存する場合は、プロファイルオブジェクトを `JSON.stringify` しておき、あとで使用するときに `JSON.parse` する必要がある点に注意してください。これは、`localStorage` には JSON オブジェクトではなく文字列として保存する必要があるためです。

<div id="step-3-showing-lock">
  ### ステップ 3. Lock を表示する
</div>

ここでは、ユーザーがログインボタンをクリックしたあとに Lock ウィジェットを表示していますが、ページの読み込み時に `lock.show();` を使えば、そのページにアクセスしたときに自動的に Lock を表示することもできます。

これで Lock ウィジェットが表示され、上記の設定と組み合わせれば、ログインを処理する準備は完了です！

```js lines theme={null}
document.getElementById('btn-login').addEventListener('click', function() {
  lock.show();
});
```

<div id="passwordless">
  ## パスワードレス
</div>

Lock の <Tooltip tip="パスワードレス: 第1の認証要素としてパスワードに依存しない認証方式。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Passwordless">パスワードレス</Tooltip> モードは、Lock v11.2.0 以降でのみ利用できます。この機能を使うには、[Lock の最新リリース](https://github.com/auth0/lock/releases)を使用してください。

Lock のパスワードレスモードを使用すると、ユーザーはメールアドレスまたは携帯電話番号だけで認証できます。ユーザーにはコードが送信され、そのコードを入力するか、リンクをクリックすることで、パスワードを覚えていなくても認証を完了できます。

Lock でパスワードレスモードを実装するには、`Auth0Lock` ではなく `Auth0LockPasswordless` を使用して、通常とは少し異なる方法で Lock を初期化します。

export const codeExample3 = `var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}'
);`;

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

<div id="passwordless-options">
  ### パスワードレスのオプション
</div>

さらに、Lock のパスワードレスモードには、このモード固有の設定オプションがいくつかあります。

使用する接続タイプを指定するには、`allowedConnections` オプションに `email` または `sms` を値として指定して Lock を初期化します。

```js lines theme={null}
var passwordlessOptions = {
  allowedConnections: ['sms']
}
```

選択したパスワードレス接続を、[Auth0 Dashboard](https://manage.auth0.com/#) の **Connections -> Passwordless** で有効にし、さらにその接続をアプリケーションでも有効にしておくことを忘れないでください。そうしておけば、Lock がその接続を使おうとしたときに、すでに設定されてアプリケーションにリンクされた状態になっています。

`email` を使用する場合は、さらにもう 1 つ選択肢があります。ユーザーに入力用のコードを受け取ってもらうか、それとも「マジックリンク」を受け取ってもらうかを選べます。これは `passwordlessMethod` オプションで設定し、値には `code` または `link` を指定します。

```js lines theme={null}
var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code'
}
```

<div id="passwordless-example">
  ### パスワードレスの使用例
</div>

export const codeExample4 = `var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code',
  auth: {
    redirectUrl: 'http://localhost:3000/callback',   
    responseType: 'token id_token',
    params: {
      scope: 'openid email'               
    }          
  }
}

var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}',
 passwordlessOptions
);`;

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

<div id="single-sign-on-with-embedded-authentication">
  ### 埋め込み認証でのシングルサインオン
</div>

埋め込みログインでは、アプリケーションが次のアーキテクチャを共有している場合、<Tooltip tip="シングルサインオン（SSO）：ユーザーが1つのアプリケーションにログインすると、他のアプリケーションにも自動的にログインできるようにするサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Single+Sign-on">シングルサインオン</Tooltip> (SSO) がサポートされます。

* SSO を試みるアプリケーションは、ファーストパーティアプリケーションである必要があります。サードパーティアプリケーションとの埋め込みセッションの共有はサポートされていません。
* アプリケーションと Auth0 テナントが、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を介してトップレベルドメインを共有している必要があります。デフォルトでは、Auth0 のドメインは `example.auth0.com` 形式です。カスタムドメインを使用すると、アプリケーションと Auth0 テナントで同じトップレベルドメインを共有でき、CSRF 攻撃の防止にも役立ちます。

アーキテクチャがこれらの条件を満たす場合、Lock を使用した埋め込み SSO が適しています。<Tooltip tip="Universal Login：アプリケーションは、ユーザーのアイデンティティを検証するために、Auth0 の認可サーバーでホストされている Universal Login にリダイレクトします。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Universal+Login">Universal Login</Tooltip> は、セッションレイヤーを通じて、複数のドメインにまたがる SSO や[サードパーティアプリケーション](/docs/ja-jp/get-started/applications/third-party-applications/configure-third-party-applications)との SSO を自動的に処理します。両者は同じアプリケーション内で併用できます (たとえば、主要なサインインには Universal Login を使用し、埋め込み認証要素の登録やステップアップフローには Lock を使用します) 。トレードオフの比較については、[ホスト型ログインと埋め込みログイン](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)を参照してください。

<div id="error-codes-and-descriptions">
  ## エラーコードと説明
</div>

Lock を埋め込みログインで使用する場合は、`/co/authenticate` エンドポイントが使用され、このエンドポイントでは次のエラーが返されます。

エラーの説明は人が読める形式です。**コードで解析するべきではなく**、また、内容はいつでも変更される可能性があります。

| **ステータス** | **コード**                       | **説明**                                                                                       |
| --------- | ----------------------------- | -------------------------------------------------------------------------------------------- |
| 400       | invalid\_request              | 無効な request body です。client\_id、credential\_type、username、otp、realm のみを指定する必要があり、これらはすべて必須です。 |
| 401       | unauthorized\_client          | クロスオリジンのログインは許可されていません。                                                                      |
| 400       | unsupported\_credential\_type | 不明な credential type パラメーターです。                                                                |
| 400       | invalid\_request              | 不明なレルム non-existent-connection です。                                                           |
| 403       | access\_denied                | メールアドレスまたはパスワードが正しくありません。                                                                    |
| 403       | access\_denied                | 認証エラー                                                                                        |
| 403       | blocked\_user                 | ブロックされたユーザー                                                                                  |
| 401       | password\_leaked              | 現在使用しているパスワードが、過去にデータ侵害 (このアプリケーション内ではありません) によって漏えいしていたため、このログイン試行はブロックされました。               |
| 429       | too\_many\_attempts           | ログイン試行が連続して複数回行われたため、アカウントがブロックされました。ブロックを解除する方法については、ご希望の連絡方法で通知を送信しました。                    |
| 429       | too\_many\_attempts           | 不審なログイン動作が検出されたため、以降の試行はブロックされます。管理者に連絡してください。                                               |

<div id="browser-compatibility">
  ## ブラウザー互換性
</div>

ブラウザー互換性は、**Chrome**、**Safari**、**Firefox**、および **IE 10 以降** で保証されています。Auth0 では現在、各プッシュ時に [zuul](https://github.com/defunctzombie/zuul) と [Saucelabs](https://saucelabs.com) を使用して統合テストを実行しています。

<div id="learn-more">
  ## 詳しくはこちら
</div>

* [Lock API リファレンス](/docs/ja-jp/libraries/lock/lock-api-reference)
* [Lock の設定オプション](/docs/ja-jp/libraries/lock/lock-configuration)