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

# 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) + "*****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 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 implémentations d’API distinctes qui font toutes, sur le plan logique, 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 Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>. Cela vous permet de mettre en œuvre un seul <Tooltip tip="Auth0 Dashboard : principal produit Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=authorization+flow">flux d’autorisation</Tooltip>, tout en continuant à contrôler l’accès aux API individuelles en attribuant les scopes appropriés.

Les sections suivantes décrivent comment utiliser et représenter plusieurs API sous la forme d’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="/fr-CA/docs/glossary?term=Resource+Server">Resource Server</Tooltip> dans Auth0. Nous utiliserons l’exemple d’application suivant. Cette application utilise une architecture de microservices et contient :

* 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 avec espace de noms : `read:contacts` et `read:calendar`
* Le flux implicite 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](/fr-CA/docs/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 les 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](/fr-CA/docs/get-started/auth0-overview/create-applications/single-page-web-apps).

  * Sélectionnez **Application Type** comme **Application monopage**.
  * Ajoutez `http://localhost:3000` et `http://localhost:3000/callback.html` aux **Allowed Callback URLs**.
* Téléchargez l’[application exemple](https://github.com/auth0-samples/auth0-api-auth-implicit-sample). Pour savoir comment configurer l’application exemple, 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](/fr-CA/docs/authenticate/identity-providers). Pour cet exemple, nous créerons une simple [Connexion de base de données](/fr-CA/docs/authenticate/database-connections) qui demande uniquement l’adresse de courriel de l’utilisateur et un mot de passe. Pour en savoir plus, consultez [Configurer les connexions de base de données](/fr-CA/docs/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. Veillez donc à sélectionner la Connexion que vous venez de créer lorsque vous créez l’utilisateur. Pour en savoir plus, consultez [Créer des utilisateurs](/fr-CA/docs/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 différentes API comprises dans l’application exemple. Pour 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 qu’ils n’ont pas été altérés." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=signing+algorithm">algorithme de signature</Tooltip> des jetons obtenus pour cette API est **RS256**; vous devez le laisser tel quel. Pour en savoir plus, consultez [Enregistrer des API](/fr-CA/docs/get-started/auth0-overview/set-up-apis).

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

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

Les scopes vous permettent de définir quelles actions d’API seront accessibles aux applications appelantes. Un scope représente une combinaison API/action. Dans cet exemple, vous voulez que les applications appelantes puissent effectuer des opérations `read` sur une API appelée `calendar` et sur une autre appelée `contacts`; vous devrez donc créer les autorisations suivantes :

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

Vous pouvez considérer chacune d’elles comme un microservice. Pour en savoir plus, consultez [Add API Permissions](/fr-CA/docs/get-started/apis/add-api-permissions) et [API Scopes](/fr-CA/docs/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 à accorder l’accès à vos API en permettant à l’API logique d’obtenir des <Tooltip tip="Jeton d’accès : information d’identification d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisée pour accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/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](/fr-CA/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post) pour correspondre à l’exemple. Toutefois, vous pouvez utiliser le flux qui convient le mieux à vos besoins. Par exemple :

* Si vous avez une **application Machine-to-Machine**, vous pouvez l’autoriser à demander des jetons d’accès pour votre API en utilisant un [flux d’identification du client](/fr-CA/docs/get-started/authentication-and-authorization-flow/client-credentials-flow).
* Si vous créez une **application native**, vous pouvez implémenter le [flux de code d’autorisation avec preuve de clé pour l’échange de code (PKCE)](/fr-CA/docs/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](/fr-CA/docs/get-started/authentication-and-authorization-flow).

1. L’utilisateur clique sur Login dans l’application monopage, et l’application redirige l’utilisateur vers le serveur d’autorisation Auth0 (point de terminaison `/authorize`). Pour en savoir plus sur les paramètres de l’appel, consultez notre tutoriel : [Appeler votre API à l’aide du flux de code d’autorisation avec PKCE](/fr-CA/docs/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 serveur d’autorisation Auth0 redirige l’utilisateur vers la page de connexion, où l’utilisateur 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 une invite de consentement énumérant les autorisations qu’Auth0 accordera à l’application monopage. Dans ce cas, l’utilisateur doit consentir à ce que l’application lise 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 Consent Lock de l’application exemple" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/1te4FYRbu0aFcdohdXY2Rv/116bed5515eb2114c39374fb0a258912/consent-screen.png" />
   </Frame>
4. Si l’utilisateur y consent, Auth0 le redirige vers l’application monopage avec des jetons dans le fragment hash de l’URI. L’application monopage peut maintenant extraire les jetons du fragment hash à 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, une fois la connexion réussie, vous verrez des boutons qui vous permettent d’appeler l’une ou l’autre de vos API à l’aide du jeton d’accès obtenu 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 utilisateur autorisé 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">
  ### Implémenter la déconnexion unique (SLO) ou l’authentification unique (SSO)
</div>

Dans certains scénarios impliquant 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 effectuer une scrutation périodique d’Auth0 à l’aide de `checkSession()` afin de vérifier 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 scrutation peut aussi être utilisée pour implémenter l’authentification silencieuse dans un scénario d’<Tooltip tip="Authentification unique (SSO) : service qui, après qu’un utilisateur s’est connecté à une application, connecte automatiquement cet utilisateur aux autres applications." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Single+Sign-on">authentification unique</Tooltip> (SSO).

L’intervalle de scrutation entre les vérifications à `checkSession()` doit être d’au moins 15 minutes afin d’éviter tout problème futur lié à la limite de débit de cet appel.

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

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