Ajouter l’authentification à l’aide du flux implicite avec Form Post

Découvrez comment ajouter l’authentification à votre application monopage (SPA) à l’aide du flux implicite avec Form Post.

Vous pouvez ajouter la connexion à votre application monopage (SPA) à l’aide du flux implicite avec Form Post. Pour en savoir plus sur le fonctionnement de ce flux et pourquoi vous devriez l’utiliser, consultez Implicit Flow with Form Post.

Utilisez le flux implicite avec Form Post pour les cas d’utilisation de connexion uniquement; si vous devez demander des jetons d’accès lors de la connexion de l’utilisateur afin de pouvoir appeler votre API, utilisez le flux de code d’autorisation avec PKCE. Pour en savoir plus, consultez Authorization Code Flow with Proof Key for Code Exchange (PKCE).

Pour implémenter le flux implicite avec Form Post, vous pouvez utiliser les ressources suivantes :

• Express OpenID Connect SDK : la façon la plus simple d’implémenter le flux; il prendra en charge la plus grande partie du travail pour vous. Si vous utilisez notre SDK JavaScript, assurez-vous de mettre en œuvre des mesures d’atténuation adaptées à votre architecture. Pour en savoir plus, consultez Auth0.js Reference.
• Authentication API : si vous préférez créer votre propre solution, poursuivez votre lecture pour apprendre à appeler directement notre API.

Après une connexion réussie, votre application aura accès au jeton d’identité de l’utilisateur. Le ID token contiendra les renseignements de base du profil utilisateur.

​

Prérequis

Enregistrez votre application auprès d’Auth0. Pour en savoir plus, consultez Enregistrer des applications monopage.

