O [Guia de referência da API do AWS SDK para JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) descreve em detalhes todas as operações da API para o AWS SDK para JavaScript versão 3 (V3).
As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Conceitos básicos sobre o navegador
Esta seção mostra um exemplo que demonstra como executar a versão 3 (V3) do AWS SDK JavaScript no navegador.
**nota**
A execução da V3 no navegador é um pouco diferente da versão 2 (V2). Para obter mais informações, consulte [Uso dos navegadores na V3](welcome.md#v3_browsers).
Para outros exemplos de uso (V3) do AWS SDK para JavaScript, consulte. [SDK para exemplos de JavaScript código (v3)](javascript_code_examples.md)
**Este exemplo de aplicativo web mostra:**
+ Como acessar AWS serviços usando o Amazon Cognito para autenticação.
+ Como ler uma lista de objetos em um bucket do Amazon Simple Storage Service (Amazon S3) usando AWS Identity and Access Management uma função (IAM).
**nota**
Este exemplo não é usado Centro de Identidade do AWS IAM para autenticação.
## O cenário
O Amazon S3 é um serviço de armazenamento de objetos que oferece escalabilidade, disponibilidade de dados, segurança e performance líderes do setor. Você pode usar o Amazon S3 para armazenar dados como objetos em contêineres chamados buckets. Para obter mais informações sobre o Amazon S3, consulte o [Guia do usuário da Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/).
Este exemplo mostra como configurar e executar um aplicativo web que assume um perfil do IAM para ler de um bucket do Amazon S3. O exemplo usa a biblioteca front-end React e as ferramentas front-end Vite para fornecer um ambiente de desenvolvimento. JavaScript O aplicativo web usa um pool de identidade do Amazon Cognito para fornecer as credenciais necessárias para acessar os serviços. AWS O exemplo de código incluído demonstra os padrões básicos para carregar e usar o AWS SDK JavaScript em aplicativos web.
## Etapa 1: Criar um banco de identidades e um perfil do IAM do Amazon Cognito
Neste exercício, você cria e usa um banco de identidades do Amazon Cognito para fornecer acesso não autenticado ao aplicativo web do serviço Amazon S3. A criação de um grupo de identidades também cria uma função AWS Identity and Access Management (IAM) para oferecer suporte a usuários convidados não autenticados. Neste exemplo, vamos trabalhar apenas com a função de usuário não autenticado para manter o enfoque na tarefa. Você poderá integrar o suporte para um provedor de identidade e os usuários autenticados depois. Para obter mais informações sobre como adicionar um banco de identidades do Amazon Cognito, consulte [Tutorial: criação de um banco de identidades](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) no *Guia do desenvolvedor do Amazon Cognito*.
**Para criar um banco de identidades e um perfil do IAM associado do Amazon Cognito**
1. Faça login no Console de gerenciamento da AWS e abra o console do Amazon Cognito em. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)
1. No painel de navegação à esquerda, escolha **Bancos de identidades**.
1. Selecione **Criar banco de identidades**.
1. Em **Configurar confiança do grupo de identidades**, escolha **Acesso de convidado** para autenticação do usuário.
1. Em **Configurar permissões**, escolha **Criar uma nova função do IAM** e insira um nome (por exemplo, *getStartedRole*) no **nome da função do IAM**.
1. Em **Configurar propriedades**, insira um nome (por exemplo, *getStartedPool*) em **Nome do grupo de identidades**.
1. Em **Revisar e criar**, confirme as seleções que você fez para o novo banco de identidades. Selecione **Editar** para retornar ao assistente e alterar as configurações. Quando terminar, selecione **Criar banco de identidades**.
1. Observe o **ID do grupo de identidades** e a **Região** do banco de identidades recém-criado do Amazon Cognito. Você precisa substituir *IDENTITY\$1POOL\$1ID* e *REGION* inserir esses valores[Etapa 4: Configurar o código do navegador](#getting-started-browser-create-html).
Depois de criar o banco de identidades do Amazon Cognito, você estará pronto para adicionar permissões do Amazon S3 necessárias para o aplicativo web.
## Etapa 2: Adicionar uma política ao perfil do IAM criado
Para permitir o acesso a um bucket do Amazon S3 em seu aplicativo web, use a função IAM não autenticada (por exemplo, *getStartedRole*) criada para seu grupo de identidades do Amazon Cognito (por exemplo,). *getStartedPool* Isso exige que você anexe uma política do IAM ao perfil. Para obter mais informações sobre como modificar os perfis do IAM, consulte [Modificação de uma política de permissões de perfil](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) no *Guia do usuário do IAM*.
**Para adicionar uma política do Amazon S3 ao perfil do IAM associado a usuários não autenticados**
1. Faça login no Console de gerenciamento da AWS e abra o console do IAM em [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/).
1. No painel de navegação à esquerda, selecione **Perfis**.
1. Escolha o nome da função que você deseja modificar (por exemplo, *getStartedRole*) e, em seguida, escolha a guia **Permissões**.
1. Escolha **Adicionar permissões** e depois **Anexar políticas**.
1. Na página **Adicionar permissões** para essa função, localize e marque a caixa de seleção do **ReadOnlyAccessAmazonS3**.
**nota**
Você pode usar esse processo para permitir o acesso a qualquer AWS serviço.
1. Escolha **Adicionar permissões**.
Depois de criar o banco de identidades do Amazon Cognito e adicionar permissões do Amazon S3 ao perfil do IAM para usuários não autenticados, você estará pronto para adicionar e configurar um bucket do Amazon S3.
## Etapa 3: Adicionar um bucket e um objeto do Amazon S3
Nesta etapa, você adicionará um bucket e um objeto do Amazon S3 como exemplo. Você também poderá fazer o compartilhamento de recursos de origem cruzada (CORS) para o bucket. Para obter mais informações sobre como criar buckets e objetos do Amazon S3, consulte [Conceitos básicos do Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html) no *Guia do usuário do Amazon S3*.
**Para adicionar um bucket e um objeto do Amazon S3 com CORS**
1. Faça login no Console de gerenciamento da AWS e abra o console do Amazon S3 em. [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)
1. No painel de navegação à esquerda, escolha **Buckets** e selecione **Criar bucket**.
1. Insira um nome de bucket que esteja em conformidade com as [regras de nomenclatura de bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (por exemplo, *getstartedbucket*) e escolha **Criar bucket**.
1. Escolha o bucket que você criou e, em seguida, escolha a guia **Objetos**. Em seguida, escolha **Upload**.
1. Em **Files and folders (Arquivos e pastas)**, escolha **Add files (Adicionar arquivos)**.
1. Escolha um arquivo para carregar e, em seguida, escolha **Open** (Abrir). Em seguida, escolha **Carregar** para concluir o carregamento do objeto no seu bucket.
1. Em seguida, escolha a guia **Permissões** do seu bucket e selecione **Editar** na seção **Compartilhamento de recursos de origem cruzada (CORS)**. Insira o seguinte JSON:
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. Escolha **Salvar alterações**.
Depois de adicionar um bucket do Amazon S3 e um objeto, você estará pronto para configurar o código do navegador.
## Etapa 4: Configurar o código do navegador
O aplicativo de exemplo consiste em um aplicativo React de página única. Os arquivos desse exemplo podem ser encontrados [aqui em GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects).
**Para configurar o aplicativo de exemplo**
1. Instale o [Node.js](https://nodejs.org/en/download).
1. Na linha de comando, clone o [Repositório de exemplos de código da AWS](https://github.com/awsdocs/aws-doc-sdk-examples/):
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. Navegue até o aplicativo de exemplo:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Execute o seguinte comando para instalar os pacotes necessários:
```
npm install
```
1. Em seguida, abra `src/App.tsx` em um editor de texto e conclua o seguinte:
+ *YOUR\$1IDENTITY\$1POOL\$1ID*Substitua pelo ID do grupo de identidade do Amazon Cognito em que você anotou. [Etapa 1: Criar um banco de identidades e um perfil do IAM do Amazon Cognito](#getting-started-browser-create-identity-pool)
+ Substitua o valor da região pela região atribuída ao seu bucket do Amazon S3 e ao banco de identidades do Amazon Cognito. Observe que as regiões de ambos os serviços devem ser as mesmas (por exemplo, *us-east-2*).
+ *bucket-name*Substitua pelo nome do bucket que você criou em[Etapa 3: Adicionar um bucket e um objeto do Amazon S3](#getting-started-browser-create-s3-bucket).
Depois de substituir o texto, salve o arquivo `App.tsx`. Agora, você está pronto para executar o aplicativo web.
## Etapa 5: Executar o exemplo
**Para executar o aplicativo de exemplo**
1. Na linha de comando, navegue até o aplicativo de exemplo:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Na linha de comando, execute o seguinte comando:
```
npm run dev
```
O ambiente de desenvolvimento do Vite será executado com a seguinte mensagem:
```
VITE v4.3.9 ready in 280 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
```
1. No navegador da Web, acesse o URL mostrado acima (por exemplo, http://localhost:5173). O aplicativo de exemplo mostrará uma lista de nomes de arquivos de objetos em seu bucket do Amazon S3.
## Limpeza
Para limpar os recursos que foram criados durante este tutorial, faça o seguinte:
+ No [console do Amazon S3](https://console.aws.amazon.com/s3/), exclua todos os objetos e buckets criados (por exemplo, *getstartedbucket)*.
+ No [console do IAM](https://console.aws.amazon.com/iam/home#/roles), exclua o nome da função (por exemplo, *getStartedRole*).
+ No [console do Amazon Cognito](https://console.aws.amazon.com/cognito/home#/identity), exclua o nome do grupo de identidades (por exemplo, *getStartedPool*).