Passer au contenu principal
Dans ces exemples, nous utilisons le flux de code d’autorisation pour authentifier un utilisateur et demander les permissions et les jetons nécessaires. Pour plus de détails sur les paramètres des requêtes ou pour savoir comment implémenter entièrement ce flux, lisez notre tutoriel : Ajouter une connexion aux applications Web standard.

​
Authentifier un utilisateur et faire des demandes standard

Dans cet exemple, nous souhaitons authentifier un utilisateur et obtenir des détails sur cet utilisateur qui nous permettront de personnaliser notre interface utilisateur. Pour ce faire, nous devons obtenir un jeton d’ID contenant le nom, le surnom, la photo de profil et les informations de courrier électronique de l’utilisateur.
  1. Lancer le flux d’authentification en envoyant l’utilisateur à l’URL d’autorisation : 
    https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=openid%20profile%20email&
  state=YOUR_STATE_VALUE
    Notez que dans cet exemple :
    • Le paramètre response_type comprend une valeur :
      • code : parce que nous utilisons le flux d’application Web standard, notre demande initiale concerne un code d’autorisation; lorsque nous demandons nos jetons à l’aide de ce code, nous recevons le jeton d’ID dont nous avons besoin pour l’authentification.
    • Le paramètre scope comprend trois valeurs; les permissions OIDC demandées :
      • openid : pour indiquer que l’application a l’intention d’utiliser OIDC pour vérifier l’identité de l’utilisateur.
      • profile : pour obtenir le name, le nickname et la picture.
      • email : pour accéder à email et email_verified.
  2. Une fois que l’utilisateur a consenti (si nécessaire) et qu’Auth0 a redirigé vers votre application, demandez des jetons.
  3. Extrayez le jeton d’ID de la réponse et décodez-le. Vous devriez voir les demandes suivantes : 
    {
  "name": "John Doe",
  "nickname": "john.doe",
  "picture": "https://myawesomeavatar.com/avatar.png",
  "updated_at": "2017-03-30T15:13:40.474Z",
  "email": "john.doe@test.com",
  "email_verified": false,
  "iss": "https://{yourDomain}/",
  "sub": "auth0|USER-ID",
  "aud": "{yourClientId}",
  "exp": 1490922820,
  "iat": 1490886820,
  "nonce": "crypto-value",
  "at_hash": "IoS3ZGppJKUn3Bta_LgE2A"
}
    Votre application peut désormais récupérer les attributs utilisateur et les utiliser pour personnaliser votre interface utilisateur.

​
Demander un accès API personnalisé

Dans cet exemple, nous demandons une permission personnalisée pour une API de calendrier qui autorisera l’application appelante à lire les rendez-vous de l’utilisateur. Pour ce faire, nous souhaitons obtenir un jeton d’accès contenant la permission appropriée pour lire les rendez-vous à partir de l’API. Notez que la demande d’un jeton d’accès ne dépend pas de la demande d’un jeton d’ID. Avant d’utiliser une API personnalisée, vous devez savoir quelles permissions sont disponibles pour l’API que vous appelez. Si l’API personnalisée est sous votre contrôle, vous devez enregistrer à la fois votre application et votre API auprès d’Auth0 et définir les permissions de votre API à l’aide d’Auth0 Dashboard. Vous pouvez également utiliser des permissions définies pour personnaliser l’invite de consentement pour vos utilisateurs.
  1. Lancer le flux d’autorisation en envoyant l’utilisateur à l’URL d’autorisation : 
    https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}& 
  scope=read:appointments&
  audience=YOUR_API_AUDIENCE&
  state=YOUR_STATE_VALUE
    Notez que dans cet exemple :
    • Le paramètre response_type comprend toujours une valeur :
      • code : parce que nous utilisons le flux d’application Web standard, notre demande initiale concerne un code d’autorisation; lorsque nous demandons nos jetons à l’aide de ce code, nous recevons le jeton d’accès que nous pouvons utiliser pour appeler notre API.
    • Le paramètre scope comprend une valeur; les permissions API demandées :
      • read:appointments : pour nous permettre de lire les rendez-vous de l’utilisateur depuis l’API.
    • Le paramètre audience est nouveau et comprend une valeur :
      • L’identifiant unique de l’API à partir duquel nous souhaitons lire les rendez-vous de l’utilisateur.
  2. Comme dans l’exemple précédent, une fois que l’utilisateur a consenti (si nécessaire) et qu’Auth0 a redirigé vers votre application, demandez des jetons.
  3. Extrayez le jeton d’accès de la réponse et appelez l’API en utilisant le jeton d’accès comme informations d’identification.

