> ## 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 3 del tutorial de Amazon API Gateway

# Paso 3 del tutorial de AWS API Gateway

<Warning>
  Esta funcionalidad usa delegación. De forma predeterminada, la delegación está deshabilitada para los inquilinos que, a fecha de 8 de junio de 2017, no tenían ningún complemento en uso. Los inquilinos legados que actualmente usan un complemento que requiere delegación pueden seguir usando esta funcionalidad. Si la funcionalidad de delegación cambia o se elimina 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, tenga en cuenta que la delegación no admite el uso de dominios personalizados, por lo que cualquier funcionalidad que dependa de ella puede no funcionar por completo junto con un dominio personalizado.
</Warning>

<div id="step-3-build-the-application">
  ## Paso 3: Crear la aplicación
</div>

En este paso, creará una aplicación sin servidor de una sola página con el framework AngularJS, que publicará desde un bucket de AWS S3 configurado para funcionar como un sitio web estático.

<div id="step-1-set-up-your-sample-application">
  ### Paso 1. Configure la aplicación de ejemplo
</div>

Para empezar con una aplicación sencilla, [descargue un proyecto de ejemplo](https://github.com/auth0/auth0-aws/tree/master/examples/api-gateway/client) específico de este tutorial. Inicie sesión para que sus credenciales de Auth0 queden preconfiguradas.

Copie el contenido de este proyecto de inicio en una carpeta local llamada `pets`, que usará durante el resto de este tutorial. Dentro de esta carpeta, actualice `auth0-variables.js` con `AUTH0_CLIENT_ID` y `AUTH0_CLIENT_ID` de su aplicación de Auth0 (esta información está disponible en el [Dashboard de administración](https://manage.auth0.com/#/applications) de la aplicación en cuestión).

<div id="aws-s3-bucket">
  #### bucket de AWS S3
</div>

Asegúrese de haber [creado el bucket de AWS S3 configurado para funcionar como un sitio web estático](http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html). Durante el proceso de configuración, copie el contenido de la carpeta `pets` en su bucket de S3 para proporcionar contenido al sitio web.

Si utiliza un bucket ya existente, puede mover los archivos con la AWS CLI mediante el siguiente comando.

```bash lines theme={null}
aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/
```

Antes de continuar, asegúrese de tener al menos un usuario asociado a su conexión Username-Password-Authentication (o a la conexión de base de datos asociada con la aplicación que está usando). Para aprovechar al máximo la funcionalidad de su aplicación de ejemplo y su integración con AWS, necesitará ese usuario para probar la autenticación y obtener acceso.

Por último, asegúrese de que Auth0 permita la autenticación desde su sitio web proporcionando la URL en el campo **Orígenes permitidos** de la página de configuración de su aplicación. La URL de su sitio web debería tener un aspecto similar a este:

`http://your-bucket.s3-website-us-east-1.amazonaws.com`

Si no sabe cuál es su URL, puede encontrarla en la pestaña **Propiedades** de su bucket de S3.

Antes de continuar, pruebe a iniciar sesión en su aplicación. Abra `http://your-bucket-domain/index.html` en su navegador. Después de iniciar sesión, debería aparecer un cuadro de alerta con el mensaje "getPets not implemented":

También debería ver la página para ver las mascotas.

<div id="use-delegation-to-get-an-aws-token">
  ### Usa la delegación para obtener un token de AWS
</div>

En este punto, ya tienes la autenticación configurada con Auth0 y cuentas con un <Tooltip tip="OpenID: estándar abierto para la autenticación que permite a las aplicaciones verificar las identidades de los usuarios sin recopilar ni almacenar información de inicio de sesión." cta="Ver glosario" href="/es/docs/glossary?term=OpenID">OpenID</Tooltip> <Tooltip tip="OpenID: estándar abierto para la autenticación que permite a las aplicaciones verificar las identidades de los usuarios sin recopilar ni almacenar información de inicio de sesión." cta="Ver glosario" href="/es/docs/glossary?term=JWT">JWT</Tooltip>. Esta es la estructura de directorios del código generado:

<Frame>
  <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/5fYL14NE1L9WuzUyA0xTky/35e78ca14e6d0c5b36582b5b74a6fc55/aws-api-gateway-project.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=19516d4cbc0347a1caf24023d06807f9" alt="AWS API Gateway - directorio del proyecto" width="288" height="269" data-path="docs/images/cdy7uua7fh8z/5fYL14NE1L9WuzUyA0xTky/35e78ca14e6d0c5b36582b5b74a6fc55/aws-api-gateway-project.png" />
</Frame>

Puedes usar la capacidad de delegación de Auth0 para obtener un <Tooltip tip="Token de acceso: credencial de autorización, en forma de una cadena opaca o un JWT, utilizada para acceder a una API." cta="Ver glosario" href="/es/docs/glossary?term=Access+Token">Token de acceso</Tooltip> de AWS basado en el <Tooltip tip="ID Token: credencial destinada al propio cliente, en lugar de al acceso a un recurso." cta="Ver glosario" href="/es/docs/glossary?term=identity+token">token de identidad</Tooltip> de Auth0. Internamente, Auth0 autentica tu token de identidad y luego usa <Tooltip tip="ID Token: credencial destinada al propio cliente, en lugar de al acceso a un recurso." cta="Ver glosario" href="/es/docs/glossary?term=SAML">SAML</Tooltip> en función del addon que configuraste.

Actualiza `pets/login/login.js` de la siguiente manera para obtener un token de delegación de AWS a partir del token de identidad después de iniciar sesión correctamente con `auth.signin`. Ten en cuenta que estás tratando como Admin a cualquier usuario que no haya iniciado sesión mediante una Conexión social. Más adelante, programaremos un segundo rol y mostraremos mejores formas de aplicar la selección de roles.

```js lines expandable theme={null}
auth.signin(params, function(profile, token) {
  //Establecer usuario como admin si no usó un login social.
  profile.isAdmin = !profile.identities[0].isSocial;
  store.set('profile', profile);
  store.set('token', token);

  // obtener token de delegación a partir del identity token.
  var options = getOptionsForRole(profile.isAdmin, token);

  // TODO: Paso 3: Habilitar esta sección una vez que configure la delegación de AWS.
  /*
  auth.getToken(options)
    .then(
      function(delegation)  {
        store.set('awstoken', delegation.Credentials);
        $location.path("/");
      },
    function(err) {
       console.log('no se pudo adquirir el token de delegación', err);
  });
  */
  // TODO: Paso 3: Eliminar esta redirección después de agregar la API get token.
  $location.path("/");

}, function(error) {
  console.log("Hubo un error al iniciar sesión", error);
});
```

<div id="modify-the-role-and-principal-strings">
  #### Modifique las cadenas `role` y `principal`
</div>

Para modificar las cadenas `role` y `principal` (que corresponden a las dos últimas líneas de la instrucción `if` incluida en la función proporcionada), especifique los valores adecuados mediante [Rules](https://manage.auth0.com/#/rules):

```javascript lines theme={null}
function (user, context, callback) {
  if (context.clientID === 'CLIENT_ID' &&
      context.protocol === 'delegation') {
    // establecer configuración de AWS
    context.addonConfiguration = context.addonConfiguration || {};
    context.addonConfiguration.aws = context.addonConfiguration.aws || {};
    context.addonConfiguration.aws.principal = 'arn:aws:iam::[omitted]:saml-provider/auth0-provider';
    context.addonConfiguration.aws.role = 'arn:aws:iam::[omitted]:role/auth0-role';
  }

  callback(null, user, context);
}
```

Asegúrate de actualizar los valores de ARN de `role` y `[principal]` con los correspondientes a tu integración.

Copia los archivos actualizados en tu bucket de S3 para tu sitio web.

Opcionalmente, puedes establecer un punto de interrupción en el navegador en `store.set('awstoken', delegation.Credentials);`. Cuando cierres sesión y vuelvas a iniciarla, inspecciona `delegation.Credentials` al llegar al punto de interrupción. Verás valores conocidos, como AccessKeyId y SecretAccessKey:

```js lines theme={null}
{
    AccessKeyId: "ASIAJB...BNQ",
    SecretAccessKey: "vS+b6...2Noav",
    SessionToken: "AQoDYBqsivOV...DdQW0gsKr8rgU=",
    Expiration: "2015-08-27T14:48:32.000Z"
}
```

Si no ves estos valores, asegúrate de que tengas habilitado el addon de Amazon Web Services en la pestaña Addons de tu aplicación de Auth0.

<div id="display-pets-with-the-aws-api-service">
  ### Mostrar las mascotas con el servicio de API de AWS
</div>

Lo primero que harás será mostrar las mascotas a los usuarios finales.

<div id="add-the-api-code-to-call-your-api">
  #### Agrega el código de la API para llamar a tu API
</div>

Para agregar el código de la API para llamar a tu servicio, copia el contenido de `apiGateway-js-sdk.zip` que descargaste anteriormente al directorio `pets`. El contenido debe incluir:

* `apiClient.js`;
* la carpeta `lib`;
* `README.md`.

Para revisar la descarga, consulta [Tutorial de AWS API Gateway, parte 2](/es/docs/customize/integrations/aws/aws-api-gateway-delegation/aws-api-gateway-delegation-2#deploy-the-api).

Ya existe un archivo `README.md` en el directorio `pets`, por lo que tendrás que cambiarle el nombre a uno de los archivos para conservar ambos en el directorio. El archivo `README.md` de API Gateway explica cómo usar la aplicación de API desde tu aplicación de Auth0.

Abre el archivo `index.html`, ubicado en la raíz de la carpeta `pets`, para agregar a `index.html` todos los scripts enumerados en la parte superior del archivo Léame de la API:

```html lines theme={null}
<!-- scripts para aws api gateway, inclúyelos después de crear tu paquete desde aws para api gateway. -->
<script type="text/javascript" src="/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="/lib/moment/moment.js"></script>
<script type="text/javascript" src="/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="/apigClient.js"></script>
```

Si abre `apigClient.js`, verá que la biblioteca descargada ha creado contenedores como `petsPost` y `petsGet` para los métodos de su API. No necesita modificar este código generado.

<div id="configure-the-getpets-method">
  #### Configura el método getPets
</div>

Abre `home.js` en la carpeta `home` y actualiza el contenido de `getPets` con un método para obtener los datos de las mascotas (asegúrate de actualizar la región si no se está ejecutando en `us-east-1`):

```javascript lines theme={null}
function getPets() {
    // esto no está autenticado
    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // La región donde está desplegada la API
    });

    apigClient.petsGet({},{})
      .then(function(response) {
        console.log(response);
        $scope.pets = response.data;
        $scope.$apply();
      }).catch(function (response) {
        alert('pets get failed');
        showError(response);
    });
}
```

Copia el código actualizado en tu bucket de S3. Actualiza la página para ver dos animales en la lista (si ejecutaste la prueba descrita anteriormente en tus API, que creó estas mascotas).

<div id="update-pets-with-the-aws-api-service">
  ### Actualizar Pets con el servicio de API de AWS
</div>

Ahora que tiene una aplicación de Auth0 funcional con API Gateway, agregará un método para actualizar la tabla `pets`.

Modifique la lógica del método `putPets` para actualizar la tabla `pets` mediante la función de API. Esta función se usará tanto para agregar mascotas como para eliminarlas.

```javascript lines theme={null}
function putPets(updatedPets) {
    var body = {pets: updatedPets};

    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // establece esto según la región en la que estés trabajando.
    });

    apigClient.petsPost({},body)
      .then(function(response) {
        console.log(response);
       }).catch(function (response) {
        alert('actualización de mascotas fallida');
        showError(response);
      });
}
```

Copia el código actualizado en tu bucket de S3. Prueba el método:

1. Cierra sesión y vuelve a iniciarla.
2. Introduce valores en `Pet Type` y `Pet Price`.
3. Haz clic en **Save** para enviar tus datos.

Deberías ver un mensaje que diga: "Tenemos un `<Pet Type>` en venta por `<Pet Price>`", con un botón rojo **REMOVE** a la izquierda.

Para añadir seguridad, agrega la función `getSecureApiClient` al inicio del método `putPets`:

```javascript lines theme={null}
function putPets(updatedPets) {
     var apigClient = getSecureApiClient();
}
```

Copie el código en su bucket de S3.

La función `getSecureApiClient` que se le proporciona recupera del almacenamiento local el token de AWS obtenido mediante delegación con la API y utiliza la clave de acceso, la clave secreta y el token de sesión:

```javascript lines theme={null}
function getSecureApiClient() {
    var awstoken = store.get('awstoken');

    return apigClientFactory.newClient({
        accessKey: awstoken.AccessKeyId,
        secretKey: awstoken.SecretAccessKey,
        sessionToken: awstoken.SessionToken,
        region: 'us-east-1' // La región desde la que estás trabajando.
    });
  }
```