> ## 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 comment utiliser une seule API logique dans Auth0 pour représenter plusieurs API et gérer l’accès à celles-ci.

# Configurer une API logique pour plusieurs 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) + "*****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 codeExample = `https://{yourDomain}/authorize?
   scope=read:contacts%20read:calendar&
   audience=organize&
   response_type=id_token%20token&
   client_id={yourClientId}&
   redirect_uri=http://localhost:3000&
   nonce={nonce}
`;

Si vous avez plusieurs mises en œuvre d’API distinctes qui font toutes logiquement partie de la même API, vous pouvez simplifier votre processus d’autorisation en les représentant par une seule API logique dans le <Tooltip tip="Auth0 Dashboard : principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>. Vous pouvez ainsi mettre en place un seul <Tooltip tip="Auth0 Dashboard : principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=authorization+flow">flux d’autorisation</Tooltip>, tout en continuant à contrôler l’accès à chaque API en attribuant les scopes appropriés.

Les sections suivantes expliquent comment utiliser et représenter plusieurs API comme un seul <Tooltip tip="Resource Server : serveur hébergeant des ressources protégées. Les serveurs de ressources acceptent les requêtes de ressources protégées et y répondent." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Resource+Server">Resource Server</Tooltip> dans Auth0. Nous utiliserons l’application d’exemple suivante. Cette application repose sur une architecture de microservices et comprend :

* 2 API Node.js : `contacts` et `calendar` (vous pouvez les considérer comme des microservices)
* 1 Resource Server représentant les 2 API
* 2 scopes qualifiés par espace de noms : `read:contacts` et `read:calendar`
* Le flux Implicit Grant pour obtenir un `access_token` qui fonctionne pour les deux API

Nous représenterons les deux API à l’aide d’une seule API Auth0 appelée `Organizer Service`. Nous créerons ensuite deux scopes pour montrer comment utiliser le [flux implicite](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce) afin d’accéder aux API `calendar` et `contacts` à partir de la SPA.

Vous devez effectuer les étapes suivantes :

1. Activer une connexion pour votre application
2. Créer un utilisateur de test
3. Enregistrer une API logique dans Auth0
4. Configurer des scopes pour l’API logique
5. Accorder l’accès à l’API logique
6. (Facultatif) Mettre en œuvre la déconnexion unique (SLO) ou l’authentification unique (SSO)

<div id="prerequisites">
  ## Prérequis
</div>

* [Enregistrez votre application](/docs/fr-ca/get-started/auth0-overview/create-applications/single-page-web-apps).

  * Sélectionnez **Single-Page App** comme **Application Type**.
  * Ajoutez `http://localhost:3000` et `http://localhost:3000/callback.html` aux **Allowed Callback URLs**.
