Outras opções de aplicações - Amazon Cognito
Exemplo do React SPAExemplo de aplicação móvel Flutter

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 uma aplicação desse tipo com integrações do Amazon Cognito em SDKs da AWS 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 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 sua aplicação com solicitações de API em SDKs da AWS e com as opções de configuração automatizada na CLI do 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.

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. React é uma biblioteca baseada em JavaScript para aplicações 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 aplicações web com o React, baixe a aplicação de exemplo no 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.

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.

Cria uma aplicação

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.

  2. O gerenciador de pacotes Node (npm) está instalado e atualizado pelo menos para a versão 10.2.3.

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

  2. Crie um serviço do React.

    npm create vite@latest frontend-client -- --template react-ts

  3. Clone a pasta do projeto cognito-developer-guide-react-example a partir do repositório de exemplos de código da AWS no 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/

  4. Procure o diretório src do seu projeto.

    cd ~/path/to/project/folder/frontend-client/src

  5. Edite config.json e substitua os valores a seguir:

    1. Substitua YOUR_AWS_REGION por um código Região da AWS. Por exemplo: us-east-1.

    2. 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 na Região da AWS que você inseriu na etapa anterior.

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

  6. 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",.

  7. Instale sua aplicação.

    npm install

  8. Inicie a aplicação.

    npm run dev

  9. Acesse a aplicação usando um navegador da Web em http://localhost:5173 ou http://[IP address]:5173.

  10. Cadastre um novo usuário com endereço de e-mail válido.

  11. Recupere o código de confirmação da sua mensagem de e-mail. Insira o código de confirmação na aplicação.

  12. Faça login com seu nome de usuário e senha.

Criar um ambiente de desenvolvedor do React com o Amazon Lightsail

Uma maneira rápida de começar a usar essa aplicação é criar um servidor virtual em nuvem com o Amazon Lightsail.

Com o Lightsail, você cria rapidamente uma pequena instância de servidor que vem pré-configurada com os pré-requisitos dessa aplicação 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 essa aplicação de exemplo

  1. Acesse o console do Lightsail. Se solicitado, insira suas credenciais da AWS.

  2. Selecione Criar instância.

  3. Em Selecionar uma plataforma, escolha Linux/Unix.

  4. Em Selecionar esquema, selecione Node.js.

  5. Em Identificar sua instância, dê um nome amigável ao seu ambiente de desenvolvimento.

  6. Selecione Criar instância.

  7. Depois de criar sua instância do Lightsail, selecione-a e, na guia Conectar, escolha Conectar usando SSH.

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

  9. Vá para configuração da aplicação 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 aplicações móveis com o Flutter, baixe a aplicação de exemplo no 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.

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.

Cria uma aplicação

Para criar uma aplicação Android de exemplo

  1. Instale o Android Studio e as ferramentas de linha de comando.

  2. No Android Studio, instale o plug-in do Flutter.

  3. Crie um projeto do Android Studio a partir do conteúdo do diretório cognito_flutter_mobile_app nesta aplicação de exemplo.

    1. Edite assets/config.json e substitua <<YOUR USER POOL ID>> e << YOUR CLIENT ID>> pelos IDs do grupo de usuários e cliente da aplicação.

  4. Instale o Flutter.

    1. Adicione o Flutter à sua variável PATH.

    2. Aceite as licenças com o comando a seguir.

      flutter doctor --android-licenses

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

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

    5. Executar flutter pub add flutter_secure_storage.

  5. Crie um dispositivo virtual do Android.

    1. Na interface do usuário do Android Studio, crie um dispositivo com o gerenciador de dispositivos.

    2. Na CLI, execute flutter emulators --create --name android-device.

  6. 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. de início ao lado do seu dispositivo virtual.

    2. Na CLI, execute flutter emulators --launch android-device.

  7. 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. de implantação.

    2. Na CLI, execute flutter run.

  8. Navegue até seu dispositivo virtual em execução no Android Studio.

  9. Cadastre um novo usuário com endereço de e-mail válido.

  10. Recupere o código de confirmação da sua mensagem de e-mail. Insira o código de confirmação na aplicação.

  11. Faça login com seu nome de usuário e senha.