• Sélectionnez Application monopage comme Type d’application.
• Ajoutez une Allowed Callback URL : {https://yourApp/callback}.
• Assurez-vous que les types d’octroi de votre application incluent Implicit. Pour en savoir plus, consultez Mettre à jour les types d’octroi.

​

Autoriser l’utilisateur

Demandez l’autorisation de l’utilisateur et redirigez-le vers votre application. Pour amorcer le flux, vous devrez obtenir l’autorisation de l’utilisateur. Cette étape peut inclure un ou plusieurs des processus suivants :

• Authentifier l’utilisateur;
• Rediriger l’utilisateur vers un fournisseur d’identité pour prendre en charge l’authentification;
• Vérifier s’il existe des sessions d’authentification unique (SSO) actives;
• Obtenir le consentement de l’utilisateur pour le niveau d’autorisation demandé, sauf si ce consentement a déjà été accordé.

Pour autoriser l’utilisateur, votre application doit envoyer l’utilisateur à l’URL d’autorisation.

​

Exemple d’URL d’autorisation

​

Paramètres

Nom du paramètre	Description
response_type	Indique le type de justificatif qu’Auth0 renverra (code ou token). Pour le flux implicite, la valeur peut être id_token, token ou id_token token. Plus précisément, id_token renvoie un ID Token, et token renvoie un Jeton d’accès.
response_mode	Spécifie la façon dont les paramètres de réponse doivent être renvoyés. Pour des raisons de sécurité, la valeur doit être form_post. Dans ce mode, les paramètres de réponse sont encodés comme des valeurs de formulaire HTML, transmises au moyen de la méthode HTTP POST et encodées dans le corps à l’aide du format application/x-www-form-urlencoded.
client_id	L’ID client de votre application. Vous trouverez cette valeur dans les paramètres de l’application.
redirect_uri	L’URL vers laquelle Auth0 redirigera le navigateur une fois l’autorisation accordée par l’utilisateur. Vous devez spécifier cette URL comme URL de rappel valide dans les paramètres de l’application. Avertissement : Conformément à la spécification OAuth 2.0, Auth0 supprime tout ce qui suit le hash et ne tient pas compte des fragments.
scope	Spécifie les scopes pour lesquels vous souhaitez demander une autorisation, et qui déterminent quelles claims (ou quels attributs utilisateur) vous souhaitez obtenir en retour. Ils doivent être séparés par un espace. Vous pouvez demander n’importe lequel des scopes OpenID Connect (OIDC) standard concernant les utilisateurs, comme profile et email, des claims personnalisées conformes à un format avec espace de noms, ou tout scope pris en charge par l’API cible (par exemple, read:contacts).
state	(recommandé) Une chaîne alphanumérique arbitraire et opaque que votre application ajoute à la requête initiale et qu’Auth0 inclut lors de la redirection vers votre application. Pour savoir comment utiliser cette valeur afin de prévenir les attaques de falsification de requête intersites (CSRF), consultez Mitigate CSRF Attacks With State Parameters.
nonce	(obligatoire si response_type contient id_token token, sinon recommandé) Une chaîne aléatoire générée de façon cryptographiquement sûre que votre application ajoute à la requête initiale et qu’Auth0 inclut dans l’ID Token, utilisée pour prévenir les attaques par rejeu de jeton.
connection	(facultatif) Force l’utilisateur à se connecter avec une connexion précise. Par exemple, vous pouvez transmettre la valeur github pour envoyer l’utilisateur directement vers GitHub afin qu’il ouvre une session avec son compte GitHub. Lorsqu’elle n’est pas spécifiée, l’utilisateur voit l’écran Auth0 Lock avec toutes les connexions configurées. Vous pouvez consulter la liste de vos connexions configurées dans l’onglet Connexions de votre application.
organization	(facultatif) ID de l’organisation à utiliser lors de l’authentification d’un utilisateur. S’il n’est pas fourni et que votre application est configurée pour Afficher l’invite d’organisation, l’utilisateur pourra saisir le nom de l’organisation pendant l’authentification.
invitation	(facultatif) ID du ticket d’invitation de l’organisation. Lorsque vous invitez un membre à une organisation, votre application doit gérer l’acceptation de l’invitation en transmettant les paires clé-valeur invitation et organization lorsque l’utilisateur accepte l’invitation.

À titre d’exemple, l’extrait HTML de votre URL d’autorisation pour ajouter l’ouverture de session à votre application pourrait ressembler à ceci :

​

Réponse

Si tout se passe bien, vous recevrez une réponse HTTP 302. Les identifiants demandés sont encodés dans le corps de la réponse :

HTTP/1.1 302 Found
Content-Type: application/x-www-form-urlencoded
id_token=eyJ...acA&
state=xyzABC123

Notez que les valeurs renvoyées dépendent du response_type que vous avez demandé.

Type de réponse	Composants
id_token	ID Token
token	Jeton d’accès (plus les valeurs expires_in et token_type)
id_token token	ID Token, Jeton d’accès (plus les valeurs expires_in et token_type)

Auth0 renverra également toute valeur state incluse dans votre appel à l’URL d’autorisation.

Validez vos jetons avant de les enregistrer. Pour savoir comment faire, consultez Valider les ID Tokens et Valider les jetons d’accès.

Les jetons d’identité contiennent des renseignements sur l’utilisateur qui doivent être décodés et extraits.

​

Cas d’utilisation

​

Requête d’authentification de base

Cet exemple montre la requête la plus simple que vous pouvez effectuer lorsque vous autorisez l’utilisateur à l’étape 1. Elle affiche l’écran de connexion d’Auth0 et permet à l’utilisateur de se connecter avec l’une de vos connexions configurées :

Cette opération renverra un jeton d’identité, que vous pourrez extraire de votre URL de redirection.

​

Demander le nom de l’utilisateur et sa photo de profil

En plus de l’authentification habituelle, cet exemple montre comment demander des renseignements supplémentaires sur l’utilisateur, comme son nom et sa photo de profil.

Pour demander le nom et la photo de profil de l’utilisateur, vous devez ajouter les scopes appropriés lorsque vous autorisez l’utilisateur :

Maintenant, votre jeton d’identité contiendra les claims name et picture demandés. Lorsque vous décoderez le jeton d’identité, il ressemblera à :

{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}

​

Demander à l’utilisateur de se connecter avec GitHub

En plus du processus d’authentification habituel, cet exemple montre comment rediriger les utilisateurs directement vers un fournisseur d’identité social, comme GitHub. Pour que cet exemple fonctionne, vous devez accéder à Auth0 Dashboard > Authentication > Social et configurer la connexion appropriée. Récupérez le nom de la connexion dans l’onglet Settings.

Pour rediriger les utilisateurs directement vers l’écran de connexion à GitHub, vous devez transmettre le paramètre connection et définir sa valeur sur le nom de la connexion (dans ce cas, github) lors de l’autorisation de l’utilisateur :

Désormais, votre ID Token contiendra une revendication sub avec l’identifiant unique de l’utilisateur renvoyé par GitHub. Lorsque vous décoderez l’ID Token, il ressemblera à ceci :

{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}

​

En savoir plus

• Cadre d’autorisation OAuth 2.0
• Protocole OpenID Connect
• Jetons
• Atténuer les attaques par rejeu lors de l’utilisation du flux implicite
• Enregistrer des applications Web monopage
• Mettre à jour les types d’octroi