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

> Paso 2 del tutorial de AWS API Gateway

# Tutorial de AWS API Gateway, paso 2

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>;
};

<Warning>
  Esta funcionalidad usa delegación. De forma predeterminada, la delegación está deshabilitada para los inquilinos que no tuvieran ningún add-on en uso a fecha del 8 de junio de 2017. Los inquilinos legado que actualmente usan un add-on que requiere delegación pueden seguir usando esta funcionalidad. Si la funcionalidad de delegación se modifica o se retira del servicio en algún momento, se notificará con antelación a los clientes que la usan actualmente y se les dará tiempo suficiente para migrar. Además, ten en cuenta que la delegación no admite el uso de dominios personalizados, por lo que cualquier funcionalidad que dependa de ella podría no funcionar por completo con un dominio personalizado.
</Warning>

<div id="step-2-secure-and-deploy-the-amazon-api-gateway">
  ## Paso 2: proteja y despliegue Amazon API Gateway
</div>

Ahora que ya tiene la API en funcionamiento, necesita añadir seguridad. En este paso, hará lo siguiente:

* Proteger la API de actualización para limitar el acceso a usuarios autenticados con un rol específico de AWS IAM;
* Configurar la delegación de Auth0 para usar las capacidades de federación de AWS IAM;
* Obtener un <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+Token">Token de acceso</Tooltip> de AWS que use el rol de AWS IAM.

Una vez que su API esté protegida, creará una aplicación sin servidor de una sola página (SPA). La SPA dependerá de la federación de identidades para determinar qué usuarios tienen acceso. Al combinar la integración de AWS IAM con AWS API Gateway, la federación de identidades de AWS IAM para <Tooltip tip="Security Assertion Markup Language (SAML): protocolo estandarizado que permite a dos partes intercambiar información de autenticación sin una contraseña." cta="Ver glosario" href="/es/docs/glossary?term=SAML">SAML</Tooltip> y la delegación de Auth0 para AWS, puede permitir que usuarios de muchas fuentes diferentes, incluidos proveedores sociales o conexiones empresariales, accedan a sus API. El siguiente diagrama ilustra un flujo de ejemplo que usa un <Tooltip tip="Proveedor de identidad (IdP): servicio que almacena y administra identidades digitales." cta="Ver glosario" href="/es/docs/glossary?term=Identity+Provider">Proveedor de identidad</Tooltip> basado en SAML, además de la federación SAML y la delegación de Auth0 para AWS.

Verá dos formas de implementar este flujo:

1. Usar la delegación de Auth0 con AWS IAM;
2. Agregar un token de identidad para transmitir la identidad a la función Lambda.

La delegación facilita la obtención de tokens de AWS para acceder a los servicios de AWS desde su aplicación.

<div id="ways-to-secure-the-amazon-api-gateway">
  ### Formas de proteger Amazon API Gateway
</div>

AWS API Gateway proporciona varios métodos para proteger sus API:

1. claves de API;
2. IAM;
3. [Amazon Cognito](/es/docs/customize/integrations/aws/aws-api-gateway-cognito).

Usar claves de API suele ser adecuado para una interacción de servicio a servicio, como se muestra a continuación. Sin embargo, este enfoque tiene varias desventajas:

* Incluir en la aplicación un secreto con una larga duración es arriesgado (las aplicaciones son más fáciles de comprometer);
* Crear un sistema para emitir y administrar claves de API requiere una implementación segura cuya elaboración puede resultar compleja.