​
Authentifier un utilisateur et faire des demandes standard et un personnalisé à une API

Dans cet exemple, nous combinons nos deux exemples précédents pour authentifier un utilisateur, faire des demandes standard et également demander une permission personnalisée pour une API de calendrier qui permettra à l’application appelante de lire les rendez-vous de l’utilisateur. Pour cela, obtenez deux jetons :
  • Un jeton d’ID qui contient :
    • Nom d’utilisateur
    • Surnom
    • Photo du profil
    • Informations de courriel
  • Jeton d’accès contenant la permission appropriée pour lire les rendez-vous à partir de l’API. Notez que la demande d’un jeton d’accès ne dépend pas de la demande d’un jeton d’ID.
Avant d’utiliser une API personnalisée, vous devez savoir quelles permissions sont disponibles pour l’API que vous appelez. Si l’API personnalisée est sous votre contrôle, vous devez enregistrer à la fois votre application et votre API auprès d’Auth0 et définir les permissions de votre API à l’aide d’Auth0 Dashboard. Vous pouvez également utiliser des permissions définies pour personnaliser l’invite de consentement pour vos utilisateurs.
  1. Lancer le flux d’authentification en envoyant l’utilisateur à l’URL d’autorisation : 
    https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}& 
  scope=openid%20profile%20email%20read:appointments&
  audience=YOUR_API_AUDIENCE&
  state=YOUR_STATE_VALUE
    Notez que dans cet exemple :
    • Le paramètre response_type comprend toujours une valeur :
      • code : parce que nous utilisons le flux d’application Web standard, notre demande initiale concerne un code d’autorisation; lorsque nous demandons nos jetons à l’aide de ce code, nous recevons le jeton d’ID dont nous avons besoin pour l’authentification et le jeton d’accès que nous pouvons utiliser pour appeler notre API.
    • Le paramètre scope est utilisé à la fois pour les permissions OIDC et les permissions des API, il inclut donc maintenant quatre valeurs :
      • openid : pour indiquer que l’application a l’intention d’utiliser OIDC pour vérifier l’identité de l’utilisateur.
      • profile : pour obtenir le name, le nickname et la picture.
      • email : pour accéder à email et email_verified.
      • read:appointments : pour nous permettre de lire les rendez-vous de l’utilisateur depuis l’API.
    • Le paramètre audience comprend une valeur :
      • L’identifiant unique de l’API à partir de laquelle nous souhaitons lire les rendez-vous de l’utilisateur
  2. Comme dans les exemples précédents, une fois que l’utilisateur a consenti (si nécessaire) et qu’Auth0 a redirigé vers votre application, demandez des jetons.
  3. Extrayez le jeton d’ID de la réponse, décodez-le, récupérez les attributs utilisateur et utilisez-les pour personnaliser votre interface utilisateur.
  4. Extrayez le jeton d’accès de la réponse et appelez l’API en utilisant le jeton d’accès comme informations d’identification.

​
Ajouter des demandes personnalisées à un jeton

Dans cet exemple, nous ajoutons la couleur préférée d’un utilisateur et sa méthode de contact préférée au jeton d’ID. Pour cela, nous créons une Action pour personnaliser le jeton d’ID en ajoutant ces demandes. Une fois ajoutées, nous pourrons également obtenir les demandes personnalisées lors de l’appel du point de terminaison /userinfo (bien que l’Action ne s’exécute que pendant le processus d’authentification).
Auth0 accepte les demandes avec ou sans espace de noms, mais avec certaines restrictions (voir Restrictions générales). Pour éviter les collisions de noms, il est recommandé d’utiliser des demandes avec espace de noms. En cas de collision, la transaction n’échouera pas, mais votre demande personnalisée ne sera pas ajoutée à vos jetons.
Supposez que :
  • À un moment donné, l’utilisateur a sélectionné une méthode preferred_contact d’email et une favorite_color``red et que nous l’avons enregistrée dans le cadre des user_metadata de l’utilisateur.
  • Nous avons utilisé la Management API ou le Dashboard pour définir des informations spécifiques à l’application pour cet utilisateur.
