Conceitos básicos sobre o navegador - AWS SDK for 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 API referência da AWS SDK for JavaScript V3 descreve detalhadamente todas as API operações da AWS SDK for 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 SDK JavaScript no navegador.

nota

A execução da V3 no navegador é um pouco diferente da versão 2 (V2). Para ter mais informações, consulte Uso dos navegadores na V3.

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

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 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 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 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 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 AWS Management Console 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 uma nova função do IAM e insira um nome (por exemplo, get StartedRole) no nome da função do IAM.

  6. Em Configurar propriedades, insira um nome (por exemplo, get StartedPool) 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 a função IAM não autenticada (por exemplo, get StartedRole) criada para seu pool de identidade do Amazon Cognito (por exemplo, get). StartedPool 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 AWS Management Console e abra o console do IAM em https://console.aws.amazon.com/iam/.

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

  3. Escolha o nome da função que você deseja modificar (por exemplo, obter StartedRole) e, em seguida, escolha a guia Permissões.

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

  5. Na página Adicionar permissões para essa função, localize e marque a caixa de seleção do ReadOnlyAmazonS3 Access.

    nota

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

  6. Escolha Add permissions (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 AWS Management Console 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 desse exemplo podem ser encontrados aqui em 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: