> ## 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 アプリ向けに、シームレスなログインおよびサインアップ体験を提供するウィジェット。

# Web 用 Lock

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

<Warning>
  Web アプリケーションの埋め込みログインでは、テナントに[カスタムドメインを設定](/ja/docs/customize/custom-domains)しない限り、[クロスオリジン認証](/ja/docs/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 リポジトリ](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 リポジトリ](https://github.com/auth0/lock/releases) で確認してください。

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

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

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

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

<div id="usage">
  ## 使い方
</div>

<div id="step-1-initializing-lock">
  ### ステップ 1. Lock の初期化
</div>

まず、新しい `Auth0Lock` オブジェクトを初期化し、Auth0 の <Tooltip tip="クライアントID: Auth0 から登録済みリソースに付与される識別値。" cta="用語集を表示" href="/ja/docs/glossary?term=client+ID">クライアントID</Tooltip> (Auth0 アプリケーションごとに一意のクライアントIDで、[Dashboard](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's <Tooltip tip="第1認証要素としてパスワードに依存しない認証方式。" cta="用語集を表示" href="/ja/docs/glossary?term=Passwordless">パスワードレス</Tooltip> モードは、Lock v11.2.0 以降でのみ利用できます。この機能を使用するには、[Lock の最新リリース](https://github.com/auth0/lock/releases)を使用してください。

Lock のパスワードレス モードを使用すると、ユーザーはメールアドレスまたは携帯電話番号だけで認証できます。ユーザーは code を受け取った後、戻ってその code を入力するか、リンクをクリックすることで、パスワードを覚えていなくても認証できます。

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']
}
```

選択したパスワードレス接続を、[Dashboard](https://manage.auth0.com/#) の **Connections -> Passwordless** で有効にし、続けてその接続をアプリケーションでも有効にしてください。そうしておけば、Lock がその接続を使用しようとしたときに、すでに設定とアプリケーションへの関連付けが完了しています。

`email` を使用する場合は、さらに 1 つ選択肢があります。ユーザーに入力用の code を受け取らせるか、「マジックリンク」を受け取らせるかを選択できます。これは `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="Single Sign-On（SSO）: ユーザーが1つのアプリケーションにログインすると、他のアプリケーションにも自動的にログインできるようにするサービスです。" cta="用語集を見る" href="/ja/docs/glossary?term=Single+Sign-on">シングルサインオン</Tooltip> (SSO) を実現するには、2つの条件を満たす必要があります。

1. SSO を行う両方のアプリケーションが、いずれもファーストパーティアプリケーションである必要があります。サードパーティアプリケーションとの SSO は機能しません。
2. カスタムドメインを使用し、SSO を行う両方のアプリケーションと Auth0 テナントを同一ドメイン上に配置する必要があります。従来、Auth0 のドメインは `foo.auth0.com` の形式ですが、カスタムドメインを使用すると、対象の各アプリケーションと Auth0 テナントで同じドメインを使用できるため、CSRF 攻撃のリスクを軽減できます。

埋め込みログインのシナリオで SSO を設定する代わりに、<Tooltip tip="Universal Login: アプリケーションは、ユーザーの本人確認を行うために、Auth0 の認可サーバーでホストされる Universal Login にリダイレクトします。" cta="用語集を見る" href="/ja/docs/glossary?term=Universal+Login">Universal Login</Tooltip> を使用することを推奨します。Universal Login は SSO を実現する最も信頼性が高く安定した方法であり、アプリケーションで複数のドメインを使用する必要がある場合、または [サードパーティアプリケーション](/ja/docs/get-started/applications/third-party-applications/configure-third-party-applications)を使用する場合に、これを実現できる唯一の方法です。

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

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

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

| **ステータス** | **コード**                       | **説明**                                                                                  |
| --------- | ----------------------------- | --------------------------------------------------------------------------------------- |
| 400       | invalid\_request              | リクエストボディが無効です。client\_id、credential\_type、username、otp、realm のすべてが必要であり、指定できるのはこれらのみです。 |
| 401       | unauthorized\_client          | クロスオリジンログインは許可されていません。                                                                  |
| 400       | unsupported\_credential\_type | credential\_type パラメーターが不明です。                                                           |
| 400       | invalid\_request              | 不明な realm: 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 リファレンス](/ja/docs/libraries/lock/lock-api-reference)
* [Lock の設定オプション](/ja/docs/libraries/lock/lock-configuration)