O AWS SDK para JavaScript v2 chegou ao fim do suporte. Recomendamos migrar para o [AWS SDK para JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Para ver detalhes e informações sobre como migrar, consulte este [anúncio](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

# Como visualizar fotos em um bucket do Amazon S3 em um navegador
<a name="s3-example-photos-view"></a>

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

**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
<a name="s3-example-photos-view-scenario"></a>

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.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v2/developer-guide/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 [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property) da classe cliente do Amazon S3 para permitir que você visualize os álbuns de fotos.

## Tarefas de pré-requisito
<a name="s3-example-photos-view-scenario-prerequisites"></a>

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.

### Criar o bucket
<a name="s3-example-photos-view-prereq-bucket"></a>

No console do [Amazon S3](https://console.aws.amazon.com/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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) 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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html) no *Guia do usuário do Amazon Simple Storage Service*.

### Criação de um grupo de identidades
<a name="s3-example-photos-view-prereq-idpool"></a>

No console do [Amazon Cognito](https://console.aws.amazon.com/cognito/), crie um banco de identidades do Amazon Cognito conforme é descrito em [Etapa 1: Criar um banco de identidades do Amazon Cognito](getting-started-browser.md#getting-started-browser-create-identity-pool) 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**.

### Configurar permissões de função
<a name="s3-example-photos-view-prereq-perms"></a>

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.

1. Abra o [console do IAM](https://console.aws.amazon.com/iam/).

1. No painel de navegação à esquerda, escolha **Policies (Políticas)** e o botão **Create policy (Criar política)**.

1. Na guia **JSON**, insira a definição JSON a seguir, mas substitua *BUCKET\$1NAME* pelo nome do bucket.

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

****  

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

------

1. 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](https://console.aws.amazon.com/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](getting-started-browser.md#getting-started-browser-iam-role) 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](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) no *Guia do usuário do IAM*.

### Configurar o CORS
<a name="s3-example-photos-view-cors-configuration"></a>

Para que o script do navegador possa acessar o bucket do Amazon S3, você precisa fazer a [configuração do CORS](cors.md#configuring-cors-s3-bucket) como a seguir.

**Importante**  
No novo console do S3, a configuração CORS deve 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>
```

------

### Criar álbuns e fazer upload de fotos
<a name="s3-example-photos-view-create-albums"></a>

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 ("\$1"). Esse caractere é importante para a filtragem mais tarde. Além disso, certifique-se de respeitar os direitos autorais dos proprietários das fotos.

1. No [console do Amazon S3](https://console.aws.amazon.com/s3/), abra o bucket que você criou anteriormente.

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

1. 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)**.

   1. Arraste ou escolha os arquivos de fotos que deseja usar e escolha **Next (Próximo)**.

   1. 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))**.

   1. Escolha o botão **Upload (Fazer upload)** (no canto inferior esquerdo).

1. Deixe **album3** vazio.

## Definir a página da web
<a name="s3-example-photos-view-html"></a>

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\$1VERSION\$1NUMBER atual, consulte a Referência da API para o SDK para JavaScript no Guia de referência da API. 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>
```



## Como configurar o SDK
<a name="s3-example-photos-view-config"></a>

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
<a name="s3-example-photos-view-list-albums"></a>

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
<a name="s3-example-photos-view-viewing-album"></a>

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;");
  });
}
```