Authentification sans mot de passe avec connexion intégrée pour les SPA

Décrit comment mettre en œuvre l’authentification sans mot de passe avec connexion intégrée dans les SPA.

La connexion intégrée pour les applications Web utilise l’authentification inter-origines, sauf si vous configurez un domaine personnalisé pour votre tenant. L’authentification inter-origines repose sur des cookies tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.

​

Utiliser les SDK d’Auth0 pour implémenter la connexion intégrée

Vous pouvez implémenter la connexion sans mot de passe à l’aide du widget Lock d’Auth0 ou, si vous souhaitez un contrôle total de l’expérience utilisateur, l’implémenter avec Auth0.js :

• Lock for Web
• Référence d’Auth0.js

​

Configurer le partage de ressources inter-origines (CORS)

Pour des raisons de sécurité, l’URL d’origine de votre application doit figurer parmi les URL autorisées. Si vous ne l’avez pas déjà ajoutée aux Allowed Callback URLS de votre application, vous devrez l’ajouter à la liste des Allowed Origins (CORS).

1. Accédez à Auth0 Dashboard > Applications > Applications, puis sélectionnez le nom de votre application pour afficher ses paramètres.
2. Repérez Allowed Origins (CORS), entrez l’URL d’origine de votre application, puis sélectionnez Save Changes.

​

Personnaliser la MFA

Personnalisez MFA avec des flux intégrés. Utilisez la MFA API pour permettre aux utilisateurs d’inscrire le facteur pris en charge par votre application de leur choix et de répondre à la demande de vérification correspondante.

Lorsque vous utilisez Lock for Web, le point de terminaison oauth/token renvoie l’erreur mfa_required et inclut le mfa_token nécessaire pour utiliser la MFA API, ainsi que le paramètre mfa_requirements contenant la liste des méthodes d’authentification actuellement prises en charge par votre application :

{
  "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"} //fonctionne uniquement avec challenge
    ]
  }
}

Utilisez le mfa_token pour effectuer une requête vers le point de terminaison mfa/authenticator afin de lister tous les facteurs que l’utilisateur a déjà configurés et de repérer celui dont le type correspond à celui pris en charge par votre application. Vous devez aussi obtenir le authenticator_type correspondant pour émettre des demandes de vérification :

[
  {
    "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
  }
]

Appliquez ensuite le défi MFA en appelant le point de terminaison request/mfa/challenge.

Personnalisez davantage votre flux MFA avec Auth0 Actions. Pour en savoir plus, consultez Déclencheurs des Actions : post-challenge - objet API.