Anunciamos
Como visualizar fotos em um bucket do Amazon S3 em um navegador
Este exemplo de código de script do navegador mostra:
-
Como criar um álbum de fotos em um bucket do Amazon Simple Storage Service (Amazon S3) e permitir que usuários não autenticados visualizem as fotos.
O cenário
Neste exemplo, uma simples página HTML fornece um aplicativo baseado em navegador para visualizar as fotos em um álbum de fotos. O álbum de fotos está em um bucket do Amazon S3 no qual as fotos são carregadas.
![JavaScript em um script de navegador usando buckets do Amazon S3 para álbuns de fotos.](images/s3-photo-album-example.png)
O script do navegador usa o SDK para JavaScript para interagir com um bucket do Amazon S3. O script usa o método listObjects
da classe cliente do Amazon S3 para permitir que você visualize os álbuns de fotos.
Tarefas de pré-requisito
Para configurar e executar este exemplo, primeiro conclua estas tarefas.
nota
Neste exemplo, você deve usar a mesma região da AWS para o bucket do Amazon S3 e o banco de identidades do Amazon Cognito.
No console do Amazon S3
À medida que você criar o bucket do S3, faça o seguinte:
-
Anote o nome do bucket para que você possa usá-lo em uma tarefa de pré-requisito subsequente, Configurar permissões de função.
-
Escolha uma região da AWS na qual criar o bucket. Essa deve ser a mesma região que você usará para criar um grupo de identidades do Amazon Cognito em uma tarefa de pré-requisito subsequente, Criar um grupo de identidades.
-
Configure permissões de bucket seguindo as instruções em Setting permissions for website access no Guia do usuário do Amazon Simple Storage Service.
No console do Amazon Cognito
Ao criar o banco de identidades, anote o nome dele, bem como o nome do perfil da identidade não autenticada.
Para permitir a visualização de álbuns e fotos, você precisa adicionar permissões a uma função do IAM do grupo de identidades que acabou de criar. Comece criando uma política como a seguir.
Abra o console do IAM
. No painel de navegação à esquerda, escolha Policies (Políticas) e o botão Create policy (Criar política).
-
Na guia JSON, insira a definição JSON a seguir, mas substitua BUCKET_NAME pelo nome do bucket.
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:ListBucket" ], "Resource": [ "arn:aws:s3:::
BUCKET_NAME
" ] } ] } -
Escolha o botão Review policy (Revisar política), nomeie a política, forneça uma descrição (se desejar) e escolha o botão Create policy (Criar política).
Certifique-se de anotar o nome para que você possa encontrá-lo e anexá-lo à função do IAM mais tarde.
Depois que a política for criada, navegue de volta ao console do IAM
Embora o fluxo de trabalho desta tarefa geralmente seja igual ao da Etapa 2: Adicionar uma política ao perfil do IAM criado do tópico Conceitos básicos de um script de navegador, há algumas diferenças a serem observadas:
-
Use a nova política que você acabou de criar, não uma política para Amazon Polly.
-
Na página Attach Permissions (Anexar permissões), para encontrar rapidamente a nova política, abra a lista Filter policies (Filtrar políticas) e escolha Customer managed (Gerenciadas pelo cliente).
Para obter mais informações sobre como criar um perfil do IAM, consulte Criação de um perfil para delegar permissões a um serviço da AWS no Guia do usuário do IAM.
Para que o script do navegador possa acessar o bucket do Amazon S3, você precisa fazer a configuração do CORS como a seguir.
Importante
No novo console do S3, a configuração CORS deve ser JSON.
Como este exemplo permite apenas que os usuários visualizem as fotos que já estiverem no bucket, você precisa criar alguns álbuns no bucket e fazer upload de fotos neles.
nota
Para este exemplo, os nomes dos arquivos de fotos devem começar com um sublinhado único ("_"). Esse caractere é importante para a filtragem mais tarde. Além disso, certifique-se de respeitar os direitos autorais dos proprietários das fotos.
-
No console do Amazon S3
, abra o bucket que você criou anteriormente. -
Na guia Overview (Visão geral), escolha o botão Create folder (Criar pasta) para criar pastas. Para este exemplo, nomeie as pastas como "album1", "album2" e "album3".
-
Para album1 e album2, selecione a pasta e, depois, fazer upload de fotos nela como a seguir:
-
Escolha o botão Upload (Fazer upload).
-
Arraste ou escolha os arquivos de fotos que deseja usar e escolha Next (Próximo).
-
Em Manage public permissions (Gerenciar permissões públicas), escolha Grant public read access to this object(s) (Conceder acesso público de leitura a este(s) objeto(s)).
-
Escolha o botão Upload (Fazer upload) (no canto inferior esquerdo).
-
-
Deixe album3 vazio.
Definir a página da web
O HTML do aplicativo de exibição de fotos consiste em um elemento <div>
no qual o script do navegador cria a interface de visualização. O primeiro elemento <script>
adiciona o SDK ao script do navegador. O segundo elemento <script>
adiciona o arquivo JavaScript externo que contém o código do script do navegador.
Para este exemplo, o arquivo é denominado PhotoViewer.js
e está localizado na mesma pasta que o arquivo HTML. Para encontrar o SDK_VERSION_NUMBER atual, consulte a Referência da API para o SDK para JavaScript no Guia de referência da API. AWS SDK for JavaScript
<!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>
Como configurar o SDK
Obtenha as credenciais necessárias para configurar o SDK chamando o método CognitoIdentityCredentials
. Você precisa fornecer o ID do grupo de identidades do Amazon Cognito. Depois crie um objeto de serviço 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"); }
O restante do código neste exemplo define as funções a seguir para coletar e apresentar informações sobre os álbuns e as fotos no bucket.
-
listAlbums
-
viewAlbum
Listar álbuns no bucket
Para listar todos os álbuns existentes no bucket, a função listAlbums
do aplicativo chama o método listObjects
do objeto de serviço AWS.S3
. A função usa a propriedade CommonPrefixes
para que a chamada retorne somente os objetos que são usados como álbuns (ou seja, as pastas).
O restante da função utiliza a lista de álbuns do bucket do Amazon S3 e gera o HTML necessário para exibir a lista de álbuns na página da 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); } }); }
Visualizar um álbum
Para exibir o conteúdo de um álbum no bucket do Amazon S3, a função viewAlbum
do aplicativo assumirá o nome de um álbum e criará a chave do Amazon S3 para esse álbum. A função chama então o método listObjects
do objeto de serviço AWS.S3
para obter uma lista de todos os objetos (as fotos) do álbum.
O restante da função utiliza a lista de objetos do álbum e gera o HTML necessário para exibir as fotos na página da 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;"); }); }