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

> Aprenda a usar una única API lógica en Auth0 para representar y controlar el acceso a múltiples API.

# Configurar una API lógica para múltiples 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) + "*****ENMASCARADO*****";
          }
          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 tiene varias implementaciones de API distintas que, lógicamente, forman parte de la misma API, puede simplificar el proceso de autorización representándolas como una única API lógica en el <Tooltip tip="Auth0 Dashboard: el producto principal de Auth0 para configurar sus servicios." cta="Ver glosario" href="/es/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>. De este modo, puede implementar un solo <Tooltip tip="Auth0 Dashboard: el producto principal de Auth0 para configurar sus servicios." cta="Ver glosario" href="/es/docs/glossary?term=authorization+flow">flujo de autorización</Tooltip> y, al mismo tiempo, seguir controlando el acceso a las API individuales asignando los alcances adecuados.

Las siguientes secciones describen cómo usar y representar varias API como un único <Tooltip tip="Resource Server: servidor que aloja recursos protegidos. Los servidores de recursos aceptan y responden a solicitudes de recursos protegidos." cta="Ver glosario" href="/es/docs/glossary?term=Resource+Server">servidor de recursos</Tooltip> en Auth0. En los ejemplos, usaremos la siguiente aplicación de ejemplo. La aplicación usa una arquitectura de microservicios y contiene:

* 2 API de Node.js: `contacts` y `calendar` (puede considerarlas microservicios)
* 1 servidor de recursos que representa las 2 API
* 2 alcances con espacio de nombres: `read:contacts` y `read:calendar`
* El flujo de concesión implícita para obtener un `access_token` que funcione para ambas API

Representaremos las dos API con una sola API de Auth0 llamada `Organizer Service`. Después, crearemos dos alcances para demostrar cómo puede usar el [Flujo implícito](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce) para acceder a las API `calendar` y `contacts` desde la SPA.

Debe completar los siguientes pasos:

1. Habilitar una conexión para su aplicación
2. Crear un usuario de prueba
3. Registrar una API lógica en Auth0
4. Configurar alcances para la API lógica
5. Conceder acceso a la API lógica
6. (Opcional) Implementar cierre de sesión único (SLO) o inicio de sesión único (SSO)

<div id="prerequisites">
  ## Requisitos previos
</div>

* [Registra tu aplicación](/es/docs/get-started/auth0-overview/create-applications/single-page-web-apps).

  * Selecciona **Application Type** como **Single-Page App**.
  * Agrega **Allowed Callback URLs**: `http://localhost:3000` y `http://localhost:3000/callback.html`.
