Ajouter la connexion en utilisant le flux implicite avec Form Post

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

Vous pouvez ajouter une connexion à votre application Web monopage (SPA) à l’aide du flux implicite avec Form Post. Pour savoir comment fonctionne le flux et pourquoi vous devriez l’utiliser, consultez Flux implicite avec Form Post.

Utilisez le flux implicite avec Form Post pour les cas d’utilisation concernant uniquement la connexion; si vous devez demander des jetons d’accès tout en connectant l’utilisateur pour pouvoir appeler votre API, utilisez le flux de code d’autorisation avec une Proof Key for Code Exchange (PKCE). Pour en apprendre davantage, consultezFlux de code d’autorisation avec Proof Key for Code Exchange (PKCE).

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

• SDK Express OpenID Connect : la manière la plus simple d’implémenter le flux, qui fera le gros du travail à votre place. Si vous utilisez notre trousse SDK pour Javascript, assurez-vous d’implémenter des mesures d’atténuation adaptées à votre architecture. Pour en apprendre davantage, consultez Référence Auth0.js v9.
• Authentication API : Si vous préférez créer votre propre solution, continuez à lire pour savoir comment appeler notre API directement.

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

​

Prérequis

Enregistrez votre application auprès d’Auth0. Pour en apprendre davantage, consultez Enregistrer les applications Web monopages.

• Sélectionnez Application Web monopage comme Type d’application.
• Ajoutez une URL de rappel autoriséede {https://yourApp/callback}.
• Assurez-vous que les Grant Types (Types d’autorisation) de votre application comprennent Implicit (Implicite). Pour en savoir plus, lisez Mettre à jour les types d’autorisation.

​

Autoriser l’utilisateur

Demandez l’autorisation de l’utilisateur et redirigez-le vers votre application. Pour lancer le flux, vous aurez besoin de l’autorisation de l’utilisateur. Cette étape peut comprendre un ou plusieurs des procédés suivant :

• Authentification de l’utilisateur;
• Rediriger l’utilisateur vers un fournisseur d’identité pour gérer l’authentification;
• Vérification des sessions actives d’authentification unique (SSO);
• Obtenir le consentement de l’utilisateur pour le niveau de permission demandé, sauf si obtenu précédemment.

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 d’identifiant qu’Auth0 va retourner (code ou jeton). Pour ce flux implicite, la valeur peut être id_token, token, ou id_token token. Plus spécifiquement, id_token renvoie un jeton d’ID, et token renvoie un jeton d’accès.
response_mode	Spécifie la méthode avec laquelle 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 seront chiffrés comme des valeurs de formulaire HTML qui sont transmises via la méthode HTTP POST et chiffrées dans le corps en utilisant le format application/x-www-form-urlencoded`
client_id	L’ID client de votre application. Vous pouvez trouver cette valeur dans les paramètres de l’application.
redirect_uri	URL vers laquelle Auth0 redirigera le navigateur après que l’autorisation ait été accordée par l’utilisateur. Vous devez spécifier cette URL en tant qu’URL de rappel valide dans les paramètre de l’application. <br /&gt ; <br /&gt ; Attention: Conformément à la spécification OAuth 2.0, Auth0 supprime tout ce qui se trouve après le hachage et n’accepte pas les fragments.
scope	Indique les permissions pour lesquels vous souhaitez demander une autorisation, ce qui dicte les demandes (ou les attributs d’utilisateur) que vous souhaitez voir renvoyées. Ils doivent être séparés par un espace. Vous pouvez demander n’importe lequel des permissions standards d’OpenID Connect (OIDC) sur les utilisateurs, comme profile and email, des demandes personnalisées conformes à un format namespace, ou n’importe quelles permissions prises en charge par l’API cible (par exemple,read:contacts).
state	(recommandé) Une chaîne alphanumérique arbitraire opaque que votre application ajoute à la requête initiale qu’Auth0 inclut lorsqu’elle redirige vers votre application. Pour voir comment utiliser cette valeur pour prévenir les attaques par falsification de requête intersites , voir la section Atténuer les attaques par falsification de requête intersites avec les paramètres d’état.
nonce	(obligatoire pour le paramètre response_type contenant id_token token. Une chaîne cryptographiquement aléatoire que votre application ajoute à la requête initiale et qu’Auth0 inclut dans le jeton d’ID, utilisée pour prévenir les attaques par réinsertion de jeton.
connection	( facultatif) Force l’utilisateur à se connecter avec une connexion spécifique. Par exemple, vous pouvez transmettre une valeur de github pour envoyer l’utilisateur directement à GitHub et se connecter avec son compte. Si la valeur n’est pas spécifiée, l’utilisateur voit l’écran de verrouillage Auth0 avec toutes les connexions configurées. Vous pouvez voir une liste de vos connexions configurées dans l’onglet Connections (connexions) de votre application.
organization	(facultatif) Identifiant de l’organisation à utiliser pour authentifier un utilisateur. S’il n’est pas fourni et que votre application est configurée pour afficher l’invite de l’organisation, l’utilisateur pourra entrer le nom de l’organisation lors de l’authentification.
invitation	(facultatif) Identifiant du ticket d’invitation de l’organisation. Lorsque vous invitez un membre à rejoindre une organisation, votre application doit gérer l’acceptation de l’invitation en transmettant les combinaisons de valeurs clés invitation et organization quand l’utilisateur accepte l’invitation.

Par exemple, votre extrait HTML pour l’URL d’autorisation lors de l’ajout d’une connexion à votre application pourrait ressembler à ceci :

​

Réponse

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

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 de ce que vous avez demandé comme response_type.

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

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

Validez vos jetons avant de les enregistrer. Pour en savoir plus, lisez Valider les jetons d’ID et Valider les jetons d’accès.

Les jetons d’ID contiennent des informations de l’utilisateur qui doivent être décodées et extraites.

​

Cas d’utilisation

​

Demande d’authentification de base

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

Cela renverra un jeton d’ID, que vous pourrez analyser à partir de votre URL de redirection.

​

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

Outre l’authentification habituelle de l’utilisateur, cet exemple montre comment demander des informations supplémentaires sur l’utilisateur, telles que son nom et sa photo.

Pour demander le nom et la photo de l’utilisateur, vous devez ajouter les permissions appropriées lors de l’autorisation de l’utilisateur :

Désormais, votre jeton d’ID contiendra le nom et la photo demandés. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit :

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

​

Demande de connexion d’un utilisateur avec GitHub

En plus de l’authentification habituelle des utilisateurs, cet exemple montre comment envoyer les utilisateurs directement à un fournisseur d’identité sociale, tel que GitHub. Pour que cet exemple puisse fonctionner, vous devez aller vers Auth0 Dashboard > Authentification > Médias sociaux et configurez la connexion appropriée. Obtenez le nom de la connexion à partir de l’onglet Paramètres.

Pour envoyer les utilisateurs directement vers l’écran de connexion de GitHub, vous devez passer le paramètre de connection et régler sa valeur pour le nom de la connexion (dans ce cas, github) en autorisant l’utilisateur :

À présent, votre jeton d’ID contiendra une sous-demande avec l’ID unique de l’utilisateur retourné par GitHub. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit :

{
  "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’applications Authorization OAuth 2.0
• Protocole OpenID Connect
• Jetons
• Atténuer les attaques par réinsertion lors de l’utilisation du flux implicite
• Enregistrement d’applications Web à page unique
• Mettre à jour les types d’autorisation