Dans ce cas le profil utilisateur normalisé stocké par Auth0 est : 
{
  "email": "jane@example.com",
  "email_verified": true,
  "user_id": "custom|123",
  "favorite_color": "blue",
  "user_metadata": {
    "preferred_contact": "email"
  }
}
Pour ce profil, Auth0 renverrait normalement les demandes de jeton d’ID suivantes à votre application : 
{
  "email": "jane@example.com",
  "email_verified": true,
  "iss": "https://my-domain.auth0.com/",
  "sub": "custom|123",
  "aud": "my_client_id",
  "iat": 1311280970,
  "exp": 1311281970
}
Notez que dans cet exemple :
  • La demande sub contient la valeur de la propriété user_id.
  • Les propriétés favorite_color et user_metadata ne sont pas présentes car Connect (OIDC) ne définit pas de demandes standard qui représentent favorite_color ou user_metadata.
Pour recevoir les données personnalisées, nous devons créer une nouvelle action pour personnaliser le jeton avec des demandes personnalisées qui représentent ces propriétés du profil utilisateur.
  1. Naviguez vers Auth0 Dashboard > Actions > Bibliothèque et sélectionnez Créer personnalisé.
  2. Saisissez un Nom descriptif pour votre Action (par exemple, Ajouter des métadonnées utilisateur aux jetons), sélectionnez le déclencheur Login / Post Login, car vous allez ajouter l’action au flux de connexion, puis sélectionnez Créer.
  3. Localisez l’Éditeur de code d’Actions, copiez-y le code JavaScript suivant et sélectionnez Enregistrer le brouillon pour enregistrer vos modifications : 
    exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://myapp.example.com';
  const { favorite_color, preferred_contact } = event.user.user_metadata;

  if (event.authorization) {
    // Set claims 
    api.idToken.setCustomClaim(`${namespace}/favorite_color`, favorite_color);
    api.idToken.setCustomClaim(`${namespace}/preferred_contact`, preferred_contact);
  }
};
  4. Dans la barre latérale de l’Éditeur de code d’Actions, sélectionnez Tester (l’icône de lecture), puis sélectionnez Exécuter pour tester votre code.
  5. Lorsque vous êtes prêt à lancer l’action, sélectionnez Déployer.
Enfin, ajoutez l’Action que vous avez créée dans le Flux de connexion. Pour savoir comment attacher des Actions à des flux, lisez la section « Attacher l’action à un flux » dans Rédiger votre première Action. Avec cette Action activée, Auth0 inclura les demandes personnalisées favorite_color et preferred_contact dans le jeton d’ID : 
{
  "email": "jane@example.com",
  "email_verified": true,
  "iss": "https://my-domain.auth0.com/",
  "sub": "custom|123",
  "aud": "my_client_id",
  "iat": 1311280970,
  "exp": 1311281970,
  "https://myapp.example.com/favorite_color": "red",
  "https://myapp.example.com/preferred_contact": "email"
}
Lors de la création de votre Action, assurez-vous de définir une logique qui détermine quand inclure des demandes supplémentaires. L’injection de demandes personnalisées dans chaque jeton d’ID émis n’est pas idéale. Cet exemple montre des demandes personnalisées ajoutées à un jeton d’ID, qui utilise la méthode api.idToken.setCustomClaims. Pour ajouter ces demandes à un jeton d’accès, utilisez la méthode api.accessToken.setCustomClaim. Pour en savoir plus sur l’objet événement du déclencheur, lisez Actions Déclencheurs : post-login - Objet événement. Pour en savoir plus sur les jetons, lisez Jetons.

​
En savoir plus

⌘I