En esta sección del tutorial se utilizarán roles y políticas de IAM para proteger su API en API Gateway, aunque también puede optar por hacerlo mediante user pools de Amazon Cognito. Para consultar instrucciones detalladas sobre cómo proteger su API de AWS, lea [Proteger AWS API Gateway con Cognito](/es/docs/customize/integrations/aws/aws-api-gateway-cognito). Para obtener más información sobre el uso de roles y políticas de IAM, consulte el artículo de Amazon [Control access to an API with IAM permissions](http://docs.aws.amazon.com/apigateway/latest/developerguide/permissions.html). Para obtener más información sobre los user pools de Cognito, visite [Amazon Cognito user pool](http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html).

<div id="step-1-configure-iam-and-auth0-for-saml-integration-with-the-api-gateway">
  ### Paso 1. Configure IAM y Auth0 para la integración de SAML con el API Gateway
</div>

Puede especificar un rol de AWS IAM para el token SAML que intercambia por un token de AWS. Según los permisos concedidos a ese rol de IAM (que se establecen mediante su Proveedor de identidad), el token recibido tiene esos mismos permisos. Al emitir distintos tokens SAML, cada uno con su propio rol de AWS IAM, puede controlar los niveles de acceso de sus usuarios.

Por ejemplo, el IdP podría especificar el rol de IAM en función de la pertenencia a grupos (por ejemplo, un administrador en Active Directory) o del origen de autenticación (por ejemplo, una conexión de base de datos o un proveedor social como Facebook). Este enfoque le permite diferenciar el acceso de los usuarios a los métodos de Amazon API Gateway cuando están protegidos con AWS IAM.

<div id="configure-auth0">
  #### Configurar Auth0
</div>

Inicie sesión en su cuenta de Auth0. Se le redirigirá al Dashboard de administración. Haga clic en **+ New Application**, que se encuentra en la esquina superior derecha de la página.

Asigne a su nueva aplicación el nombre AWS API Gateway e indique que esta aplicación será una aplicación de una sola página. Haga clic en **Create**.

Vaya a la pestaña Addons de la aplicación que acaba de crear. Con el interruptor correspondiente, habilite Amazon Web Services. Esto habilita la delegación de AWS.

<div id="configure-aws">
  #### Configurar AWS
</div>

Siga el tutorial [How to Set Up AWS for Delegated Authentication](/es/docs/customize/integrations/aws/how-to-set-up-aws-for-delegated-authentication) para configurar AWS para el acceso delegado, que usa SAML. Tenga en cuenta lo siguiente:

* Siga las [instrucciones a continuación](#setting-the-permissions-policy-on-your-iws-iam-role) para adjuntar la política de permisos a su rol en lugar de seguir las del tutorial enlazado;
* Asigne el nombre `auth0` al proveedor de SAML que cree;
* Asigne el nombre `auth0-api-role` al rol de AWS IAM.

<div id="set-the-permissions-policy-on-your-iws-iam-role">
  ##### Establezca la política de permisos en su rol de IAM de IWS
</div>

Una vez que haya configurado el rol de IAM de AWS, agregará una política a `auth0-api-role` que le permitirá ejecutar los métodos de su API Gateway. Para obtener más información sobre este proceso, consulte [Permisos de acceso de usuario para Amazon API Gateway](http://docs.aws.amazon.com/apigateway/latest/developerguide/permissions.html).

<div id="getting-the-gateway-api-arn">
  #### Obtención del ARN de API Gateway
</div>

Antes de comenzar, necesitará el ARN de su API Gateway:

1. Vaya a [Amazon API Gateway Console](https://console.aws.amazon.com/apigateway) e inicie sesión.
2. Seleccione la API correspondiente.
3. Haga clic en cualquiera de los **Methods** asociados con la API para abrir la página **Method Execution**.
4. En la página **Method Execution**, el cuadro **Method Request** de la esquina superior izquierda muestra el **ARN** de la API, aunque incluye el nombre del método:

`arn:aws:execute-api:us-east-2:484857107747:97i1dwv0j4/*/POST/`

Deberá quitar el nombre del método para obtener el ARN base de la API:

`arn:aws:execute-api:us-east-2:484857107747:97i1dwv0j4/*`

El comodín (`*`) del ARN anterior habilita permisos para su API en todas las etapas, pero puede implementar las distintas etapas de forma individual (por ejemplo, desarrollo, luego pruebas y después producción).

Seleccione el rol `auth0-api-role` que acaba de crear para abrir su página **Summary**.

Expanda **Inline Policies** y haga clic en **click here**.

Seleccione **Custom Policy** y haga clic en **Select**.

Edite el documento de la política. Puede establecer **Policy Name** con el valor que desee, pero le sugerimos algo como `api-gateway-policy`. Para habilitar el acceso a los métodos de la API para este rol, aplique la siguiente política después de actualizar el ARN con el de su API.

```json lines theme={null}
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "execute-api:*"
            ],
            "Resource": [
                "arn:[{yourArn}]"
            ]
        }
    ]
}
```

Haga clic en **Apply Policy**.

Como API Gateway asumirá este rol en nombre del usuario, la política de confianza debe permitir esta acción. Para ello, edite las Trust Relationships del rol; para hacerlo, vaya a esta pestaña en la página Summary del rol.

La relación de confianza final debería ser similar a la siguiente:

export const codeExample = `{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "auth0",
      "Effect": "Allow",
      "Principal": {
        "Federated": "arn:aws:iam::012345670:saml-provider/auth0-api"
      },
      "Action": "sts:AssumeRoleWithSAML",
      "Condition": {
        "StringEquals": {
          "SAML:iss": "urn:{yourDomain}"
        }
      }
    },
    {
      "Sid": "gateway",
      "Effect": "Allow",
      "Principal": {
        "Service": "apigateway.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}`;

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

En este punto, deberá configurar la autorización en [API Gateway](https://console.aws.amazon.com/apigateway).

En la vista **Resources**, seleccione el método POST en `/pets`.

Haga clic en el enlace **Method Request**.

Haga clic en el ícono de edición junto a **Authorization Type** y seleccione AWS\_IAM. Luego, haga clic en el **Check Button** junto al campo para guardar la configuración.

<div id="step-2-set-up-cors-and-deploy-the-api">
  ### Paso 2. Configura CORS e implementa la API
</div>

Nuestra aplicación de una sola página (SPA) accederá a métodos de la API web desde un dominio distinto del de la página. La configuración de Cross-Origin Resource Sharing debe permitir explícitamente esta acción para que el navegador autorice el acceso a AWS API Gateway. Normalmente, el navegador primero enviará una solicitud `OPTIONS` para comprobar qué acciones permite el sitio.

Selecciona `/pets` en Resources y haz clic en **Create Method**. En la lista desplegable, selecciona **OPTIONS** y haz clic en la **marca de verificación** para guardar la configuración.

El navegador usa el método Options para obtener los encabezados HTTP necesarios, pero la función requiere instrucciones adicionales sobre qué hacer. En la pantalla de configuración de `OPTIONS`, establece las siguientes variables/parámetros:

* **Integration Type**: Lambda Function;
* **Use Lambda Proxy Integration**: déjalo sin marcar;
* **Lambda Region**: selecciona tu región;
* **Lambda Function**: NoOp.

Haz clic en **Save**. En la siguiente ventana emergente, concede a tu función Lambda los permisos que necesita.

A continuación, se te redirigirá automáticamente a la página Method Execution de `OPTIONS`. Abre la página Method Response.

Expande la sección **200** ubicada debajo de la barra HTTP Status y agrega los siguientes encabezados de respuesta:

* Access-Control-Allow-Headers;
* Access-Control-Allow-Methods;
* Access-Control-Allow-Origin.

A continuación, asigna los valores correspondientes a cada uno de los encabezados de respuesta. Después de volver a la página Method Execution, haz clic en **Integration Response**. Después de expandir la fila asociada con el estado de respuesta **200** del método, expande **Header Mappings** y aplica las siguientes asignaciones:

* Access-Control-Allow-Headers: `'Content-Type,X-Amz-Date,Authorization,x-api-key,x-amz-security-token'`;
* Access-Control-Allow-Origin: `'*'`
* Access-Control-Allow-Methods: `'POST, GET, OPTIONS'`

Por último, repite los pasos anteriores para habilitar CORS en los métodos POST y GET. Sin embargo, en estos dos métodos, agregarás un único encabezado, Access-Control-Allow-Origin, y su valor debe establecerse en `'*'`.

<div id="deploy-the-api">
  ### Desplegar la API
</div>

Vuelva a la vista **Resources** de su API. Haga clic en **Actions** y seleccione **DEPLOY API**.

Seleccione **New Stage** en **Deploy State** y asigne a la etapa el nombre `Test`. Haga clic en el botón **Deploy**.

En la página de resultados, vaya a **SDK Generation**. Seleccione JavaScript como **Platform**. Haga clic en el botón **Generate SDK**.

Guarde el archivo ZIP descargado para usarlo más adelante.