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

> シングルページアプリケーション（SPA）で、埋め込みログインを使用してパスワードレス認証を実装する方法を説明します。

# SPA向け埋め込みパスワードレス認証

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

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

<div id="using-auth0s-sdks-to-implement-embedded-login">
  ## Auth0のSDKを使用して埋め込みログインを実装する
</div>

Auth0のLockウィジェットを使用して<Tooltip tip="パスワードレス: パスワードを最初の認証要素として使わない認証形式。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Passwordless">パスワードレス</Tooltip>ログインを実装できます。あるいは、ユーザー体験を完全に制御する必要がある場合は、Auth0.jsを使用して実装することもできます。

* [Lock for Web](/docs/ja-jp/libraries/lock)
* [Auth0.jsリファレンス](/docs/ja-jp/libraries/auth0js)

<div id="configure-cross-origin-resource-sharing-cors">
  ### Cross-Origin Resource Sharing (CORS) を設定する
</div>

セキュリティ上、アプリのオリジン URL は承認済み URL として登録されている必要があります。まだアプリケーションの **Allowed Callback URLS** に追加していない場合は、**Allowed Origins (CORS)** のリストにも追加する必要があります。

1. [Auth0 Dashboard > アプリケーション > アプリケーション](https://manage.auth0.com/#/applications) に移動し、アプリケーション名を選択して設定を表示します。
2. **Allowed Origins (CORS)** を見つけて、アプリケーションの [オリジン URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) を入力し、**変更を保存** を選択します。

<div id="customize-mfa">
  ## MFAをカスタマイズ
</div>

<ReleaseStageNotice feature="Resource Owner Password Grant、埋め込み、またはリフレッシュトークンのフローでカスタマイズ可能なMFA" stage="ea" terms="true" contact="Auth0 Support" />

埋め込みフローで<Tooltip tip="多要素認証（MFA）: SMSで送信されるコードなど、ユーザー名とパスワードに加えて認証要素を使用するユーザー認証プロセス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=MFA">MFA</Tooltip>をカスタマイズできます。MFA APIを使用すると、ユーザーはアプリケーションでサポートされている任意の認証要素を登録し、その認証要素で認証できるようになります。

[Lock for Web](/docs/ja-jp/libraries/lock#2-authenticating-and-getting-user-info)を使用する場合、`oauth/token`エンドポイントは`mfa_required`エラーを返し、MFA APIの利用に必要な`mfa_token`と、アプリケーションが現在サポートしている認証器の一覧を含む`mfa_requirements`パラメーターを返します。

```json lines theme={null}
{
  "error": "mfa_required",
  "error_description": "Multifactor authentication required",
  "mfa_token": "Fe26...Ha",
  "mfa_requirements": {
    "challenge": [
      { "type": "otp" },
      { "type": "push-notification" },
      { "type": "phone" },
      { "type": "recovery-code" }
      { "type": "email"} //チャレンジでのみ使用可能
    ]
  }
}
```

`mfa_token` を使用して [`mfa/authenticator`](https://auth0.com/docs/api/authentication/muti-factor-authentication/list-authenticators) エンドポイントを呼び出し、ユーザーが登録済みの認証要素をすべて取得して、アプリケーションがサポートする `type` と一致するものを特定します。また、チャレンジを発行するには、対応する `authenticator_type` も取得する必要があります:

```json lines theme={null}
[
  {
    "type": "recovery-code",
    "id": "recovery-code|dev_qpOkGUOxBpw6R16t",
    "authenticator_type": "recovery-code",
    "active": true
  },
  {
    "type": "otp",
    "id": "totp|dev_6NWz8awwC8brh2dN",
    "authenticator_type": "otp",
    "active": true
  }
]
```

[`request/mfa/challenge`](https://auth0.com/docs/api/authentication/muti-factor-authentication/request-mfa-challenge) エンドポイントを呼び出して、MFA チャレンジを必須にします。

Auth0 Actions を使用すると、MFA フローをさらにカスタマイズできます。詳しくは、[Actions トリガー: post-challenge - API オブジェクト](/docs/ja-jp/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object) をご覧ください。