* Téléchargez l’[application d’exemple](https://github.com/auth0-samples/auth0-api-auth-implicit-sample). Pour savoir comment la configurer, consultez le [README](https://github.com/auth0-samples/auth0-api-auth-implicit-sample#readme).

<div id="enable-a-connection-for-your-application">
  ## Activer une connexion pour votre application
</div>

Vous aurez besoin d’une source d’utilisateurs pour l’application que vous venez d’enregistrer; vous devrez donc configurer une [connexion](/docs/fr-ca/authenticate/identity-providers). Pour cet exemple, nous créerons une [Connexion à une base de données](/docs/fr-ca/authenticate/database-connections) simple qui demande seulement l’adresse courriel de l’utilisateur et un mot de passe. Pour en savoir plus, consultez [Configurer les connexions à une base de données](/docs/fr-ca/get-started/applications/set-up-database-connections).

<div id="create-a-test-user">
  ## Créer un utilisateur de test
</div>

Comme vous travaillez avec une connexion nouvellement créée, aucun utilisateur n’y est associé. Avant de pouvoir tester le processus de connexion de l’application d’exemple, vous devrez créer un utilisateur et l’associer à la connexion. Assurez-vous donc de sélectionner votre nouvelle connexion lorsque vous créez votre utilisateur. Pour en savoir plus, consultez [Créer des utilisateurs](/docs/fr-ca/manage-users/user-accounts/create-users).

<div id="register-a-logical-api-in-auth0">
  ## Enregistrer une API logique dans Auth0
</div>

Enregistrez une seule API logique que vous utiliserez pour représenter les multiples API contenues dans l’application d’exemple. Pour les besoins de cet exemple, nommez votre API `Organizer Service` et définissez son identifiant unique sur `organize`. Par défaut, l’<Tooltip tip="Algorithme de signature : algorithme utilisé pour signer numériquement les jetons afin de garantir que le jeton n’a pas été altéré." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=signing+algorithm">algorithme de signature</Tooltip> des jetons obtenus pour cette API est **RS256**, que vous devriez laisser tel quel. Pour en savoir plus, consultez [Enregistrer des API](/docs/fr-ca/get-started/auth0-overview/set-up-apis).

<div id="configure-permissions-for-the-logical-api">
  ## Configurer les permissions pour l’API logique
</div>

Pour permettre à l’API logique de représenter les API comprises dans l’application exemple, vous devrez créer les permissions appropriées (scopes).

Les scopes vous permettent de définir les actions d’API auxquelles les applications appelantes auront accès. Chaque scope représente une combinaison API/action. Dans cet exemple, vous voulez que les applications appelantes puissent `read` à partir d’une API nommée `calendar` et d’une autre nommée `contacts`; vous devrez donc créer les permissions suivantes :

* `read:calendar`
* `read:contacts`

Vous pouvez considérer chacune d’elles comme un microservice. Pour en savoir plus, consultez [Ajouter des permissions d’API](/docs/fr-ca/get-started/apis/add-api-permissions) et [Portées d’API](/docs/fr-ca/get-started/apis/scopes/api-scopes).

<div id="grant-access-to-the-logical-api">
  ## Accorder l’accès à l’API logique
</div>

Vous êtes maintenant prêt à donner accès à vos API en permettant à l’API logique d’obtenir des <Tooltip tip="Jeton d’accès : justificatif d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Access+Tokens">jetons d’accès</Tooltip>. En incluant les scopes nécessaires, vous pouvez contrôler l’accès d’une application aux API représentées par l’API logique. Les étapes suivantes utilisent le [flux implicite](/docs/fr-ca/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post) pour illustrer l’exemple. Toutefois, vous pouvez utiliser le flux qui convient le mieux à vos besoins. Par exemple :

* Si vous avez une **application machine à machine**, vous pouvez l’autoriser à demander des jetons d’accès pour votre API en exécutant un [flux d’identifiants du client](/docs/fr-ca/get-started/authentication-and-authorization-flow/client-credentials-flow).
* Si vous créez une **application native**, vous pouvez mettre en œuvre le [flux de code d’autorisation avec clé de preuve pour l’échange de code (PKCE)](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

Pour en savoir plus sur les flux d’autorisation, consultez [Flux d’authentification et d’autorisation](/docs/fr-ca/get-started/authentication-and-authorization-flow).

1. L’utilisateur clique sur Login dans la SPA, puis l’application redirige l’utilisateur vers l’Auth0 Authorization Server (point de terminaison `/authorize`). Pour en savoir plus sur les paramètres de la requête, consultez notre tutoriel : [Appeler votre API à l’aide du flux de code d’autorisation avec PKCE](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce/call-your-api-using-the-authorization-code-flow-with-pkce).

   <AuthCodeBlock children={codeExample} language="http" />

   <Frame>
     <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1ogYIaeDdyGL3Qo511m6Sh/5ab97c1535b2b62523a367594d44d66f/home.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=5f2f3a899800e2114bfbfdab3540ea4f" alt="Page de connexion de l’application exemple" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/1ogYIaeDdyGL3Qo511m6Sh/5ab97c1535b2b62523a367594d44d66f/home.png" />
   </Frame>
2. Votre Auth0 Authorization Server redirige l’utilisateur vers la page de connexion, où il s’authentifie à l’aide de l’une des options de connexion configurées.

   <Frame>
     <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/6z6aA5nfA1uwOyx8srhvvI/2435a0909cfe44a57bef3ff27ef24e5b/lock.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=bf8ff078e098170e0f46386c8480ddb2" alt="Page de connexion Lock" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/6z6aA5nfA1uwOyx8srhvvI/2435a0909cfe44a57bef3ff27ef24e5b/lock.png" />
   </Frame>
3. S’il s’agit de la première fois que l’utilisateur passe par ce flux, il voit un écran de consentement qui présente les permissions qu’Auth0 accordera à la SPA. Dans ce cas, on lui demande d’autoriser l’application à lire ses contacts et son calendrier.

   <Frame>
     <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1te4FYRbu0aFcdohdXY2Rv/116bed5515eb2114c39374fb0a258912/consent-screen.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=0afb59d263e303a00362a72f171ef285" alt="Écran de consentement Lock de l’application exemple" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/1te4FYRbu0aFcdohdXY2Rv/116bed5515eb2114c39374fb0a258912/consent-screen.png" />
   </Frame>
4. Si l’utilisateur donne son consentement, Auth0 le redirige vers la SPA avec des jetons dans le fragment de hachage de l’URI. La SPA peut maintenant extraire les jetons du fragment de hachage à l’aide de JavaScript et utiliser le jeton d’accès pour appeler vos API au nom de l’utilisateur.

   ```javascript lines theme={null}
   function getParameterByName(name) {
     var match = RegExp('[#&]' + name + '=([^&]*)').exec(window.location.hash);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
   }

   function getAccessToken() {
     return getParameterByName('access_token');
   }
   ```

   Dans notre exemple, après vous être connecté avec succès, vous verrez des boutons qui vous permettront d’appeler l’une ou l’autre de vos API à l’aide du jeton d’accès obtenu auprès de l’API logique.

   <Frame>
     <img src="https://mintcdn.com/translations/Dcx0M11uuptU53TX/docs/images/cdy7uua7fh8z/2pGWG5Wa7U1tBPhAJZ7Bat/7e194066560605cc842f20624b80d958/apis.png?fit=max&auto=format&n=Dcx0M11uuptU53TX&q=85&s=d57abac945d3c484b41a728131c72c2b" alt="Écran d’autorisation de l’utilisateur de l’application exemple" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/2pGWG5Wa7U1tBPhAJZ7Bat/7e194066560605cc842f20624b80d958/apis.png" />
   </Frame>

<div id="implement-single-logout-slo-or-single-sign-on-sso">
  ### Mettre en œuvre la déconnexion unique (SLO) ou l’authentification unique (SSO)
</div>

Dans certains scénarios comportant plusieurs applications, où la déconnexion unique est souhaitée (lorsqu’un utilisateur se déconnecte d’une application, il doit aussi être déconnecté des autres applications), une application peut être configurée pour vérifier périodiquement auprès d’Auth0, à l’aide de `checkSession()`, si une session existe. Si aucune session n’existe, vous pouvez alors déconnecter l’utilisateur de l’application. La même méthode de vérification périodique peut être utilisée pour mettre en œuvre l’authentification silencieuse dans un scénario de <Tooltip tip="Authentification unique (SSO) : service qui, après qu’un utilisateur se connecte à une application, le connecte automatiquement aux autres applications." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Single+Sign-on">authentification unique</Tooltip> (SSO).

L’intervalle entre les vérifications effectuées au moyen de `checkSession()` devrait être d’au moins 15 minutes afin d’éviter tout problème futur lié à la limitation du débit de cette requête.

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

* [Enregistrer des API](/docs/fr-ca/get-started/auth0-overview/set-up-apis)
* [Ajouter des permissions d’API](/docs/fr-ca/get-started/apis/add-api-permissions)
* [Scopes d’API](/docs/fr-ca/get-started/apis/scopes/api-scopes)