> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Découvrez, à l’aide d’exemples pratiques, comment les portées OAuth 2.0 et les claims JWT déterminent les données et les actions auxquelles les applications peuvent accéder au nom des utilisateurs.

# Exemples de cas d’utilisation : Portées and claims

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASQUÉ*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

export const codeExample1 = `https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=openid%20profile%20email&
  state=YOUR_STATE_VALUE
`;

export const codeExample2 = `{
  "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"
}`;

export const codeExample3 = `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
`;

export const codeExample4 = `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
`;

Dans ces exemples, nous utilisons le [flux du code d’autorisation](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow) pour authentifier un utilisateur et demander les permissions (portées) et les jetons nécessaires. Pour en savoir plus sur les paramètres de la requête ou sur la façon d’implémenter entièrement ce flux, consultez notre tutoriel : [Ajouter la connexion aux applications Web régulières](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/add-login-auth-code-flow).

<div id="authenticate-a-user-and-request-standard-claims">
  ## Authentifier un utilisateur et demander des claims standard
</div>

Dans cet exemple, nous voulons authentifier un utilisateur et obtenir des renseignements sur celui-ci qui nous permettront de personnaliser notre interface utilisateur. Pour ce faire, nous devons obtenir un <Tooltip tip="ID Token : Information d’identification destinée au client lui-même, plutôt qu’à l’accès à une ressource." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=ID+token">ID token</Tooltip> qui contient le nom de l’utilisateur, son nickname, sa photo de profil et son adresse courriel.

1. Lancez le flux d’authentification en envoyant l’utilisateur à l’URL d’autorisation :

   <AuthCodeBlock children={codeExample1} language="text" />

   Notez que, dans cet exemple :

   * Le paramètre `response_type` comprend une valeur :

     * `code` : comme nous utilisons le flux d’application Web régulière, notre requête initiale vise à obtenir un authorization code; lorsque nous demanderons nos jetons à l’aide de ce code, nous recevrons le ID token dont nous avons besoin pour l’authentification.
   * Le paramètre `scope` comprend trois valeurs; les portées 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 `name`, `nickname` et `picture`.
     * `email` : pour obtenir `email` et `email_verified`.
2. Une fois que l’utilisateur a donné son consentement (au besoin) et qu’Auth0 l’a redirigé vers votre application, [demandez des jetons](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/add-login-auth-code-flow).
3. Extrayez le ID token de la réponse et [décodez-le](/docs/fr-ca/secure/tokens/id-tokens). Vous devriez voir les claims suivants :

   <AuthCodeBlock children={codeExample2} language="json" />

   Votre application peut maintenant récupérer les attributs de l’utilisateur et les utiliser pour personnaliser votre interface utilisateur.

<div id="request-custom-api-access">
  ## Demander un accès à une API personnalisée
</div>

Dans cet exemple, nous demandons une portée personnalisée pour une API de calendrier qui autorisera l’application appelante à lire les rendez-vous de l’utilisateur. Pour ce faire, nous voulons obtenir un <Tooltip tip="Jeton d’accès : information d’autorisation, sous forme de chaîne opaque ou de JWT, utilisée pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=access+token">jeton d’accès</Tooltip> contenant la portée 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 ID Token.

Avant d’utiliser une API personnalisée, vous devez savoir quelles portées 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 l’API auprès d’Auth0 et [définir les portées de votre API à l’aide de l’Auth0 Dashboard](/docs/fr-ca/get-started/apis/scopes/api-scopes). Vous pouvez aussi utiliser des permissions définies pour [personnaliser l’invite de consentement](/docs/fr-ca/customize/login-pages/customize-consent-prompts) pour vos utilisateurs.

1. Lancez le flux d’autorisation en envoyant l’utilisateur vers l’URL d’autorisation :

   <AuthCodeBlock children={codeExample3} language="text" />

   Remarquez que, dans cet exemple :

   * Le paramètre `response_type` comprend toujours une valeur :

     * `code` : puisque nous utilisons le flux d’application web régulière, notre demande initiale vise à obtenir un code d’autorisation; lorsque nous demanderons nos jetons à l’aide de ce code, nous recevrons le jeton d’accès que nous pourrons utiliser pour faire une requête à notre API.
   * le paramètre `scope` comprend une valeur, soit la portée d’API demandée :

     * `read:appointments` : pour nous permettre de lire les rendez-vous de l’utilisateur à partir de l’API.
   * Le paramètre `audience` est nouveau et comprend une valeur :

     * L’identifiant unique de l’API à partir de laquelle nous voulons lire les rendez-vous de l’utilisateur.
2. Comme dans l’exemple précédent, une fois que l’utilisateur a donné son consentement (au besoin) et qu’Auth0 a redirigé l’utilisateur vers votre application, [demandez des jetons](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/add-login-auth-code-flow).
3. Extrayez le jeton d’accès de la réponse et faites une requête à l’API en utilisant le jeton d’accès comme informations d’authentification.

<div id="authenticate-a-user-and-request-standard-claims-and-custom-api-access">
  ## Authentifier un utilisateur et demander des claims standards ainsi qu’un accès à une API personnalisée
</div>

Dans cet exemple, nous combinons nos deux exemples précédents pour authentifier un utilisateur, demander des claims standards et aussi demander une portée personnalisée pour une API de calendrier qui permettra à l’application appelante de lire les rendez-vous de l’utilisateur. Pour ce faire, obtenez deux jetons :

* Un ID token qui contient :

  * Le nom de l’utilisateur
  * Le pseudonyme
  * La photo de profil
  * Les renseignements sur le courriel
* Un jeton d’accès qui contient la portée 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 ID token.

Avant d’utiliser une API personnalisée, vous devez savoir quelles portées sont offertes 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, puis [définir les portées de votre API à l’aide du Auth0 Dashboard](/docs/fr-ca/get-started/apis/scopes/api-scopes). Vous pouvez aussi utiliser des permissions définies pour [personnaliser l’invite de consentement](/docs/fr-ca/customize/login-pages/customize-consent-prompts) pour vos utilisateurs.

1. Lancez le flux d’authentification en envoyant l’utilisateur vers l’URL d’autorisation :

   <AuthCodeBlock children={codeExample4} language="text" />

   Notez que, dans cet exemple :

   * Le paramètre `response_type` comprend toujours une valeur :

     * `code` : puisque nous utilisons le flux d’application Web régulière, notre requête initiale vise un code d’autorisation; lorsque nous demanderons nos jetons à l’aide de ce code, nous recevrons à la fois l’ID token dont nous avons besoin pour l’authentification et le jeton d’accès que nous pourrons utiliser pour effectuer une requête vers notre API.
   * Le paramètre `scope` est utilisé à la fois pour les portées OIDC et les portées d’API; il comprend 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 `name`, `nickname` et `picture`.
     * `email` : pour obtenir `email` et `email_verified`.
     * `read:appointments` : pour nous permettre de lire les rendez-vous de l’utilisateur à partir de l’API.
   * le paramètre `audience` comprend une valeur :

     * L’identificateur unique de l’API à partir de laquelle nous voulons lire les rendez-vous de l’utilisateur
2. Comme dans les exemples précédents, après que l’utilisateur a donné son consentement (au besoin) et qu’Auth0 a redirigé l’utilisateur vers votre application, demandez les jetons.
3. Extrayez l’ID token de la réponse, décodez-le, récupérez les attributs de l’utilisateur et utilisez-les pour personnaliser votre UI.
4. Extrayez le jeton d’accès de la réponse et effectuez une requête vers l’API en utilisant le jeton d’accès comme informations d’identification.

<div id="add-custom-claims-to-a-token">
  ## Ajouter des claims personnalisés à un jeton
</div>

Dans cet exemple, nous ajoutons la couleur préférée d’un utilisateur et sa méthode de contact privilégiée à l’ID Token. Pour ce faire, nous créons une [Action](/docs/fr-ca/customize/actions) afin de personnaliser l’ID token en y ajoutant ces [claims](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims). Une fois ajoutés, nous pourrons aussi récupérer les claims personnalisés en appelant le point de terminaison `/userinfo` (bien que l’Action ne s’exécute que pendant le processus d’authentification).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 prend en charge les claims avec et sans espace de noms, mais certaines restrictions s’appliquent (consultez [Restrictions générales](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims#general-restrictions)). Pour éviter les collisions de noms, nous recommandons d’utiliser des claims avec espace de noms. En cas de collision, la transaction n’échouera pas, mais votre claim personnalisé ne sera pas ajouté à vos jetons.
</Callout>

Supposons que :

* À un certain moment, l’utilisateur a sélectionné `email` comme méthode `preferred_contact` et `red` comme valeur de `favorite_color`, et que nous l’avons enregistré dans le `user_metadata` de l’utilisateur.
* Nous avons utilisé la [Management API](https://auth0.com/docs/api/management/v2#!/Users/patch_users_by_id) ou le Dashboard pour définir des renseignements propres à l’application pour cet utilisateur.

Dans ce cas, le [profil utilisateur normalisé](/docs/fr-ca/manage-users/user-accounts/user-profiles/normalized-user-profiles) stocké par Auth0 est :

```json lines theme={null}
{
  "email": "jane@example.com",
  "email_verified": true,
  "user_id": "custom|123",
  "favorite_color": "blue",
  "user_metadata": {
    "preferred_contact": "email"
  }
}
```

Pour ce profil, Auth0 retournerait normalement à votre application les claims suivants de l’ID Token :

```json lines theme={null}
{
  "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 :

* Le claim `sub` contient la valeur de la propriété `user_id`.
* Ni les propriétés `favorite_color` ni `user_metadata` ne sont présentes, car <Tooltip tip="OpenID : norme ouverte d’authentification qui permet aux applications de vérifier l’identité des utilisateurs sans recueillir ni stocker leurs informations de connexion." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=OpenID">OpenID</Tooltip> Connect (OIDC) ne définit pas de claims standard pour représenter `favorite_color` ou `user_metadata`.

Pour recevoir les données personnalisées, nous devrons [créer une nouvelle Action](/docs/fr-ca/customize/actions/write-your-first-action) afin de personnaliser le jeton avec des [claims personnalisés](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims) qui représentent ces propriétés du profil utilisateur.

1. Accédez à [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library), puis sélectionnez **Build Custom**.

2. Saisissez un **Name** descriptif pour votre Action (par exemple, `Add user metadata to tokens`), sélectionnez le trigger `Login / Post Login` puisque vous ajouterez l’Action au Login flow, puis sélectionnez **Create**.

3. Repérez le Actions Code Editor, copiez-y le code Javascript suivant, puis sélectionnez **Save Draft** pour enregistrer vos modifications :

   ```javascript lines theme={null}
   exports.onExecutePostLogin = async (event, api) => {
     const namespace = 'https://myapp.example.com';
     const { favorite_color, preferred_contact } = event.user.user_metadata;

     if (event.authorization) {
       // Définir les claims 
       api.idToken.setCustomClaim(`${namespace}/favorite_color`, favorite_color);
       api.idToken.setCustomClaim(`${namespace}/preferred_contact`, preferred_contact);
     }
   };
   ```

4. Dans la barre latérale du Actions Code Editor, sélectionnez Test (icône de lecture), puis sélectionnez **Run** pour [tester votre code](/docs/fr-ca/customize/actions/test-actions).

5. Lorsque vous êtes prêt à mettre l’Action en service, sélectionnez **Deploy**.

Enfin, ajoutez l’Action que vous avez créée au [Login Flow](https://manage.auth0.com/#/actions/flows/login/). Pour savoir comment attacher des Actions à des Flows, consultez la section "Attach the Action to a flow" dans [Write Your First Action](/docs/fr-ca/customize/actions/write-your-first-action).

Une fois cette Action activée, Auth0 inclura les claims personnalisés `favorite_color` et `preferred_contac`t dans le ID Token :

```json lines theme={null}
{
  "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"
}
```

Lorsque vous créez votre Action, assurez-vous de définir une logique qui détermine à quel moment inclure des claims supplémentaires. Injecter des claims personnalisées dans chaque ID Token émis n’est pas idéal.

Cet exemple montre des claims personnalisées ajoutées à un ID Token à l’aide de la méthode `api.idToken.setCustomClaims`. Pour ajouter ces claims à un jeton d’accès, utilisez la méthode `api.accessToken.setCustomClaim`.

Pour en savoir plus sur l’objet Event associé au trigger, consultez [Actions Triggers: post-login - Event Object](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object). Pour en savoir plus sur les jetons, consultez [Tokens](/docs/fr-ca/secure/tokens).

<div id="learn-more">
  ## En savoir plus
</div>

* [OpenID Connect Scopes](/docs/fr-ca/get-started/apis/scopes/openid-connect-scopes)
* [Créer des claims personnalisés](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims)
* [API Scopes](/docs/fr-ca/get-started/apis/scopes/api-scopes)
* [Configurer l’API logique pour plusieurs API](/docs/fr-ca/get-started/apis/set-logical-api)