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á. # Outras opções de aplicações Você pode ter uma IU de aplicação existente que deseja integrar à autenticação do Amazon Cognito. Você pode até ter suas próprias páginas de autenticação existentes com uma configuração de diretório menos funcional do que os grupos de usuários do Amazon Cognito. Você pode adicionar ou substituir um componente de autenticação em um aplicativo desse tipo com integrações do Amazon Cognito AWS SDKs para uma variedade de linguagens de programação. Estes são alguns exemplos. Se você criar um grupo de usuários para essa finalidade no console do Amazon Cognito, poderá não ser necessário ter um [domínio do grupo de usuários](cognito-user-pools-assign-domain.md) que hospede páginas de login interativas e serviços OpenID Connect (OIDC). O processo de criação do grupo de usuários no console gera automaticamente um domínio para você. É possível excluir esse domínio na guia **Domínio** do grupo de usuários. Outras opções incluem a criação programática de recursos do Amazon Cognito para seu aplicativo com solicitações de API e com as opções de configuração automatizada AWS SDKs na CLI. AWS Amplify Para obter mais informações, consulte [Integração da autenticação e autorização do Amazon Cognito com aplicações móveis e da web](cognito-integrate-apps.md). **Topics** + [Configurar um exemplo de aplicação de página única do React](#getting-started-test-application-react) + [Configurar uma aplicação Android de exemplo com o Flutter](#getting-started-test-application-flutter) ## Configurar um exemplo de aplicação de página única do React Neste tutorial, você criará uma aplicação de página única do React para testar a inscrição, a confirmação e o login do usuário. O React é uma biblioteca JavaScript baseada em aplicativos web e móveis, com foco na interface do usuário (UI). Este exemplo de aplicação demonstra algumas funções básicas dos grupos de usuários do Amazon Cognito. Se você já tem experiência em desenvolvimento de aplicativos web com o React, [baixe o aplicativo de exemplo](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example) em GitHub. A captura de tela a seguir é da página de autenticação inicial na aplicação que você vai criar. ![Uma captura de tela da página de inscrição de exemplo de aplicação web baseada no React.](http://docs.aws.amazon.com/pt_br/cognito/latest/developerguide/images/cognito-getting-started-react-app-running.png) Para configurar essa aplicação, o grupo de usuários deve atender aos seguintes requisitos: + Os usuários podem fazer login com o endereço de e-mail. **Opções de login do grupo de usuários do Cognito**: **E-mail**. + Os nomes de usuário não diferenciam maiúsculas de minúsculas. **Requisitos de nome de usuário**: a opção **Tornar o nome de usuário sensível a maiúsculas e minúsculas** não está selecionada. + A autenticação multifator (MFA) não é necessária. **Aplicação da MFA**: a **MFA é opcional**. + Seu grupo de usuários verifica os atributos para confirmação do perfil de usuário com uma mensagem de e-mail. **Atributos a serem verificados**: **enviar mensagem de e-mail, verificar endereço de e-mail**. + E-mail é o único atributo obrigatório. **Atributos obrigatórios**: **e-mail**. + Os usuários podem se cadastrar no seu grupo de usuários. **Autorregistro**: a opção **Habilitar autorregistro** está selecionada. + Seu cliente de aplicação inicial é público e permite o login com nome de usuário e senha. **Tipo de aplicação**: **Cliente público**, **Fluxos de autenticação**: `ALLOW_USER_PASSWORD_AUTH`. ### Criar uma aplicação do Para criar essa aplicação, configure um ambiente de desenvolvedor. Os requisitos do ambiente do desenvolvedor são os seguintes: 1. O Node.js está instalado e atualizado. 1. O gerenciador de pacotes Node (npm) está instalado e atualizado pelo menos para a versão 10.2.3. 1. O ambiente pode ser acessado pela porta TCP 5173 em um navegador da Web. **Para criar uma aplicação web do React** 1. Faça login em seu ambiente de desenvolvedor e procure o diretório principal da aplicação. ``` cd {{~/path/to/project/folder/}} ``` 1. Crie um serviço do React. ``` npm create vite@latest frontend-client -- --template react-ts ``` 1. Clone a [pasta do `cognito-developer-guide-react-example` projeto](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example) a partir do repositório de exemplos de AWS código em. GitHub ``` cd {{~/some/other/path}} ``` ``` git clone https://github.com/awsdocs/aws-doc-sdk-examples.git ``` ``` cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client {{~/path/to/project/folder/}} ``` 1. Procure o diretório `src` do seu projeto. ``` cd {{~/path/to/project/folder/}}frontend-client/src ``` 1. Edite `config.json` e substitua os valores a seguir: 1. `YOUR_AWS_REGION`Substitua por um Região da AWS código. Por exemplo: `us-east-1`. 1. Substitua `YOUR_COGNITO_USER_POOL_ID` pelo ID do grupo de usuários que você designou para teste. Por exemplo: `us-east-1_EXAMPLE`. O grupo de usuários deve estar no Região da AWS que você inseriu na etapa anterior. 1. Substitua `YOUR_COGNITO_APP_CLIENT_ID` pelo ID do cliente de aplicação que você designou para teste. Por exemplo: `1example23456789`. O cliente da aplicação deve estar no grupo de usuários da etapa anterior. 1. Se quiser acessar a aplicação de exemplo a partir de um IP diferente de `localhost`, edite `package.json` e altere a linha `"dev": "vite",` para `"dev": "vite --host 0.0.0.0",`. 1. Instale sua aplicação. ``` npm install ``` 1. Inicie a aplicação. ``` npm run dev ``` 1. Acesse a aplicação usando um navegador da Web em `http://localhost:5173` ou `http://[IP address]:5173`. 1. Cadastre um novo usuário com endereço de e-mail válido. 1. Recupere o código de confirmação da sua mensagem de e-mail. Insira o código de confirmação na aplicação. 1. Faça login com seu nome de usuário e senha. ### Criação de um ambiente de desenvolvedor React com o Amazon Lightsail Uma maneira rápida de começar a usar esse aplicativo é criar um servidor virtual na nuvem com o Amazon Lightsail. Com o Lightsail, você pode criar rapidamente uma pequena instância de servidor que vem pré-configurada com os pré-requisitos para esse aplicativo de exemplo. Você pode usar SSH para sua instância com um cliente baseado em navegador e se conectar ao servidor web em um endereço IP público ou privado. **Para criar uma instância do Lightsail para esse aplicativo de exemplo** 1. Acesse o console do [Lightsail](https://lightsail.aws.amazon.com/ls/webapp/). Se solicitado, insira suas AWS credenciais. 1. Selecione **Criar instância**. 1. Em **Selecionar uma plataforma**, escolha **Linux/Unix**. 1. Em **Selecionar esquema**, selecione **Node.js**. 1. Em **Identificar sua instância**, dê um nome amigável ao seu ambiente de desenvolvimento. 1. Selecione **Criar instância**. 1. Depois que o Lightsail criar sua instância, selecione-a e, na guia Connect, escolha ****Connect**** using SSH. 1. Uma sessão SSH é aberta em uma janela do navegador. Execute `node -v` e `npm -v` para confirmar se a instância foi provisionada com Node.js e a versão mínima de npm 10.2.3. 1. Vá para [configuração da aplicação React](#getting-started-test-application-react). ## Configurar uma aplicação Android de exemplo com o Flutter Neste tutorial, você criará uma aplicação móvel no Android Studio para emular um dispositivo e testar o cadastro, a confirmação e o login do usuário. Esta aplicação de exemplo cria um cliente móvel básico de grupos de usuários do Amazon Cognito para Android no Flutter. Se você já tem experiência em desenvolvimento de aplicativos móveis com o Flutter, [baixe o aplicativo de exemplo](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/kotlin/usecases/cognito_flutter_mobile_app) em. GitHub A captura de tela a seguir mostra a aplicação em execução em um dispositivo Android virtual. ![Uma captura de tela da página de cadastro de um exemplo de aplicação virtualizada para Android.](http://docs.aws.amazon.com/pt_br/cognito/latest/developerguide/images/cognito-getting-started-android-app-running.png) Para configurar essa aplicação, o grupo de usuários deve atender aos seguintes requisitos: + Os usuários podem fazer login com o endereço de e-mail. **Opções de login do grupo de usuários do Cognito**: **E-mail**. + Os nomes de usuário não diferenciam maiúsculas de minúsculas. **Requisitos de nome de usuário**: a opção **Tornar o nome de usuário sensível a maiúsculas e minúsculas** não está selecionada. + A autenticação multifator (MFA) não é necessária. **Aplicação da MFA**: a **MFA é opcional**. + Seu grupo de usuários verifica os atributos para confirmação do perfil de usuário com uma mensagem de e-mail. **Atributos a serem verificados**: **enviar mensagem de e-mail, verificar endereço de e-mail**. + E-mail é o único atributo obrigatório. **Atributos obrigatórios**: **e-mail**. + Os usuários podem se cadastrar no seu grupo de usuários. **Autorregistro**: a opção **Habilitar autorregistro** está selecionada. + Seu cliente de aplicação inicial é público e permite o login com nome de usuário e senha. **Tipo de aplicação**: **Cliente público**, **Fluxos de autenticação**: `ALLOW_USER_PASSWORD_AUTH`. ### Criar uma aplicação do **Para criar uma aplicação Android de exemplo** 1. Instale o [Android Studio](https://developer.android.com/studio) e as [ferramentas de linha de comando](https://developer.android.com/tools). 1. No Android Studio, instale o [plug-in do Flutter](https://docs.flutter.dev/get-started/editor?tab=androidstudio). 1. Crie um projeto do Android Studio a partir do conteúdo do diretório `cognito_flutter_mobile_app` [nesta aplicação de exemplo](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/kotlin/usecases/cognito_flutter_mobile_app). 1. Edite `assets/config.json` e substitua `<>` e `<< YOUR CLIENT ID>>` com o IDs de seu grupo de usuários e cliente de aplicativo. 1. Instale o [Flutter](https://docs.flutter.dev/get-started/install). 1. Adicione o Flutter à sua variável PATH. 1. Aceite as licenças com o comando a seguir. `flutter doctor --android-licenses` 1. Verifique seu ambiente do Flutter e instale os componentes que faltam. `flutter doctor` 1. Se algum componente estiver faltando, execute `flutter doctor -v` para saber como corrigir o problema. 1. Vá para o diretório do seu novo projeto do Flutter e instale as dependências. 1. Executar `flutter pub add amazon_cognito_identity_dart_2`. 1. Executar `flutter pub add flutter_secure_storage`. 1. Crie um dispositivo virtual do Android. 1. Na interface do usuário do Android Studio, crie um dispositivo com o [gerenciador de dispositivos](https://developer.android.com/studio/run/managing-avds). 1. Na CLI, execute `flutter emulators --create --name android-device`. 1. Inicie seu dispositivo Android virtual. 1. Na interface do usuário do Android Studio, selecione o ícone ![Play button icon with a blue triangle pointing to the right.](http://docs.aws.amazon.com/pt_br/cognito/latest/developerguide/images/cognito-getting-started-android-virtual-device-start.png) de início ao lado do seu dispositivo virtual. 1. Na CLI, execute `flutter emulators --launch android-device`. 1. Inicie a aplicação no dispositivo virtual. 1. Na interface do usuário do Android Studio, selecione o ícone ![Green play button icon representing a start or play action.](http://docs.aws.amazon.com/pt_br/cognito/latest/developerguide/images/cognito-getting-started-android-app-start.png) de implantação. 1. Na CLI, execute `flutter run`. 1. Navegue até seu dispositivo virtual em execução no Android Studio. 1. Cadastre um novo usuário com endereço de e-mail válido. 1. Recupere o código de confirmação da sua mensagem de e-mail. Insira o código de confirmação na aplicação. 1. Faça login com seu nome de usuário e senha.