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á. # Comece a usar o AWS SDK para JavaScript O AWS SDK para JavaScript fornece acesso a serviços da Web em um navegador ou ambiente Node.js. Esta seção contém exercícios de introdução que mostram como trabalhar com o AWS SDK JavaScript em cada um desses JavaScript ambientes. **Topics** + [Autenticação do SDK com AWS](getting-your-credentials.md) + [Conceitos básicos sobre o Node.js](getting-started-nodejs.md) + [Conceitos básicos sobre o navegador](getting-started-browser.md) + [Conceitos básicos do React Native](getting-started-react-native.md) # Autenticação do SDK com AWS Você deve estabelecer como seu código é autenticado AWS ao desenvolver com Serviços da AWS. Você pode configurar o acesso programático aos AWS recursos de maneiras diferentes, dependendo do ambiente e do AWS acesso disponível para você. Para escolher seu método de autenticação e configurá-lo para o SDK, consulte [Autenticação e acesso](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) no *Guia de referência de ferramentas AWS SDKs e ferramentas*. Recomendamos que novos usuários que estejam se desenvolvendo localmente e que não recebam um método de autenticação do empregador se configurem Centro de Identidade do AWS IAM. Esse método inclui a instalação do AWS CLI para facilitar a configuração e entrar regularmente no portal de AWS acesso. Se você escolher esse método, seu ambiente deverá conter os seguintes elementos depois de concluir o procedimento de [autenticação do IAM Identity Center](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html) no *Guia de referência de ferramentas AWS SDKs e ferramentas*: + O AWS CLI, que você usa para iniciar uma sessão do portal de AWS acesso antes de executar seu aplicativo. + Um [arquivo AWS`config` compartilhado](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) com um perfil de `[default]` com um conjunto de valores de configuração que podem ser referenciados a partir do SDK. Para encontrar a localização desse arquivo, consulte [Localização dos arquivos compartilhados no](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html) *Guia de referência de ferramentas AWS SDKs e ferramentas*. + O arquivo `config` compartilhado define a configuração do [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html). Isso define o padrão Região da AWS que o SDK usa para AWS solicitações. Essa região é usada para solicitações de serviço do SDK que não são fornecidas com uma Região específica para uso. + O SDK usa a [configuração do provedor do token de SSO](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile) do perfil para adquirir credenciais antes de enviar solicitações para a AWS. O `sso_role_name` valor, que é uma função do IAM conectada a um conjunto de permissões do IAM Identity Center, permite acesso ao Serviços da AWS usado em seu aplicativo. O arquivo `config` de amostra a seguir mostra um perfil padrão configurado com o provedor de token de SSO. A configuração `sso_session` do perfil se refere à [seção do `sso-session`](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session). A `sso-session` seção contém configurações para iniciar uma sessão do portal de AWS acesso. ``` [default] sso_session = my-sso sso_account_id = 111122223333 sso_role_name = SampleRole region = us-east-1 output = json [sso-session my-sso] sso_region = us-east-1 sso_start_url = https://provided-domain.awsapps.com/start sso_registration_scopes = sso:account:access ``` O AWS SDK para JavaScript v3 não precisa que pacotes adicionais (como `SSO` e`SSOOIDC`) sejam adicionados ao seu aplicativo para usar a autenticação do IAM Identity Center. Para obter detalhes sobre o uso explícito desse provedor de credenciais, consulte [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso) no site do npm (gerenciador de pacotes Node.js). ## Iniciar uma sessão do portal de AWS acesso Antes de executar um aplicativo que acessa Serviços da AWS, você precisa de uma sessão ativa do portal de AWS acesso para que o SDK use a autenticação do IAM Identity Center para resolver as credenciais. Dependendo da duração da sessão configurada, o seu acesso acabará expirando e o SDK encontrará um erro de autenticação. Para entrar no portal de AWS acesso, execute o seguinte comando no AWS CLI. ``` aws sso login ``` Se você seguiu as orientações e tem um perfil padrão configurado, não precisará chamar o comando com uma opção de `--profile`. Se a configuração do provedor de token de SSO estiver usando um perfil nomeado, o comando será `aws sso login --profile named-profile`. Para testar opcionalmente se você já tem uma sessão ativa, execute o AWS CLI comando a seguir. ``` aws sts get-caller-identity ``` Se a sua sessão estiver ativa, a resposta a este comando relata a conta do IAM Identity Center e o conjunto de permissões configurados no arquivo `config` compartilhado. **nota** Se você já tiver uma sessão ativa do portal de AWS acesso e executá-la`aws sso login`, não será necessário fornecer credenciais. O processo de login pode solicitar que você permita o AWS CLI acesso aos seus dados. Como o AWS CLI é criado com base no SDK para Python, as mensagens de permissão podem conter variações do `botocore` nome. ## Usando credenciais de login do console Você pode usar suas credenciais de login existentes do AWS Management Console para acesso programático aos serviços. AWS Depois de um fluxo de autenticação baseado em navegador, AWS gera credenciais temporárias que funcionam em ferramentas de desenvolvimento locais, como a AWS CLI e o SDK do. AWS JavaScript Esse recurso simplifica o processo de configuração e gerenciamento das credenciais da CLI AWS . Para saber como começar, siga as instruções para [fazer login para desenvolvimento AWS local usando as credenciais do console](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html). Ao executar o comando **aws login**, você pode selecionar entre suas sessões ativas do console ou fazer login por meio do fluxo de autenticação baseado em navegador para que sejam geradas credenciais temporárias automaticamente. O AWS SDK atualiza JavaScript automaticamente as credenciais 5 minutos antes da expiração, com cada conjunto de credenciais válido por até 12 horas. Para obter mais informações, consulte [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials). ## Mais informações de autenticação Os usuários humanos, também conhecidos como *identidades humanas,* são as pessoas, os administradores, os desenvolvedores, os operadores e os consumidores de suas aplicações. Eles devem ter uma identidade para acessar seus AWS ambientes e aplicativos. Usuários humanos que são membros da sua organização (ou seja, você, o desenvolvedor) são conhecidos como *identidades da força de trabalho*. Use credenciais temporárias ao acessar AWS. Você pode usar um provedor de identidade para seus usuários humanos para fornecer acesso federado às AWS contas assumindo funções que fornecem credenciais temporárias. Para gerenciamento de acesso centralizado, recomendamos que você use o Centro de Identidade do AWS IAM (IAM Identity Center) para gerenciar o acesso às suas contas e as permissões nessas contas. Para obter mais alternativas, consulte as informações a seguir. + Para saber mais sobre as práticas recomendadas, consulte [Práticas recomendadas de segurança no IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) no *Guia do usuário do IAM*. + Para criar AWS credenciais de curto prazo, consulte [Credenciais de segurança temporárias](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) no Guia do *usuário do IAM*. + *Para saber mais sobre outros provedores de credenciais do AWS SDK para JavaScript V3, consulte Provedores de [credenciais padronizados no Guia de referência de](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html) ferramentas e ferramentas.AWS SDKs * # Conceitos básicos sobre o Node.js Este guia mostra como inicializar um pacote NPM, adicionar um cliente de serviço ao seu pacote e usar o JavaScript SDK para chamar uma ação de serviço. ## O cenário **Crie um novo pacote NPM com um arquivo principal que faz o seguinte:** + Cria um bucket do Amazon Simple Storage Service + Coloca um objeto no bucket do Amazon S3 + Lê o objeto no bucket do Amazon S3 + Confirma se o usuário deseja excluir recursos ## Pré-requisitos Antes de executar o exemplo, faça o seguinte: + Configure a autenticação do SDK. Para obter mais informações, consulte [Autenticação do SDK com AWS](getting-your-credentials.md). + Instale [o Node.js](https://nodejs.org/en/download). AWS recomenda usar a versão Active LTS do Node.js para desenvolvimento. ## Etapa 1: configurar a estrutura do pacote e instalar pacotes do cliente Para configurar a estrutura do pacote e instalar pacotes do cliente: 1. Crie uma nova pasta `nodegetstarted` para conter o pacote. 1. Na linha de comando, navegue até a nova pasta. 1. Execute o seguinte comando para criar um arquivo `package.json` padrão: ``` npm init -y ``` 1. Execute o comando a seguir para instalar o pacote de cliente do Amazon S3: ``` npm i @aws-sdk/client-s3 ``` 1. Adicione `"type": "module"` ao arquivo `package.json`. Isso faz com que o Node.js use a sintaxe moderna do ESM. O arquivo `package.json` final deverá ser semelhante ao seguinte: ``` { "name": "example-javascriptv3-get-started-node", "version": "1.0.0", "description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.", "main": "index.js", "scripts": { "test": "vitest run **/*.unit.test.js" }, "author": "Your Name", "license": "Apache-2.0", "dependencies": { "@aws-sdk/client-s3": "^3.420.0" }, "type": "module" } ``` ## Etapa 2: Adicionar as importações e o código SDK necessários Adicione o código a seguir a um arquivo denominado `index.js` na pasta `nodegetstarted`. ``` // This is used for getting user input. import { createInterface } from "node:readline/promises"; import { S3Client, PutObjectCommand, CreateBucketCommand, DeleteObjectCommand, DeleteBucketCommand, paginateListObjectsV2, GetObjectCommand, } from "@aws-sdk/client-s3"; export async function main() { // A region and credentials can be declared explicitly. For example // `new S3Client({ region: 'us-east-1', credentials: {...} })` would //initialize the client with those settings. However, the SDK will // use your local configuration and credentials if those properties // are not defined here. const s3Client = new S3Client({}); // Create an Amazon S3 bucket. The epoch timestamp is appended // to the name to make it unique. const bucketName = `test-bucket-${Date.now()}`; await s3Client.send( new CreateBucketCommand({ Bucket: bucketName, }), ); // Put an object into an Amazon S3 bucket. await s3Client.send( new PutObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", Body: "Hello JavaScript SDK!", }), ); // Read the object. const { Body } = await s3Client.send( new GetObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", }), ); console.log(await Body.transformToString()); // Confirm resource deletion. const prompt = createInterface({ input: process.stdin, output: process.stdout, }); const result = await prompt.question("Empty and delete bucket? (y/n) "); prompt.close(); if (result === "y") { // Create an async iterator over lists of objects in a bucket. const paginator = paginateListObjectsV2( { client: s3Client }, { Bucket: bucketName }, ); for await (const page of paginator) { const objects = page.Contents; if (objects) { // For every object in each page, delete it. for (const object of objects) { await s3Client.send( new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }), ); } } } // Once all the objects are gone, the bucket can be deleted. await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName })); } } // Call a function if this file was run directly. This allows the file // to be runnable without running on import. import { fileURLToPath } from "node:url"; if (process.argv[1] === fileURLToPath(import.meta.url)) { main(); } ``` O código de exemplo pode ser encontrado [aqui em GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js). ## Etapa 3: Executar o exemplo **nota** Lembre-se de fazer login\$1 Se você estiver usando o IAM Identity Center para se autenticar, lembre-se de fazer login usando o AWS CLI `aws sso login` comando. 1. Executar `node index.js`. 1. Escolha se deseja esvaziar e excluir o bucket. 1. Se você não excluir o bucket, certifique-se de esvaziá-lo manualmente e excluí-lo mais tarde. # 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*). # Conceitos básicos do React Native Este tutorial mostra como você pode criar um aplicativo React Native usando a [CLI do React Native](https://reactnative.dev/docs/environment-setup). ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Este tutorial mostra:** + Como instalar e incluir o AWS SDK para os módulos da JavaScript versão 3 (V3) que seu projeto usa. + Como escrever código que se conecta ao Amazon Simple Storage Service (Amazon S3) para criar e excluir um bucket do Amazon S3. ## O cenário O Amazon S3 é um serviço em nuvem que permite que você armazene e recupere qualquer volume de dados, a qualquer momento, de qualquer lugar na web. O React Native é uma estrutura de desenvolvimento que permite criar aplicativos móveis. Este tutorial mostra como você pode criar um aplicativo React Native que se conecta ao Amazon S3 para criar e excluir um bucket do Amazon S3. O aplicativo usa o seguinte AWS SDK para JavaScript APIs: + Construtor [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) + Construtor [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) ## Tarefas de pré-requisito **nota** Se você já tiver concluído qualquer uma das etapas a seguir por meio de outros tutoriais ou de uma configuração existente, ignore essas etapas. Esta seção fornece a configuração mínima necessária para concluir este tutorial. Você não deve considerar isso como uma configuração completa. Para isso, consulte [Configure o SDK para JavaScript](setting-up.md). + Instale as seguintes ferramentas: + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/) se você estiver testando no iOS + [Android Studio](https://developer.android.com/studio/) se você estiver testando no Android + Configurar seu [ambiente de desenvolvimento React Native](https://reactnative.dev/docs/environment-setup) + Configure o ambiente do projeto para executar esses TypeScript exemplos do Node e instale o AWS SDK necessário para módulos de terceiros JavaScript e para eles. Siga as instruções em [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md). + Você deve estabelecer como seu código é autenticado AWS ao desenvolver com AWS serviços. Para obter mais informações, consulte [Autenticação do SDK com AWS](getting-your-credentials.md). **nota** A função do IAM para este exemplo deve ser definida para usar as permissões do **AmazonS3 FullAccess**. ## Etapa 1: Criar um banco de identidades 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 do serviço Amazon S3. A criação de um grupo de identidades também cria duas funções AWS Identity and Access Management (IAM), uma para oferecer suporte a usuários autenticados por um provedor de identidade e outra para oferecer suporte a usuários convidados não autenticados. Neste exercício, 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. **Como criar um banco de identidades do Amazon Cognito** 1. Faça login Console de gerenciamento da AWS e abra o console do Amazon Cognito no [Amazon Web Services](https://console.aws.amazon.com/cognito/) Console. 1. Na página de abertura do console, selecione **Banco de identidades**. 1. Na página seguinte, escolha **Create new identity pool (Criar novo grupo de identidades)**. **nota** Se não houver outros bancos de identidades, o console do Amazon Cognito vai ignorar esta página e abrir a próxima página. 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, *getStartedReactfunção*) no **nome da função do IAM**. 1. Em **Configurar propriedades**, insira um nome (por exemplo, *getStartedReactPool*) em **Nome do pool 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. Você precisa desses valores para substituir *region* e *identityPoolId* no script do seu navegador. Após criar o banco de identidades do Amazon Cognito, será possível adicionar permissões do Amazon S3 necessárias para o aplicativo React Native. ## Etapa 2: Adicionar uma política ao perfil do IAM criado Para habilitar o acesso do script de navegador ao Amazon S3 para criar e excluir um bucket do S3, use um perfil do IAM não autenticado criado para o banco de identidades do Amazon Cognito. Isso exige que você adicione uma política do IAM à função. Para obter mais informações sobre as funções do IAM, consulte [Como criar uma função para delegar permissões a um AWS serviço](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) 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**. Após 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, será possível criar a página da web e o script de navegador. ## Etapa 3: criar um aplicativo usando create-react-native-app Crie um app React Native executando o comando a seguir. ``` npx react-native init ReactNativeApp --npm ``` ## Etapa 4: Instalar o pacote do Amazon S3 e outras dependências Dentro do diretório do projeto, execute os comandos a seguir para instalar o pacote do Amazon S3. ``` npm install @aws-sdk/client-s3 ``` Esse comando instala o pacote do Amazon S3 no projeto e atualiza `package.json` para listar o S3 como uma dependência de projeto. Você pode encontrar informações sobre esse pacote procurando “@aws-sdk” no [https://www.npmjs.com/](https://www.npmjs.com/)site do npm. Esses pacotes e os códigos associados são instalados no subdiretório `node_modules` do projeto. Para obter mais informações sobre como instalar pacotes Node.js, consulte [Downloading and installing packages locally](https://docs.npmjs.com/downloading-and-installing-packages-locally) e [Creating Node.js modules](https://docs.npmjs.com/creating-node-js-modules) no [site do npm (gerenciador de pacotes do Node.js)](https://www.npmjs.com/). Para obter informações sobre como baixar e instalar o AWS SDK para JavaScript, consulte[Instale o SDK para JavaScript](setting-up.md#installing-jssdk). Instale outras dependências necessárias para autenticação. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## Etapa 5: Escrever o código do React Native Adicione o código a seguir a `App.tsx`. Substitua *identityPoolId* e *region* pelo ID do grupo de identidades e pela região em que seu bucket do Amazon S3 será criado. ``` import React, { useCallback, useState } from "react"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import "react-native-get-random-values"; import "react-native-url-polyfill/auto"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; const client = new S3Client({ // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region. region: "us-east-1", credentials: fromCognitoIdentityPool({ // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region. identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492", // Replace the value of 'region' with your Amazon Cognito Region. clientConfig: { region: "us-east-1" }, }), }); enum MessageType { SUCCESS = 0, FAILURE = 1, EMPTY = 2, } const App = () => { const [bucketName, setBucketName] = useState(""); const [msg, setMsg] = useState<{ message: string; type: MessageType }>({ message: "", type: MessageType.EMPTY, }); const createBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" created.`, type: MessageType.SUCCESS, }); } catch (e) { console.error(e); setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); const deleteBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" deleted.`, type: MessageType.SUCCESS, }); } catch (e) { setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); return ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />