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

# Exemples de cas d’utilisation : permissions et demandes

> Découvrez comment utiliser les permissions et les demandes avec les applications et les API.

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) + "*****MASKED*****";
          }
          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 de code d’autorisation](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow) 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](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/add-login-auth-code-flow).

## 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 :

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

   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](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/add-login-auth-code-flow).
3. Extrayez le jeton d’ID de la réponse et [décodez-le](/docs/fr-ca/secure/tokens/id-tokens). Vous devriez voir les demandes suivantes :

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

   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](/docs/fr-ca/get-started/apis/scopes/api-scopes). Vous pouvez également utiliser des permissions définies pour [personnaliser l’invite de consentement pour vos utilisateurs](/docs/fr-ca/customize/login-pages/customize-consent-prompts).

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

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

   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](/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 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](/docs/fr-ca/get-started/apis/scopes/api-scopes). Vous pouvez également utiliser des permissions définies pour [personnaliser l’invite de consentement pour vos utilisateurs](/docs/fr-ca/customize/login-pages/customize-consent-prompts).

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

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

   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](/docs/fr-ca/customize/actions) pour personnaliser le jeton d’ID en ajoutant ces [demandes](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims). 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).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 accepte les demandes avec ou sans espace de noms, mais avec certaines restrictions (voir [Restrictions générales](https://auth0.com/docs/secure/tokens/json-web-tokens/create-custom-claims#general-restrictions)). 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.
</Callout>

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](/docs/fr-ca/api/management/v2#!/Users/patch_users_by_id) ou le Dashboard pour définir des informations spécifiques à 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 renverrait normalement les demandes de jeton d’ID suivantes à votre application :

```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 :

* 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 <Tooltip href="/docs/fr-ca/glossary?term=openid" tip="OpenID
  Norme ouverte d’authentification qui permet aux applications de vérifier l’identité des utilisateurs sans avoir à collecter leurs informations de connexion." cta="Voir le glossaire">OpenID</Tooltip> 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](/docs/fr-ca/customize/actions/write-your-first-action) pour personnaliser le jeton avec des [demandes personnalisées](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims) qui représentent ces propriétés du profil utilisateur.

1. Naviguez vers [Auth0 Dashboard > Actions > Bibliothèque](https://manage.auth0.com/#/actions/library) 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 :

   ```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) {
       // 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](/docs/fr-ca/customize/actions/test-actions).

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](https://manage.auth0.com/#/actions/flows/login/). Pour savoir comment attacher des Actions à des flux, lisez la section « Attacher l’action à un flux » dans [Rédiger votre première Action](/docs/fr-ca/customize/actions/write-your-first-action).

Avec cette Action activée, Auth0 inclura les demandes personnalisées `favorite_color` et `preferred_contact` dans le jeton d’ID :

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

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](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object). Pour en savoir plus sur les jetons, lisez [Jetons](/docs/fr-ca/secure/tokens).

## En savoir plus

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