La versión 2 de AWS SDK para JavaScript ha llegado al final del soporte. Se recomienda que migre a [AWS SDK para JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Para ver detalles e información adicionales sobre cómo realizar la migración, consulte este [anuncio](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

# Visualización de fotos en un bucket de Amazon S3 desde un navegador
<a name="s3-example-photos-view"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/es_es/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**Este ejemplo de código de script de navegador muestra:**
+ Cómo crear un álbum de fotos en un bucket de Amazon Simple Storage Service (Amazon S3) y permitir que los usuarios no autenticados vean las fotos.

## El escenario
<a name="s3-example-photos-view-scenario"></a>

En este ejemplo, una página HTML sencilla proporciona una aplicación basada en navegador para ver las fotos de un álbum de fotos. El álbum de fotos se encuentra en un bucket de Amazon S3 en el que se cargan las fotos.

![\[JavaScript en un script de navegador que usa buckets de Amazon S3 para álbumes de fotos.\]](http://docs.aws.amazon.com/es_es/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


El script de navegador usa el SDK para JavaScript para interactuar con un bucket de Amazon S3. El script utiliza el método [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property) de la clase del cliente de Amazon S3 para poder ver los álbumes de fotos.

## Tareas previas necesarias
<a name="s3-example-photos-view-scenario-prerequisites"></a>

Para configurar y ejecutar este ejemplo, primero debe completar las tareas siguientes.

**nota**  
En este ejemplo, debe utilizar la misma región de AWS tanto para el bucket de Amazon S3 como para el grupo de identidades de Amazon Cognito.

### Creación del bucket
<a name="s3-example-photos-view-prereq-bucket"></a>

En la [consola de Amazon S3](https://console.aws.amazon.com/s3/), cree un bucket de Amazon S3 donde pueda almacenar álbumes y fotos. Para obtener más información acerca de cómo usar la consola para crear un bucket de S3, consulte la sección de [creación de un bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) en la *Guía del usuario de la consola de Amazon Simple Storage Service*.

Cuando cree el bucket de S3, asegúrese de hacer lo siguiente:
+ Anote el nombre del bucket para que pueda utilizarlo en una tarea posterior, Configuración de los permisos del rol.
+ Elija una región de AWS en la que crear el bucket. Debe ser la misma región que utilizará para crear un grupo de identidades de Amazon Cognito en una tarea posterior necesaria, Creación de un grupo de identidades.
+ Configure permisos de buckets siguiendo [Configuración de permisos para el acceso a sitios web](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html) en la *Guía del usuario de Amazon Simple Storage Service*.

### Creación de un grupo de identidades
<a name="s3-example-photos-view-prereq-idpool"></a>

En la [consola de Amazon Cognito](https://console.aws.amazon.com/cognito/), cree un grupo de identidades de Amazon Cognito, tal y como se describe en [Paso 1: Creación de un grupo de identidades en Amazon Cognito](getting-started-browser.md#getting-started-browser-create-identity-pool) del tema *Introducción a los scripts de navegador*.

Según cree el grupo de identidades, anote el nombre del grupo de identidades, así como el nombre del rol para la identidad **sin autenticar**.

### Configuración de los permisos del rol
<a name="s3-example-photos-view-prereq-perms"></a>

Para permitir la visualización de álbumes y fotos, debe añadir permisos a un rol de IAM del grupo de identidades que acaba de crear. Comience creando una política tal y como se indica a continuación.

1. Abra la [consola de IAM](https://console.aws.amazon.com/iam/).

1. En el panel de navegación de la izquierda, elija **Policies (Políticas)** y, a continuación, elija el botón **Create Policy (Crear política)**.

1. En la pestaña **JSON**, escriba la siguiente definición de JSON, pero sustituya *BUCKET\$1NAME* por el nombre del bucket.

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement": [
         {
            "Effect": "Allow",
            "Action": [
               "s3:ListBucket"
            ],
            "Resource": [
               "arn:aws:s3:::BUCKET_NAME"
            ]
         }
      ]
   }
   ```

------

1. Elija el botón **Review policy (Revisar política)**, asigne un nombre a la política y proporcione una descripción (si lo desea); a continuación, seleccione el botón **Create policy (Crear política)**.

   Asegúrese de anotar el nombre para que pueda encontrarlo y asociarlo al rol de IAM más adelante.

Una vez que se ha creado la política, vuelva a la [consola de IAM](https://console.aws.amazon.com/iam/). Busque el rol de IAM de la **identidad sin autenticar** que creó Amazon Cognito en la tarea previa necesaria, Creación de un grupo de identidades. Puede utilizar la política que acaba de crear para añadir permisos a esta identidad.

Aunque el flujo de trabajo de esta tarea normalmente es el mismo que el de [Paso 2: Añadir una política al rol de IAM creado](getting-started-browser.md#getting-started-browser-iam-role) del tema *Introducción a los script de navegador*, hay algunas diferencias que se deben tener en cuenta:
+ Utilice la nueva política que acaba de crear, no una política de Amazon Polly.
+ En la página **Attach Permissions (Asociar permisos)**, para encontrar rápidamente la nueva política, abra la lista **Filter policies (Filtrar políticas)** y elija **Customer managed (Administradas por el cliente)**.

Para obtener más información sobre cómo crear un rol de IAM, consulte [Creación de un rol para delegar permisos a un servicio de AWS](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) en la *Guía del usuario de IAM*.

### Configuración de CORS
<a name="s3-example-photos-view-cors-configuration"></a>

Para que el script de navegador pueda obtener acceso al bucket de Amazon S3, tiene que definir su [configuración de CORS](cors.md#configuring-cors-s3-bucket) tal y como se indica a continuación.

**importante**  
En la nueva consola S3, la configuración de CORS debe ser JSON.

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ]
    }
]
```

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
```

------

### Creación de álbumes y carga de fotos
<a name="s3-example-photos-view-create-albums"></a>

Como este ejemplo solo permite a los usuarios ver las fotos que ya están en el bucket, debe crear algunos álbumes en el bucket y cargar fotos en ellos.

**nota**  
En este ejemplo, los nombres de archivo de los archivos de fotos deben comenzar por un guion bajo ("\$1"). Este carácter es importante para poder filtrar las fotos posteriormente. Además, asegúrese de respetar los derechos de autor de los propietarios de las fotos.

1. En la [consola de Amazon S3](https://console.aws.amazon.com/s3/), abra el bucket que creó anteriormente.

1. En la pestaña **Overview (Información general)**, eija el botón **Create folder (Crear carpeta)** para crear carpetas. En este ejemplo, llame a las carpetas "album1", "album2" y "album3".

1. Para **album1** y después para **album2**, seleccione la carpeta y cargue fotos en ella como se indica a continuación:

   1. Elija el botón **Upload (Cargar)**.

   1. Arrastre o elija los archivos de foto que desea usar y después elija **Next (Siguiente)**.

   1. En **Manage public permissions (Administrar permisos públicos)**, elija **Grant public read access to this object(s) (Conceder acceso de lectura a este objeto)**.

   1. Elija el botón **Upload (Cargar)** (en la esquina inferior izquierda).

1. Deje **album3** vacío.

## Definición de la página web
<a name="s3-example-photos-view-html"></a>

El código HTML de la aplicación para ver fotos consta de un elemento `<div>` en el que el script de navegador crea la interfaz de visualización. El primer elemento `<script>` añade el SDK al script de navegador. El segundo elemento `<script>` añade el archivo JavaScript externo que contiene el código de script de navegador. 

En este ejemplo, el archivo se denomina `PhotoViewer.js` y se encuentra en la misma carpeta que el archivo HTML. Para encontrar el SDK\$1VERSION\$1NUMBER actual, consulte la referencia de API para el SDK para JavaScript en la [Guía de referencia de la API de AWS SDK para JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/).

```
<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>
```



## Configuración del SDK
<a name="s3-example-photos-view-config"></a>

Obtenga las credenciales que necesita para configurar el SDK llamando al método `CognitoIdentityCredentials`. Debe proporcionar ID del grupo de identidades de Amazon Cognito. A continuación, cree un objeto del servicio `AWS.S3`.

```
// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}
```

El resto del código de este ejemplo define las siguientes funciones para recopilar y presentar información sobre los álbumes y fotos del bucket.
+ `listAlbums`
+ `viewAlbum`

## Listas de álbumes en el bucket
<a name="s3-example-photos-view-list-albums"></a>

Para obtener una lista de todos los álbumes existentes en el bucket, la función `listAlbums` de la aplicación llama al método `listObjects` del objeto del servicio `AWS.S3`. La función utiliza la propiedad `CommonPrefixes` para que la llamada devuelva solo los objetos que se utilizan como álbumes (es decir, las carpetas).

El resto de la función toma la lista de álbumes del bucket de Amazon S3 y genera el código HTML necesario para mostrar la lista de álbumes en la página web.

```
// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          '<button style="margin:5px;" onclick="viewAlbum(\'' +
            albumName +
            "')\">",
          albumName,
          "</button>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml(["<p>Click on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}
```

## Visualización de un álbum
<a name="s3-example-photos-view-viewing-album"></a>

Para mostrar el contenido de un álbum en el bucket de Amazon S3, la función `viewAlbum` de la aplicación toma un nombre de álbum y crea la clave de Amazon S3 para dicho álbum. Luego la función llama al método `listObjects` del objeto del servicio `AWS.S3` para obtener una lista de todos los objetos (las fotos) del álbum.

El resto de la función toma la lista de objetos del álbum y genera el código HTML necesario para mostrar las fotos en la página web.

```
// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        "<br/>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>The following photos are present.</p>"
      : "<p>There are no photos in this album.</p>";
    var htmlTemplate = [
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      "<h2>",
      "End of Album: " + albumName,
      "</h2>",
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
    ];
    document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    document
      .getElementsByTagName("img")[0]
      .setAttribute("style", "display:none;");
  });
}
```