Visualización de fotos en un bucket de Amazon S3 desde un navegador - AWS SDK for JavaScript

LaAWS SDK for JavaScript versión 3 (v3) es una reescritura de la versión 2 con algunas funciones nuevas y excelentes, incluida la arquitectura modular. Para obtener más información, consulte la Guía para desarrolladores de la versiónAWS SDK for JavaScript 3.

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Visualización de fotos en un bucket de Amazon S3 desde un navegador


                JavaScript code example that applies to browser execution

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

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 de un script de navegador que usa buckets de Amazon S3 para álbumes de fotos.

El script de navegador usa SDK para JavaScript para interactuar con un bucket de Amazon S3. El guión utiliza ellistObjectsde la clase de cliente de Amazon S3 para poder ver los álbumes de fotos.

Tareas previas necesarias

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

nota

En este ejemplo, debe utilizar lo mismoAWSRegión del bucket de Amazon S3 y del grupo de identidades de Amazon Cognito.

En el navegadorConsola de Amazon S3, cree un bucket de Amazon S3 donde pueda almacenar álbumes y fotos. Para obtener más información acerca del uso de la consola para crear un bucket de S3, consulteCreación de un bucketen laAmazon 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, Creación de un grupo de identidades.

  • En el navegadorCrear un bucketasistente, en elConfiguración de acceso público..., en laAdministrar listas de control de acceso (ACL) públicasgrupo, desactive estas casillas: Block new public ACLs and uploading public objects (Bloquear nuevas ACL públicas y la carga de objetos públicos)yRemove public access granted through public ACLs (Quitar el acceso público concedido mediante ACL públicas).

    Para obtener información acerca de cómo comprobar y configurar los permisos de un bucket de, consulteConfigurar permisos para el acceso a sitios weben laAmazon Simple Storage Service.

En el navegadorConsola de Amazon Cognito, cree un grupo de identidades de Amazon Cognito, tal y como se describe enPaso 1: Creación de un grupo de identidades de Amazon CognitodelIntroducción a los script de navegadortema.

Cuando cree el grupo de identidades:

  • Anote el nombre del grupo de identidades, así como el nombre del rol para la identidad sin autenticar.

  • En la página Sample Code (Código de ejemplo), seleccione "JavaScript" en la lista Platform (Plataforma). A continuación, copie o anote el código de ejemplo.

    nota

    Debe elegir "JavaScript" en la lista Platform (Plataforma) para que su código funcione.

Para permitir la visualización de álbumes y fotos, tiene que 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.

  2. 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).

  3. En la pestaña JSON, escriba la siguiente definición de JSON, pero sustituya BUCKET_NAME por el nombre del bucket.

    { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:ListBucket" ], "Resource": [ "arn:aws:s3:::BUCKET_NAME" ] } ] }
  4. 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 laEn la consola de IAM. Busque el rol de IAM para elsin autenticaridentidad que Amazon Cognito creó en la tarea anterior, 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 de al rol de IAM creado 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 información adicional acerca de la creación de un rol de IAM, consulteCreación de un rol para delegar permisos a unAWSService (Servicio)en laIAM User Guide.

Para que el script de navegador pueda obtener acceso al bucket de Amazon S3, tiene que configurar suConfiguración de CORSde la siguiente manera.

importante

En la nueva consola de 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>

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 ("_"). 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 el navegadorConsola de Amazon S3, abra el bucket que creó anteriormente.

  2. 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".

  3. 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).

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

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

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

  4. Deje album3 vacío.

Definición de la página web

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 saber el SDK_VERSION_NUMBER actual, consulte la referencia de la API del SDK para JavaScript enAWS SDK for JavaScriptGuía de referencia de la API.

<!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

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

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

Para mostrar el contenido de un álbum en el bucket de Amazon S3,viewAlbumtoma un nombre de álbum y crea la clave Amazon S3 de 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;'); }); }