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á.
Configure um exemplo de aplicativo de página única React
Neste tutorial, você criará um aplicativo de página única do React onde poderá 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 aplicativo de exemplo 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
A captura de tela a seguir é da página de autenticação inicial no aplicativo que você criará.
O procedimento Criar um grupo de usuários configura você com um grupo de usuários que funciona com o aplicativo de exemplo. Você pode pular essa etapa se tiver um grupo de usuários que atenda aos seguintes requisitos:
-
Os usuários podem fazer login com seu 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 Fazer distinção entre maiúsculas e minúsculas não está selecionada.
-
A autenticação multifator (MFA) não é necessária. MFAfiscalização: opcional MFA.
-
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 inscrever no seu grupo de usuários. Autorregistro: a opção Ativar autorregistro está selecionada.
-
Seu cliente de aplicativo inicial é um cliente público que permite o login com nome de usuário e senha. Tipo de aplicativo: Cliente público, Fluxos de autenticação:
ALLOW_USER_PASSWORD_AUTH
.
Criar um novo grupo de usuários
-
Acesse o console do Amazon Cognito
. Se solicitado, insira suas AWS credenciais. -
Escolha o botão Criar grupo de usuários. Talvez seja necessário selecionar Grupos de usuários no painel de navegação esquerdo para revelar essa opção.
-
No canto superior direito da página, escolha Create a user pool (Criar um grupo de usuários) para iniciar o assistente de criação de grupo de usuários.
-
Em Configurar a experiência de login, você pode escolher os provedores de identidade (IdPs) que você usará com esse grupo de usuários. Para obter mais informações, consulte Como adicionar acesso a grupo de usuários por meio de terceiros.
-
Em Provedores de autenticação, para Tipos de provedor, certifique-se de que somente o grupo de usuários do Cognito esteja selecionado.
-
Para opções de login do grupo de usuários do Cognito, escolha Nome do usuário. Não selecione nenhum requisito adicional de nome de usuário.
-
Mantenha todas as outras opções como padrão e escolha Avançar.
-
-
Em Configurar requisitos de segurança, você pode escolher sua política de senha, requisitos de autenticação multifator (MFA) e opções de recuperação de conta de usuário. Para obter mais informações, consulte Usar atributos de segurança de grupos de usuários do Amazon Cognito.
-
Para Política de senha, confirme se o modo de política de senha está definido para os padrões do Cognito.
-
Em Autenticação multifator, para MFAimposição, escolha Opcional MFA.
-
Para MFAmétodos, escolha Aplicativos e SMSmensagens do Authenticator.
-
Em Recuperação de conta de usuário, confirme se a opção Ativar recuperação de conta de autoatendimento está selecionada e se o método de entrega da mensagem de recuperação de conta de usuário está definido como Somente e-mail.
-
Mantenha todas as outras opções como padrão e escolha Avançar.
-
-
Em Configurar a experiência de inscrição, você pode determinar como os novos usuários verificarão suas identidades ao se inscreverem como novos usuários e quais atributos devem ser obrigatórios ou opcionais durante o fluxo de inscrição do usuário. Para obter mais informações, consulte Como gerenciar usuários em seu grupo de usuários.
-
Confirme se a opção Ativar autorregistro está selecionada. Essa configuração abre seu grupo de usuários para que qualquer pessoa se inscreva na Internet. Isso se destina aos propósitos do aplicativo de exemplo, mas aplique essa configuração com cuidado em ambientes de produção.
-
Em Verificação e confirmação assistidas pelo Cognito, verifique se a caixa de seleção Permitir que o Cognito envie mensagens automaticamente para verificação e confirmação está marcada.
-
Confirme se os Atributos a serem verificados estão definidos como Enviar mensagem de e-mail, verificar endereço de e-mail.
-
Em Verificando alterações de atributos, confirme se as opções padrão estão selecionadas: Manter o valor do atributo original quando uma atualização está pendente é selecionado e Valores de atributos ativos quando uma atualização está pendente está definido como Endereço de e-mail.
-
Em Atributos obrigatórios, confirme se os atributos obrigatórios com base nas seleções anteriores exibem e-mail.
Importante
Para este aplicativo de exemplo, seu grupo de usuários não deve definir phone_number como um atributo obrigatório. Se phone_number for exibido como um atributo obrigatório, revise e atualize suas escolhas anteriores:
-
Opcional MFA, somente e-mail para método de entrega para mensagens de recuperação de conta de usuário
-
Envie uma mensagem de e-mail, verifique o endereço de e-mail dos Atributos para verificar
-
-
Mantenha todas as outras opções como padrão e escolha Avançar.
-
-
Em Configurar entrega de mensagens, você pode configurar a integração com o Amazon Simple Email Service e o Amazon Simple Notification Service para enviar e-mails e SMS mensagens aos seus usuários para cadastroMFA, confirmação da conta e recuperação da conta. Para ter mais informações, consulte Configurações de e-mail para grupos de usuários do Amazon Cognito e SMSconfigurações de mensagem para grupos de usuários do Amazon Cognito.
-
Em Provedor de e-mail, escolha Enviar e-mail com o Cognito e use o remetente de e-mail padrão fornecido pelo Amazon Cognito. Essa configuração para baixo volume de e-mails é suficiente para testes de aplicativos. Você pode retornar depois de verificar um endereço de e-mail com o Amazon Simple Email Service (AmazonSES) e escolher Enviar e-mail com a Amazon SES.
-
Para SMS, selecione Criar uma nova IAM função e insira um nome de IAM função. Isso cria uma função que concede permissões ao Amazon Cognito para enviar mensagensSMS.
-
Mantenha todas as outras opções como padrão e escolha Avançar.
-
-
Em Integrar seu aplicativo, você pode nomear seu grupo de usuários, configurar a interface hospedada e criar um cliente de aplicativo. Para obter mais informações, consulte Adicionar um cliente de aplicativo com a interface hospedada. Os aplicativos de exemplo não usam a interface de usuário hospedada.
-
Em Nome do grupo de usuários, insira um nome do grupo de usuários.
-
Não selecione Usar a interface hospedada do Cognito.
-
Em Cliente de aplicativo inicial, confirme se o tipo de aplicativo está definido como Cliente público.
-
Em Segredo do cliente, confirme se a opção Não gerar uma chave secreta do cliente está selecionada.
-
Insira um App client name (Nome do cliente da aplicação).
-
Expanda Configurações avançadas do cliente de aplicativos. Adicione
ALLOW_USER_PASSWORD_AUTH
à lista de fluxos de autenticação. -
Mantenha todas as outras opções como padrão e escolha Avançar.
-
-
Revise suas escolhas na tela Revisar e criar e modifique as seleções conforme necessário. Quando estiver satisfeito com a configuração do grupo de usuários, escolha Criar grupo de usuários para continuar.
-
Na página Grupos de usuários, escolha seu novo grupo de usuários.
-
Em Visão geral do grupo de usuários, anote seu ID do grupo de usuários. Você fornecerá essa string ao criar seu aplicativo de exemplo.
-
Escolha a guia Integração de aplicativos e localize a seção Clientes e análises de aplicativos. Selecione seu novo cliente de aplicativo. Anote seu ID de cliente.
Recursos relacionados
Cria uma aplicação
Para criar esse aplicativo, você deve configurar um ambiente de desenvolvedor. Os requisitos do ambiente do desenvolvedor são:
-
O Node.js está instalado e atualizado.
-
O gerenciador de pacotes Node (npm) está instalado e atualizado pelo menos para a versão 10.2.3.
-
O ambiente pode ser acessado na TCP porta 5173 em um navegador da Web.
Para criar um exemplo de aplicativo web React
-
Faça login em seu ambiente de desenvolvedor e navegue até o diretório principal do seu aplicativo.
cd
~/path/to/project/folder/
-
Crie um novo serviço React.
npm create vite@latest frontend-client -- --template react-ts
-
Clone a pasta do
cognito-developer-guide-react-example
projetoa 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/
frontend-client -
Navegue até o
src
diretório em seu projeto.cd
~/path/to/project/folder/
frontend-client/src -
Edite
config.json
e substitua os seguintes valores:-
YOUR_AWS_REGION
Substitua por um Região da AWS código. Por exemplo:us-east-1
. -
YOUR_COGNITO_USER_POOL_ID
Substitua pela 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. -
YOUR_COGNITO_APP_CLIENT_ID
Substitua pelo ID do cliente do aplicativo que você designou para teste. Por exemplo:1example23456789
. O cliente do aplicativo deve estar no grupo de usuários da etapa anterior.
-
-
Se você quiser acessar seu aplicativo de exemplo a partir de um IP diferente de
localhost
, editepackage.json
e altere a linha"dev": "vite",
para"dev": "vite --host 0.0.0.0",
. -
Instale seu aplicativo.
npm install
-
Inicie o aplicativo.
npm run dev
-
Acesse o aplicativo em um navegador da web em
http://localhost:5173
ouhttp://[IP address]:5173
. -
Inscreva um novo usuário com um endereço de e-mail válido.
-
Recupere o código de confirmação da sua mensagem de e-mail. Insira o código de confirmação no aplicativo.
-
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 SSH acessar 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
-
Acesse o console do Lightsail
. Se solicitado, insira suas AWS credenciais. -
Selecione Criar instância.
-
Em Selecionar uma plataforma, escolha Linux/Unix.
-
Em Selecionar um blueprint, escolha Node.js.
-
Em Identificar sua instância, dê um nome amigável ao seu ambiente de desenvolvimento.
-
Selecione Criar instância.
-
Depois que o Lightsail criar sua instância, selecione-a e, na guia Connect, escolha Connect using. SSH
-
Uma SSH sessão é aberta em uma janela do navegador. Execute
node -v
e confirmenpm -v
se sua instância foi provisionada com Node.js e a versão mínima de npm 10.2.3. -
Continue configurando seu aplicativo React.