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

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

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

​

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

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

• Lock for Web
• Auth0.jsリファレンス

​

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

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

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

​

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 トリガー: post-challenge - API オブジェクト をご覧ください。