* Descarga la [aplicación de ejemplo](https://github.com/auth0-samples/auth0-api-auth-implicit-sample). Para obtener información sobre cómo configurar la aplicación de ejemplo, consulta el [README](https://github.com/auth0-samples/auth0-api-auth-implicit-sample#readme).

<div id="enable-a-connection-for-your-application">
  ## Habilita una conexión para tu aplicación
</div>

Necesitarás un origen de usuarios para la aplicación que acabas de registrar, por lo que tendrás que configurar una [conexión](/es/docs/authenticate/identity-providers). Para este ejemplo, crearemos una [Conexión de base de datos](/es/docs/authenticate/database-connections) sencilla que solicite solo el correo electrónico del usuario y una contraseña. Para obtener más información, consulta [Configurar conexiones de base de datos](/es/docs/get-started/applications/set-up-database-connections).

<div id="create-a-test-user">
  ## Crear un usuario de prueba
</div>

Como está trabajando con una conexión recién creada, no habrá ningún usuario asociado a ella. Antes de poder probar el proceso de Login de la aplicación de ejemplo, deberá crear y asociar un usuario con la conexión, así que asegúrese de seleccionar la Conexión que acaba de crear al crear el usuario. Para obtener más información, consulte [Create Users](/es/docs/manage-users/user-accounts/create-users).

<div id="register-a-logical-api-in-auth0">
  ## Registrar una API lógica en Auth0
</div>

Registre una sola API lógica que usará para representar las múltiples API incluidas en la aplicación de ejemplo. Para este ejemplo, llame a la API `Organizer Service` y establezca su identificador único en `organize`. De forma predeterminada, el <Tooltip tip="Algoritmo de firma: algoritmo utilizado para firmar digitalmente los tokens y garantizar que el token no haya sido manipulado." cta="Ver glosario" href="/es/docs/glossary?term=signing+algorithm">algoritmo de firma</Tooltip> de los tokens obtenidos para esta API es **RS256**, que debe dejar tal cual. Para obtener más información, consulte [Registrar APIs](/es/docs/get-started/auth0-overview/set-up-apis).

<div id="configure-permissions-for-the-logical-api">
  ## Configure los permisos de la API lógica
</div>

Para permitir que la API lógica represente las API incluidas en la aplicación de ejemplo, deberá crear los permisos (alcances) adecuados.

Los alcances le permiten definir a qué acciones de la API podrán acceder las aplicaciones cliente. Un scope representa una combinación de API/acción. En este ejemplo, quiere que las aplicaciones cliente puedan leer (`read`) desde una API llamada `calendar` y otra llamada `contacts`, por lo que deberá crear los siguientes permisos:

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

Puede pensar en cada una como un microservicio. Para obtener más información, consulte [Agregar permisos de API](/es/docs/get-started/apis/add-api-permissions) y [Alcances de API](/es/docs/get-started/apis/scopes/api-scopes).

<div id="grant-access-to-the-logical-api">
  ## Conceder acceso a la API lógica
</div>

Ahora ya puede proporcionar acceso a sus API al permitir que la API lógica obtenga <Tooltip tip="Token de acceso: credencial de autorización, en forma de una cadena opaca o JWT, utilizada para acceder a una API." cta="Ver glosario" href="/es/docs/glossary?term=Access+Tokens">Tokens de acceso</Tooltip>. Al incluir los alcances necesarios, puede controlar el acceso de una aplicación a las API representadas por la API lógica. Los siguientes pasos usan el [Flujo implícito](/es/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post) para seguir el ejemplo. Sin embargo, puede usar el flujo que mejor se adapte a sus necesidades. Por ejemplo:

* Si tiene una **aplicación Machine-to-Machine**, puede autorizarla para solicitar Tokens de acceso para su API mediante un [flujo de credenciales del cliente](/es/docs/get-started/authentication-and-authorization-flow/client-credentials-flow).
* Si está creando una **aplicación nativa**, puede implementar el [Flujo de código de autorización con PKCE](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

Para obtener más información sobre los flujos de autorización, consulte [Flujos de autenticación y autorización](/es/docs/get-started/authentication-and-authorization-flow).

1. El usuario hace clic en Login dentro de la SPA y la aplicación redirige al usuario al Servidor de autorización de Auth0 (endpoint `/authorize`). Para obtener más información sobre los parámetros de la llamada, consulte nuestro tutorial: [Llame a su API mediante el Flujo de código de autorización con PKCE](/es/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="Página de inicio de sesión de la aplicación de ejemplo" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/1ogYIaeDdyGL3Qo511m6Sh/5ab97c1535b2b62523a367594d44d66f/home.png" />
   </Frame>
2. El Servidor de autorización de Auth0 redirige al usuario a la página de inicio de sesión, donde se autentica mediante una de las opciones de inicio de sesión configuradas.

   <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="Página de inicio de sesión de Lock" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/6z6aA5nfA1uwOyx8srhvvI/2435a0909cfe44a57bef3ff27ef24e5b/lock.png" />
   </Frame>
3. Si es la primera vez que el usuario pasa por este flujo, verá una pantalla de consentimiento que enumera los permisos que Auth0 otorgará a la SPA. En este caso, se le pide al usuario que dé su consentimiento para que la aplicación lea sus contactos y su calendario.

   <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="Pantalla de consentimiento de Lock de la aplicación de ejemplo" width="750" height="579" data-path="docs/images/cdy7uua7fh8z/1te4FYRbu0aFcdohdXY2Rv/116bed5515eb2114c39374fb0a258912/consent-screen.png" />
   </Frame>
4. Si el usuario da su consentimiento, Auth0 lo redirige de vuelta a la SPA con tokens en el fragmento hash del URI. La SPA ahora puede extraer los tokens del fragmento hash mediante JavaScript y usar el Token de acceso para llamar a sus API en nombre del usuario.

   ```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');
   }
   ```

   En nuestro ejemplo, después de iniciar sesión correctamente, verá botones que le permiten llamar a cualquiera de sus API con el Token de acceso obtenido de la API lógica.

   <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="Pantalla de usuario autorizado de la aplicación de ejemplo" 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">
  ### Implementar cierre de sesión único (SLO) o inicio de sesión único (SSO)
</div>

En algunos escenarios con varias aplicaciones, en los que se requiere el cierre de sesión único (cuando un usuario cierra sesión en una aplicación, también debe cerrarse en las demás), una aplicación puede configurarse para consultar periódicamente a Auth0 mediante `checkSession()` y comprobar si existe una sesión. Si la sesión no existe, puede cerrar la sesión del usuario en la aplicación. El mismo método de sondeo puede usarse para implementar autenticación silenciosa en un escenario de <Tooltip tip="Inicio de sesión único (SSO): servicio que, después de que un usuario inicia sesión en una aplicación, le inicia sesión automáticamente en otras aplicaciones." cta="Ver glosario" href="/es/docs/glossary?term=Single+Sign-on">inicio de sesión único</Tooltip> (SSO).

El intervalo entre comprobaciones con `checkSession()` debe ser de al menos 15 minutos entre llamadas para evitar posibles problemas futuros con el límite de tasa de esta llamada.

<div id="learn-more">
  ## Más información
</div>

* [Registrar APIs](/es/docs/get-started/auth0-overview/set-up-apis)
* [Agregar permisos de API](/es/docs/get-started/apis/add-api-permissions)
* [Alcances de API](/es/docs/get-started/apis/scopes/api-scopes)