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

# Web用のLock

> 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/v11/configuration)できる埋め込み可能なログインフォームで、シングルページアプリでの使用が推奨されますが、[ユニバーサルログイン](/docs/ja-jp/universal-login)と併用するのが望ましく、可能なときはいつでも使用してください。Lockを使用すると、ソーシャルIDプロバイダーを手軽に追加できるため、ユーザーは任意のプロバイダーを使用してシームレスにログインすることができます。

<Warning>
  Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定して**同じドメインにアプリをホスト** しないと、[クロスオリジン認証の信頼性が欠ける可能性があります](/docs/ja-jp/authenticate/login/cross-origin-authentication)。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。
</Warning>

## Lockのインストール

Lockのインストールには、いくつかの方法があります。環境とアプリケーションに合ったインストールソースを以下から選択してください。

### インストールソース

[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)で現在のリリース一覧を確認します。

### モバイル

モバイルのオーディエンスを対象にしている場合は、次のメタタグをアプリケーションの`head`に追加することをお勧めします。

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

### 依存関係のバンドル

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)を使用した例が用意されています。

### クロスオリジン認証

<Warning>
  Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定して**同じドメインにアプリをホスト** しないと、[クロスオリジン認証の信頼性が欠ける可能性があります](/docs/ja-jp/authenticate/login/cross-origin-authentication)。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。
</Warning>

アプリケーション内でLockを埋め込むには、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)を適切に構成する必要があります。具体的には、**［Allowed Web Origins（許可されているWebオリジン）］** プロパティを要求しているドメインに設定する必要があります。このフィールドは、[［Application Settings（アプリケーションの設定）］](https://manage.auth0.com/#/applications/\{yourClientId}/settings)で見つけることができます。

Lockで埋め込みログインを実装する前に、必ずクロスオリジン認証の制限事項をお読みください。

## 使用

### 1. Lockの初期化

まず、新しい`Auth0Lock`オブジェクトを初期化し、そのオブジェクトにAuth0クライアントID（Auth0アプリケーションごとに一意のクライアントIDで、[管理ダッシュボード](https://manage.auth0.com/#)から入手可能）とAuth0ドメイン（`yourname.auth0.com`など）を提供する必要があります。

export const codeExample1 = `// Initializing our Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}'
);`;

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

### 2. ユーザー情報の認証と取得

次に、`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() {
    // 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;
        }

        //we recommend not storing Access Tokens unless absolutely necessary
        wm.set(privateStore, {
          accessToken: authResult.accessToken
        });

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

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

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

その後で、ページのコンテンツを操作して、ユーザーにプロファイル情報を表示（歓迎メッセージに名前を表示するなど）することができます。

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

ユーザープロファイルを保存する場合は、プロファイルオブジェクトに`JSON.stringify`を適用し、後で使用する場合は`JSON.parse`を適用します。これは、JSONオブジェクトでなく文字列として`localStorage`に保存する必要があるからです。

### 3. Lockの表示

ここでは、ユーザーが［ログイン］ボタンをクリックしたときにLockウィジェットが表示されるようにしています。ページに移動した時点で自動的にLockを表示したいときは、ページの読み込み時に`lock.show();`を使用します。

これでLockウィジェットが表示されるようになります。上記の手順も完了し、ログインを処理する準備が整いました！

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

## パスワードレス

Lockでは、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="javascript" />

### パスワードレスのオプション

また、Lockのパスワードレスモードには、専用の構成オプションがいくつかあります。

使用したい接続タイプを示すには、`allowedConnections`オプションでLockを初期化し、`email`か`sms`のいずれかを値に使用します。

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

[［Dashboard］](https://manage.auth0.com/#)の **［Connections（接続）］-> ［<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=passwordless" tip="パスワードレス: 最初の要素としてパスワードに依存しない認証の形式。" cta="用語集の表示">Passwordless</Tooltip>（パスワードレス）］** でご希望のパスワードレス接続を必ず有効にしてから、アプリケーション用に有効にします。こうすることで、Lockで使用しようとするときに、接続はすでに設定されアプリケーションにリンクされています。

`email`を使用することを選んだ場合は、ユーザーに入力コードとマジックリンクのどちらを送信するかも指定しなければなりません。これは、`passwordlessMethod`オプションを介して行われます。このオプションは、`code`または`link`の値をとります。

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

### パスワードレスの例

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="javascript" />

### シングルサインオンと埋め込み認証

埋め込みログインのあるアプリがシングルサインオン（<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=single-sign-on" tip="シングルサインオン（SSO）: ユーザーが1つのアプリケーションにログインした後、そのユーザーを他のアプリケーションに自動的にログインさせるサービス。" cta="用語集の表示">SSO</Tooltip>）を使用するには、2つの条件を満たす必要があります。

1. SSOを行おうとするアプリケーションの両方が、ファーストパーティーのアプリケーションでなくてはなりません。サードパーティーのアプリケーションではSSOが動作しません。
2. カスタムドメインを使用していること、SSOを実装しようとしているアプリケーションとAuth0テナントが同じドメインにあることが必要です。従来、Auth0ドメインの形式は`foo.auth0.com`ですが、カスタムドメインを使用すると、該当するすべてのアプリケーションとAuth0テナントに同じドメインを使用してCSRF攻撃のリスクを回避できます。

埋め込みログインの実装では、SSOをセットアップする代わりに、ユニバーサルログインの使用をお勧めします。ユニバーサル ログインは、SSOを実行するための最も信頼性が高く安定した方法であり、アプリケーションに複数のドメインを使用する必要がある場合や、[サードパーティアプリケーション](/docs/ja-jp/get-started/applications/third-party-applications/configure-third-party-applications)を使用する必要がある場合に実行できる唯一の方法です。

## エラーコードと説明

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

エラーの説明は人間が判読できるものです。この説明は**コードを用いて解析するものではありません** 。また、いつでも変更される可能性があります。

| ステータス | コード                           | 説明                                                                             |
| ----- | ----------------------------- | ------------------------------------------------------------------------------ |
| 400   | invalid\_request              | 無効な要求本文。client\_id、credential\_type、username、otp、realmのすべてが必要で、これ以外があってはなりません。 |
| 401   | unauthorized\_client          | クロスオリジンログインは許可されていません。                                                         |
| 400   | unsupported\_credential\_type | 不明な資格情報タイプのパラメーター。                                                             |
| 400   | invalid\_request              | 不明な領域の存在しない接続。                                                                 |
| 403   | access\_denied                | 間違ったメールアドレスまたはパスワード。                                                           |
| 403   | access\_denied                | 認証エラー。                                                                         |
| 403   | blocked\_user                 | ブロックされたユーザー。                                                                   |
| 401   | password\_leaked              | 使用しているパスワードは（このアプリケーションではなく）データ侵害により以前開示されたため、このログイン試行はブロックされました。              |
| 429   | too\_many\_attempts           | 複数の連続したログイン試行の後にアカウントがブロックされました。ご希望の連絡方法を使用して、ブロック解除の手順を記載した通知を送信しました。         |
| 429   | too\_many\_attempts           | 疑わしいログイン動作を検知したため、今後の試行はブロックされます。管理者に問い合わせてください。                               |

## ブラウザーとの互換性

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

## もっと詳しく

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