Neste módulo, você criará um pool de usuários do Amazon Cognito para gerenciar as contas de seus usuários. Você implantará páginas que permitem que os clientes se registrem como novos usuários, verifiquem seu endereço de e-mail e façam login no site.

Serverless_Web_App_LP_assets-03

Quando os usuários acessam o seu site, primeiramente, eles registrarão uma nova conta de usuário. Para os fins deste workshop, exigiremos apenas o fornecimento de um endereço de e-mail e de uma senha para o registro. No entanto, você pode configurar o Amazon Cognito para exigir atributos adicionais em seus próprios aplicativos.

Após os usuários terem enviado sua inscrição, o Amazon Cognito enviará um e-mail de confirmação com um código de verificação para o endereço fornecido. Para confirmar a conta, os usuários retornarão ao seu site para inserir o endereço de e-mail e o código de verificação que receberam. Você também pode confirmar contas de usuário usando o console do Amazon Cognito se deseja usar endereços de e-mail falsos para testes.

Depois que os usuários tiverem uma conta confirmada (usando o processo de verificação de e-mail de confirmação ou uma confirmação manual através do console), eles serão capazes de fazer login. Quando os usuários fizerem login, eles inserem o nome de usuário (ou e-mail) e senha. A função JavaScript, em seguida, comunica-se com o Amazon Cognito, autentica usando o Secure Remote Password Protocol (SRP) e recebe um conjunto de JSON Web Tokens (JWT). Os JWTs contêm afirmações sobre a identidade do usuário e serão usados no próximo módulo para autenticar para o RESTful API que você criou com o Amazon API Gateway.

Tempo para conclusão do módulo: 30 minutos

Serviços usados: Amazon Cognito

CloudFormation Template: se você deseja ir direto para o próximo módulo, você pode executar um desses modelos do AWS CloudFormation na mesma região que você usou no Módulo 1.

Região Modelo do CloudFormation
Leste dos EUA (Norte da Virgínia) Launch stack >
Leste dos EUA (Ohio) Launch stack >
Oeste dos EUA (Oregon) Launch stack >
UE (Frankfurt) Launch stack >
UE (Irlanda) Launch stack >
UE (Londres) Launch stack >
Ásia-Pacífico (Tóquio) Launch stack >
Ásia-Pacífico (Seul) Launch stack >
Ásia-Pacífico (Sydney) Launch stack >
Ásia-Pacífico (Mumbai) Launch stack >
Serverless_Web_App_LP_assets-17

Instruções para a execução do CloudFormation

  1. Escolha o link acima Launch Stack para a região de sua escolha.

  2. Escolha Next na página Select Template.

  3. Forneça o nome do bucket de seu site do módulo 1 para o Website Bucket Name (por exemplo, wildrydes-yourname) e escolha Next.

    Observação: você deve especificar o mesmo nome de bucket que usou no módulo anterior. Se você fornecer um nome de bucket que não existe ou que você não tenha acesso, a pilha do CloudFormation falhará durante a criação.

  4. Na página Opções, mantenha todos os padrões e escolha Next.

  5. Na página Review, marque a caixa para confirmar que o CloudFormation irá criar recursos do IAM e escolha Create.

    Esse modelo usa recursos personalizados para criar um pool de usuários e cliente do Amazon Cognito, bem como para gerar um arquivo de configuração com os detalhes necessários para conectar-se a este pool do usuário e fazer seu upload para o bucket do site. O modelo criará uma função que fornece acesso para criar esses recursos e fazer o upload do arquivo de configuração para o seu bucket.

  6. Aguarde que a pilha wildrydes-webapp-2 alcance o status de CREATE_COMPLETE.

  7. Siga as etapas descritas na Etapa 4. Testar sua implementação, para confirmar que você está pronto para passar para o próximo módulo.


