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

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

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

* [Lock for Web](/ja/docs/libraries/lock)
* [Auth0.js リファレンス](/ja/docs/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 > Applications > Applications](https://manage.auth0.com/#/applications) に移動し、アプリケーションの設定を表示するには、アプリケーションの名前を選択します。
2. **Allowed Origins (CORS)** を見つけて、アプリケーションの[オリジン URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin)を入力し、**Save Changes** を選択します。

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

<ReleaseStageNotice feature="リソース所有者パスワードグラント、埋め込み、またはリフレッシュトークンフローでカスタマイズ可能な MFA" stage="ea" terms="true" contact="Auth0 サポート" />

埋め込みフローで<Tooltip tip="多要素認証（MFA）: SMS で受け取るコードなど、ユーザー名とパスワードに加えて別の要素を使用するユーザー認証プロセスです。" cta="用語集を表示" href="/ja/docs/glossary?term=MFA">MFA</Tooltip>をカスタマイズできます。MFA API を使用すると、アプリケーションでサポートされている認証要素の中から、ユーザーが選択した要素で登録や認証チャレンジを行えるようになります。

[Lock for Web](/ja/docs/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 Triggers: post-challenge - API Object](/ja/docs/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object) を参照してください。