Auth0 get jwt access token

Cela s’appuie sur le code de mon précédent article sur la configuration de l’authentification dans une SPA React.

Dans cet exemple, l’application récupère les données utilisateur d’Auth0, mais elle n’a pas de jeton d’accès pour nous permettre d’authentifier une API.

Cela passera par la mise en place d’une API dans Auth0 afin que le client puisse obtenir un jeton d’accès JWT (JSON Web Token) qui peut être utilisé pour prouver l’authentification à l’aide d’une API distincte.

À partir de la base de l’article précédent, la fonction peut être étendue pour fournir le jeton d’authentification que la classe reçoit après la connexion.

Pour ce faire, une fonction permet de demander le token au client. Il s’agit d’un appel asynchrone qui nous permet de réutiliser le modèle de demande d’un jeton à partir de l’instance et de stockage dans une valeur d’état avec le hook afin qu’il puisse être rendu une fois qu’il est disponible.

Ajoutez une valeur d’état pour stocker le jeton d’accès, une fonction pour obtenir et stocker le jeton. Ajoutez à la fois la nouvelle fonction et la valeur d’état à la signature de la fonction et à la valeur de retour.

Affichez ces nouvelles valeurs dans la vue en l’ajoutant au bas de l’élément.

Lorsque le jeton s’affiche à l’écran, la sortie n’est pas le JWT qui peut être utilisé pour s’authentifier auprès d’une API externe. Au lieu de cela, il s’agit d’un jeton opaque qui ressemble à ceci :

En effet, sans qu’aucune API ne soit spécifiée en paramètre lors de la configuration du client Auth0, Auth0 renvoie un jeton opaque qui n’est utilisable que pour accéder aux informations d’identité stockées dans Auth0.

Pour obtenir un jeton d’accès qui peut être utilisé pour s’authentifier auprès d’une API, Auth0 doit connaître cette API. Pour ce faire, nous devons configurer l’API dans le locataire Auth0.

Où l’application dans Auth0 représente le point d’entrée de l’utilisateur dans le système, l’API représente la ressource qui est sécurisée/accédée.
Une API doit être spécifiée pour obtenir un jeton d’accès. Chaque jeton d’accès est valide pour une API.

Sélectionnez API dans le menu
de navigation

Créer une API

Dans la boîte de dialogue Créer une API, entrez un nom pour l’API ainsi qu’un identificateur.
Auth0 suggère d’utiliser une URL comme identifiant, mais vous pouvez utiliser n’importe quel identificateur que vous voulez. Vous devez cependant savoir que :

• L’identificateur doit être unique dans toutes les API de votre locataire.
• L’identifiant ne peut pas être modifié.
• Vous inclurez du code qui sera exécuté dans le navigateur.

Une fois que vous avez cliqué sur Créer une API, notez l’identifiant que vous avez utilisé. Les paramètres par défaut de cette API conviennent aux fins de cette blog.

Une fois l’API configurée, l’étape suivante consiste à configurer la SPA pour l’utiliser. Copiez l’identificateur que vous avez utilisé pour l’API.

De retour dans le code SPA, ajoutez-le aux paramètres passés au constructeur.

Exécutez le code et reconnectez-vous.
Auth0 affichera une page demandant à l’utilisateur d’autoriser l’application agissant en son nom. Ne vous inquiétez pas, cela peut être désactivé afin que vos utilisateurs de production n’aient pas à le voir lorsqu’ils accèdent à vos propres API. Cliquez sur la coche verte pour revenir à la SPA.

Désormais, lorsque vous cliquez sur le bouton Obtenir le jeton d’accès, le jeton qui s’affiche à l’écran est un JWT complet.

Pour interroger le JWT, copiez-le et collez-le dans le champ de jwt.io. Cela affichera le jeton décodé. Tout ce qui se trouve dans le jeton est là pour une raison, mais 2 champs qui méritent d’être notés pour cet exemple sont les champs et champs.
Le champ est l’identificateur d’application Auth0 et le champ inclut l’identificateur d’audience qui a été transmis au constructeur ainsi que le point de terminaison pour accéder aux informations utilisateur stockées dans Auth0.

Vous pouvez trouver le code pour cela sur GitHub à cette balise