O cenário Tarefas de pré-requisito Definir a página da web Como configurar o SDK Listar álbuns no bucket Visualizar um álbum

Como visualizar fotos em um bucket do Amazon S3 em um navegador

JavaScript code example that applies to browser execution

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.

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, crie um bucket do Amazon S3 em que você possa armazenar álbuns e fotos. Para obter mais informações sobre como criar um bucket do S3, consulte Criar um bucket no Guia do usuário do Amazon Simple Storage Service.

À 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, crie um banco de identidades do Amazon Cognito conforme é descrito em Etapa 1: Criar um banco de identidades do Amazon Cognito do tópico Conceitos básicos de um script de navegador.

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. Encontre o perfil do IAM para a identidade não autenticada que o Amazon Cognito criou na tarefa de pré-requisito anterior, Criar um banco de identidades. Você usa a política recém-criada para adicionar permissões a essa identidade.

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:
1. Escolha o botão Upload (Fazer upload).
2. Arraste ou escolha os arquivos de fotos que deseja usar e escolha Next (Próximo).
3. 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)).
4. 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;");
  });
}

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

Exemplos de navegador Amazon S3

Visualizar fotos em um bucket do Amazon S3: Código completo