Siga as instruções passo a passo abaixo para criar grupos de usuário. Clique em cada número de etapa para expandir a seção.

  • Etapa 1. Criar um grupo de usuário do Amazon Cognito

    O Amazon Cognito fornece dois mecanismos diferentes para autenticar usuários. Você pode usar grupos de usuários para adicionar recursos de registro e login de usuário aos seus aplicativos ou usar grupos de identidade do Amazon Cognito para autenticar os usuários por meio de provedores de identidade sociais como o Facebook, o Twitter ou a Amazon, com as soluções de identidade do SAML ou usando o seu próprio sistema de identidade. Para este módulo, você usará um grupo de usuário como o back-end para as páginas de registro e de login de usuário.


    1. A partir do Console AWS, clique em Services e selecione Cognito em Mobile Services.
    2. Escolha Manage your User Pools.
    3. Escolha Create a User Pool
    4. Forneça um nome para o seu grupo de usuário, como WildRydes e, em seguida, selecione Review Defaults
    5. Na página de revisão, clique em Create pool.
    6. Observe o ID do grupo na página Pool details de seu recém-criado grupo de usuários.
  • Etapa 2. Adicionar um aplicativo ao seu grupo de usuários

    A partir do console do Amazon Cognito selecione seu grupo de usuários e, em seguida, selecione a seção App clients. Adicione um novo aplicativo cliente e certifique-se de que a opção Generate client secret está desmarcada. Segredos do cliente não são atualmente suportados pelo JavaScript SDK. Se você criar um aplicativo com um gerado segredo, exclua-o e crie um novo com a configuração correta.


    1. Na página Detalhes do grupo de seu grupo de usuários, selecione App clients na barra de navegação esquerda.
    2. Clique em Add an app client.
    3. Dê um nome ao aplicativo, como WildRydesWebApp.
    4. Desmarque a opção Generate client secret. Segredos do cliente não são atualmente suportados para uso com aplicativos baseados em navegador.
    5. Clique em Create app client.
    6. Observe a App client id para o aplicativo recém-criado.
  • Etapa 3. Atualizar o arquivo config.js no bucket do site

    O arquivo /js/config.js contém as configurações para a ID do grupo de usuários, a ID do app client e para a região. Atualize este arquivo com as configurações do grupo de usuários e o aplicativo que você criou nas etapas anteriores e faça o upload do arquivo de volta para o bucket.


    1. Faça o download do arquivo config.js no diretório do site do primeiro módulo deste repositório para sua máquina local. Você pode encontrá-lo retornando ao bucket do S3 que você criou e navegando até a pasta chamada 'js'.
    2. Abra o arquivo baixado usando o editor de texto de sua escolha.
    3. Atualize a seção cognito com os valores corretos para o grupo de usuários e para o aplicativo recém-criados.
    4. Você pode encontrar o valor para a ID do grupo de usuários na página de detalhes do grupo do console Amazon Cognito depois de selecionar o grupo de usuários que você criou.
      Você pode encontrar o valor para a ID do cliente do grupo de usuários selecionando App clients na barra de navegação esquerda. Use o valor do campo App client id para o aplicativo que você criou na seção anterior.
      O valor para região deve ser o código para a região da AWS onde você criou seu grupo de usuários. Ex. us-east-1 para o Norte da Virgínia ou us-west-2 para a região de Oregon. Se você não tiver certeza de que código usar, pode ver o valor de Pool ARN na página Pool details. O código da região é a parte do ARN imediatamente após arn: aws: cognito-idp:.
      O arquivo atualizado config.js deve ser semelhante a este. Observe que os valores reais para o arquivo serão diferentes:

    window._config = { cognito: { userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv region: 'us-west-2' // e.g. us-east-2 }, api: { invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };

    1. Salve o arquivo modificado certificando-se de que o nome de arquivo ainda é config.js.
    2. Abra o console do Amazon S3 acessando https://console.aws.amazon.com/s3/.
    3. Selecione o bucket de site Wild Rydes que você criou no módulo anterior.
    4. Navegue para o js prefix.
    5. Escolha Upload e, em seguida, Add Files.
    6. Navegue até o diretório em que você salvou sua versão modificada localmente do arquivo config.js, selecione-a e escolha Open.
    7. Escolha Upload no lado esquerdo do diálogo.

    Observação: em vez de ter que escrever o código no navegador para gerenciar o registro, verificação e fluxos de login, fornecemos uma implementação de trabalho nos ativos implantados no primeiro módulo. O cognito-auth.js file contém o código que lida com eventos da interface de usuário (UI) e chama os métodos SDK de identidade do Amazon Cognito apropriados. Para obter mais informações sobre o SDK, consulte página do projeto no GitHub.

  • Etapa 4. Testar sua implementação


    1. Acesse /register.html sob o domínio de seu site e escolha o botão Giddy Up! na página inicial do site.
    2. Preencha o formulário de inscrição e escolha Let´s Ryde. Você pode usar o seu próprio e-mail ou inserir um e-mail falso. Certifique-se de escolher uma senha que contenha pelo menos uma letra maiúscula, um número e um caractere especial. Não esqueça a senha que você escolheu para uso posterior. Você deve ver um alerta que confirma que o seu usuário foi criado.
    3. Confirme seu novo usuário usando um dos dois métodos a seguir.
    4. Se tiver usado um endereço de e-mail que você controle, você pode concluir o processo de verificação da conta acessando /verify.html sob o domínio do seu site e inserindo o código de verificação que é enviado para você por e-mail. Observe que o e-mail de verificação pode acabar em sua caixa de spam. Para implantações reais, recomendamos a configuração de seu grupo de usuário para usar o Amazon Simple Email Service para enviar e-mails de um domínio que você possui.
    5. Se você tiver usado um endereço de e-mail fictício, você deve confirmar o usuário manualmente por meio do console do Cognito.
    6. No console da AWS, clique em Services e selecione Cognito em Security, Identity & Compliance.
    7. Escolha Manage your User Pools
    8. Selecione o grupo de usuários WildRydes e clique em Users and groups na barra de navegação à esquerda.
    9. Você deve ver um usuário correspondente ao endereço de e-mail que você enviou por meio da página de registro. Escolha esse nome de usuário para visualizar a página de detalhes do usuário.
    10. Escolha Confirm user para finalizar o processo de criação da conta.
    11. Após confirmar o novo usuário seja usando a página /verify.html ou o console do Cognito, acesse /signin.html e faça login usando o endereço de e-mail e senha especificados durante a etapa de registro.
    12. Se bem-sucedida, você deve ser redirecionado para /ride.html. Você deve ver uma notificação de que a API não está configurada.
    successful-login