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

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

Web アプリケーションの埋め込みログインでは、テナントにカスタムドメインを設定していない限り、クロスオリジン認証が使用されます。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを実行できるようにするため、サードパーティ Cookie を使用します。

​

埋め込みログインの実装に Auth0 の SDK を使用する

パスワードレスログインは Auth0 の Lock ウィジェットを使って実装できます。また、ユーザー体験を完全に制御する必要がある場合は、Auth0.js を使用して実装することもできます。

• Web 向け Lock
• Auth0.js v9 リファレンス

​

Cross-Origin Resource Sharing (CORS) を設定する

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

1. Auth0 Dashboard > Applications > Applications に移動し、アプリケーションの設定を表示するには、アプリケーションの名前を選択します。
2. Allowed Origins (CORS) を見つけて、アプリケーションのオリジン URLを入力し、Save Changes を選択します。

​

MFA をカスタマイズ

埋め込みフローでMFAをカスタマイズできます。MFA API を使用すると、アプリケーションでサポートされている認証要素の中から、ユーザーが選択した要素で登録や認証チャレンジを行えるようになります。

Lock for Web を使用する場合、oauth/token エンドポイントは mfa_required エラーを返し、MFA API の使用に必要な mfa_token と、アプリケーションが現在サポートしている認証要素の一覧を含む mfa_requirements パラメーターを返します。

{
  "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 エンドポイントを呼び出し、ユーザーが登録済みのすべての認証要素を一覧表示して、アプリケーションでサポートしている type と一致するものを特定します。チャレンジを発行するには、対応する authenticator_type も取得する必要があります。

[
  {
    "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 エンドポイントを呼び出して、MFA チャレンジを適用します。

Auth0 Actions を使用すると、MFA フローをさらにカスタマイズできます。詳細については、Actions Triggers: post-challenge - API Object を参照してください。