Conceitos básicos sobre o navegador - AWS SDK para JavaScript
O cenárioEtapa 1: Criar um banco de identidades e um perfil do IAM do Amazon CognitoEtapa 2: Adicionar uma política ao perfil do IAM criadoEtapa 3: Adicionar um bucket e um objeto do Amazon S3Etapa 4: Configurar o código do navegadorEtapa 5: Executar o exemploLimpeza

O Guia de referência da API do AWS SDK para JavaScript V3 descreve em detalhes todas as operações da API para o AWS SDK para JavaScript versão 3 (V3).

Conceitos básicos sobre o navegador

Esta seção mostra um exemplo que demonstra como executar a versão 3 (V3) do SDK para 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.

Para ver outros exemplos de uso (V3) do SDK para JavaScript, consulte Exemplos de código do SDK para JavaScript (v3).

Este exemplo de aplicativo web mostra:

  • Como acessar serviços da AWS usando o Amazon Cognito para autenticação.

  • Como ler uma lista de objetos em um bucket do Amazon Simple Storage Service (Amazon S3) usando um perfil do AWS Identity and Access Management (IAM).

nota

Este exemplo não usa o AWS IAM Identity Center 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.

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 de front-end React e as ferramentas de front-end Vite para fornecer um ambiente de desenvolvimento para JavaScript. O aplicativo web usa um banco de identidades do Amazon Cognito para fornecer as credenciais necessárias para acessar os serviços da AWS. O exemplo de código incluído demonstra os padrões básicos para carregar e usar o SDK para 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 banco de identidades também cria um perfil do 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 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/.

  2. No painel de navegação à esquerda, escolha Bancos de identidades.

  3. Selecione Criar banco de identidades.

  4. Em Configurar confiança do grupo de identidades, escolha Acesso de convidado para autenticação do usuário.

  5. Em Configurar permissões, escolha Criar um novo perfil do IAM e insira um nome (por exemplo, getStartedRole) no nome do perfil do IAM.

  6. Em Configurar propriedades, insira um nome (por exemplo, getStartedPool) em Nome do grupo de identidades.

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

  8. Observe o ID do grupo de identidades e a Região do banco de identidades recém-criado do Amazon Cognito. Você precisa desses valores para substituir IDENTITY_POOL_ID e REGION na Etapa 4: Configurar o código do navegador.

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 o perfil do IAM não autenticada (por exemplo, getStartedRole) criado para seu banco 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 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/.

  2. No painel de navegação à esquerda, selecione Perfis.

  3. Escolha o nome do perfil que você deseja modificar (por exemplo, getStartedRole) e escolha a guia Permissões.

  4. Escolha Adicionar permissões e selecione Anexar políticas.

  5. Na página Adicionar permissões desse perfil, encontre e marque a caixa de seleção de AmazonS3ReadOnlyAccess.

    nota

    Você pode usar esse processo para habilitar o acesso a qualquer serviço da AWS.

  6. 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 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/.

  2. No painel de navegação à esquerda, escolha Buckets e selecione Criar bucket.

  3. Insira um nome de bucket que esteja em conformidade com as regras de nomenclatura de bucket (por exemplo, getstartedbucket) e escolha Criar bucket.

  4. Escolha o bucket que você criou e, em seguida, escolha a guia Objetos. Em seguida, escolha Upload.

  5. Em Files and folders (Arquivos e pastas), escolha Add files (Adicionar arquivos).

  6. Escolha um arquivo para carregar e, em seguida, escolha Open (Abrir). Em seguida, escolha Carregar para concluir o carregamento do objeto no seu bucket.

  7. 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": []
  }
]

  8. 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 para esse exemplo podem ser encontrados aqui no GitHub.

Para configurar o aplicativo de exemplo

  1. Instale o Node.js.

  2. Na linha de comando, clone o Repositório de exemplos de código da AWS:

    git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

  3. Navegue até o aplicativo de exemplo:

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

  4. Execute o seguinte comando para instalar os pacotes necessários:

    npm install

  5. Em seguida, abra src/App.tsx em um editor de texto e conclua o seguinte:

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/

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

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