Projetos na AWS:

Crie uma aplicação Web sem servidor

com o AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB e Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Introdução

Progression-Bar-07

Hospedar um site estático

Progression-Bar-14

Gerenciar usuários

Progression-Bar-09

Criar um back-end sem servidor

Progression-Bar-10

Implantar uma API RESTful

Progression-Bar-11

Encerrar recursos

Módulo 2. Gerenciamento de usuários

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

Visão geral da arquitetura

Serverless_Web_App_LP_assets-03

Quando os usuários acessarem seu site, primeiro vão se registrar como novos usuários. Neste workshop, vamos pedir que eles forneçam somente um endereço de e-mail e uma senha para se registrar. No entanto, você pode configurar o Amazon Cognito para exigir outros atributos em seus próprios aplicativos.

Depois que os usuários se registrarem, o Amazon Cognito vai enviar um e-mail de confirmação com um código de verificação para o endereço que eles forneceram. Para confirmar a conta, os usuários devem voltar ao seu site e inserir o e-mail e o código de verificação que receberam. Você também pode confirmar as contas dos usuários usando o console do Amazon Cognito se quiser usar endereços de e-mail falsos para testar.

Depois de confirmar a conta (pelo processo de verificação de e-mail ou fazendo a confirmação manual no console), eles vão poder fazer login. Para isso, eles devem usar o nome de usuário (ou e-mail) e a senha. Uma função JavaScript se comunica com o Amazon Cognito, faz a autenticação usando o Secure Remote Password Protocol (SRP) e recebe de volta um conjunto de JSON Web Tokens (JWT). Os JWTs contêm alegações da identidade do usuário e serão usados no próximo módulo para fazer a autenticação usando, como referência, a API RESTful que você criou com o Amazon API Gateway.

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

Serviços usados: Amazon Cognito

Modelo do CloudFormation: se quiser ir para o próximo módulo, você pode iniciar um destes modelos do AWS CloudFormation na mesma região utilizada no módulo 1.

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

Instruções de execução do CloudFormation

  1. Clique no link Launch Stack (Executar pilha) acima para a região de sua escolha.

  2. Escolha Next (Próximo) na página “Select Template” (Selecionar modelo).

  3. Forneça o nome do bucket do seu site do módulo 1 em Website Bucket Name (Nome do bucket do site) — por exemplo, wildrydes-yourname — e selecione Next (Próximo).

    Observação: você deve especificar o mesmo nome de bucket que usou no módulo anterior. Se fornecer o nome de um bucket que não existe ou ao qual você não tem acesso de gravação, a pilha do CloudFormation vai apresentar falha durante a criação.

  4. Na página “Options” (Opções), mantenha todas as opções padrão e selecione Next (Próximo).

  5. Na página Review (Revisar), marque a caixa de seleção para confirmar que o CloudFormation criará recursos do IAM e selecione Create (Criar).

    Esse modelo usa recursos personalizados para criar um grupo de usuários e um cliente do Amazon Cognito, assim como para gerar um arquivo de configuração com os detalhes necessários para conectar esse grupo de usuários e fazer upload dele no bucket do seu site. O modelo vai criar uma função que dá acesso à criação desses recursos e ao envio do arquivo de configuração para seu bucket.

  6. Aguarde até que a pilha wildrydes-webapp-2 atinja o status CREATE_COMPLETE.

  7. Siga as instruções fornecidas na etapa 4. Teste sua implementação para confirmar que está tudo pronto para o próximo módulo.

Instruções de implementação

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

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

    Criar um grupo de usuários do Amazon Cognito

    O Amazon Cognito fornece dois mecanismos diferentes para autenticar usuários. Você pode usar grupos de usuários do Cognito para adicionar as funcionalidades de registro e login ao seu aplicativo ou usar grupos de identidade dele para autenticar usuários por meio de mídias sociais, como Facebook, Twitter ou Amazon, com soluções de identidade SAML. Você pode usar ainda seu próprio sistema de verificação. Neste módulo você vai usar um grupo de usuários como back-end para o registro e as páginas de login fornecidas.

    1. No Console AWS, clique em Services (Serviços) e depois selecione Cognito em Mobile Services (Serviços móveis).
    2. Selecione Manage your User Pools (Gerenciar seus grupos de usuários).
    3. Selecione Create a User Pool (Criar um grupo de usuários).
    4. Dê um nome para seu grupo, como WildRydes, e depois selecione Review Defaults (Revisar padrões)
    5. Na página Review (Revisar), clique em Create pool (Criar grupo)
    6. Anote o Pool Id (ID do grupo) na página de detalhes do grupo de usuários que você acabou de criar.

  • Etapa 2. Adicionar um aplicativo ao seu grupo de usuários

    Adicionar um aplicativo ao seu grupo de usuários

    No console do Amazon Cognito, selecione seu grupo de usuários e, depois, a seção de clientes do aplicativo. Adicione um novo cliente de aplicativo e verifique se a opção Generate Client Secret (Gerar segredo de cliente) está desmarcada. No momento os segredos de clientes não são compatíveis com o SDK do JavaScript. Se você criar um aplicativo com um segredo gerado, exclua-o e crie um novo com a configuração correta.

    1. Na página Pool Details (Detalhes do grupo) do seu grupo de usuários, selecione App clients (Clientes de aplicativo) na seção General Settings (Configurações gerais) à esquerda na barra de navegação.
    2. Escolha Add an app client (Adicionar um cliente de aplicativo).
    3. Dê um nome ao cliente do aplicativo, como WildRydesWebApp.
    4. Desmarque a opção Generate Client Secret (Gerar segredo de cliente). No momento, os segredos de clientes não são compatíveis com aplicativos executados em navegadores.
    5. Escolha Create app client (Criar cliente de aplicativo).
    6. Anote o App Client Id (ID do cliente do aplicativo) para o aplicativo criado.

  • Etapa 3. Atualizar a configuração do site

    Atualizar a configuração do site

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

    a. Em sua máquina local, abra o arquivo “wild-ryde-site/js/config.js” em um editor de texto de sua preferência.

    b. Atualize os valores na seção do Cognito para o grupo de usuários e o aplicativo que você criou.

    É possível encontrar o valor de userPoolId na página Detalhes do grupo do console do Amazon Cognito após selecionar o grupo de usuários que você criou.
    É possível encontrar o valor de userPoolClientId selecionando Clientes do aplicativo na barra de navegação à esquerda. Use o valor do campo ID do cliente do aplicativo referente ao aplicativo que você criou na seção anterior.

    O valor de região deve ser o código da região da AWS em que você criou o grupo de usuários. Por exemplo, us-east-1 para a região do Norte da Virgínia ou us-west-2 para a região de Oregon. Caso não tenha certeza do código a ser usado, veja 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 config.js atualizado deve ter a seguinte aparência: Os valores reais do seu 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',
    }
};

    d. Salve o arquivo modificado e envie-o para seu repositório git para que ele seja implantado automaticamente no console do Amplify.

    $ git push

  • Etapa 4. Testar sua implementação

    Validar sua implementação

    1. Acesse /register.html no domínio do seu site ou selecione o botão Giddy Up! na página inicial dele.
    2. Preencha o formulário de registro e selecione Let's Ryde. Você pode usar seu próprio e-mail ou um falso. A senha deve conter pelo menos uma letra maiúscula, um número e um caractere especial. Guarde essa senha: você vai usá-la posteriormente, Vai ser exibido um alerta, confirmando que o usuário foi criado.
    3. Confirme o novo usuário usando um destes métodos:
    4. Caso tenha usado um endereço de e-mail que você controle, será possível concluir o processo de verificação da conta visitando /verify.html no domínio do seu site e inserindo o código de verificação enviado a você por e-mail. O e-mail de verificação pode acabar indo para sua pasta de spam. Para implantações reais, recomendamosconfigurar seu grupo de usuários para usar o Amazon Simple Email Service para enviar e-mails de um domínio pertencente a você.
    5. Se você usar um endereço de e-mail falso, precisará confirmar o usuário manualmente no console do Cognito.
    6. No Console AWS, clique em Services (Serviços) e, depois, selecione Cognito em Security, Identity & Compliance (Segurança, identidade e conformidade).
    7. Selecione Manage your User Pools (Gerenciar seus grupos de usuários).
    8. Selecione o usuário WildRydes e clique em Users and groups (Usuários e grupos) na barra de navegação na lateral esquerda.
    9. Você verá um usuário correspondente ao endereço de e-mail que você usou na página de registro. Escolha esse nome de usuário para visualizar a página de detalhes dele.
    10. Selecione Confirm user (Confirmar usuário) para finalizar o processo de criação da conta.
    11. Depois de confirmar o novo usuário usando a página /verify.html ou o console do Cognito, acesse /signin.html e efetue login usando o endereço de e-mail e a senha inserida durante a etapa de registro.
    12. Em caso de sucesso, você deverá ser redirecionado para /ride.html. Você verá uma notificação de que a API não está configurada.
    successful-login
Próximo: criar um back-end sem servidor