Projetos na AWS

Crie um aplicativo web moderno

Implante um aplicativo web, estabeleça uma conexão a um banco de dados e analise o comportamento dos usuários

Módulo 4: Configurar registro do usuário

Neste módulo, você configurará o registro do usuário no site para capturar informações específicas do usuário.

Visão geral

Para adicionar alguns aspectos mais críticos ao site Mythical Mysfits, como permitir que os usuários votem em seu mysfit favorito e adotem um mysfit, precisamos primeiro fazer com que os usuários se registrem no site. Para habilitar o registro e a autenticação dos usuários do site, criaremos um Pool de usuários no AWS Cognito - um serviço de gerenciamento de identidade de usuário totalmente gerenciado.

Em seguida, para garantir que apenas usuários registrados estejam autorizados a curtir ou adotar mysfits no site, implantaremos uma API REST com o Amazon API Gateway para ficar na frente do nosso NLB. O Amazon API Gateway também é um serviço gerenciado e fornece recursos comuns da API REST, prontos para uso, como terminação SSL, solicitação de autorização, limitação, estágios e versão da API e muito mais.

Você usará novamente a ILC da AWS para implantar os recursos necessários na AWS.

Diagrama de Arquitetura

diagrama de arquitetura de registro do usuário de configuração

Instruções de implementação

  • A: Criar o pool de usuários do Cognito

    Para criar o pool de usuários do Cognito em que todos os visitantes do Mythical Mysfits serão armazenados, execute o seguinte comando da ILC para criar um pool de usuários chamado MysfitsUserPool e indicar que todos os usuários registrados nesse pool devem ter o seu endereço de e-mail verificado automaticamente por e-mail de confirmação antes de se tornarem usuários confirmados.

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    Copie a resposta do comando acima, que inclui o ID exclusivo para seu pool de usuários que você precisará usar nas etapas posteriores. Ex: Id: us-east-1_ab12345YZ)

    B: Crie um cliente de pool de usuários do Cognito

    Em seguida, para integrar o nosso site frontend com o Cognito, precisamos criar um novo cliente de pool de usuários para esse pool de usuários. Isso gera um identificador de cliente exclusivo que permitirá que nosso site seja autorizado a chamar APIs não autenticadas no cognito, onde os usuários do site podem entrar e se registrar no pool de usuários do Mythical Mysfits. Para criar um novo cliente usando a ILCI da AWS para o pool de usuários acima, execute o seguinte comando (substituindo o valor --user-pool-id pelo valor que você copiou acima):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • Em seguida, vamos voltar a nossa atenção para a criação de uma nova API RESTful na frente do nosso serviço Flask existente, para que possamos executar a autorização de solicitação antes que o nosso NLB receba solicitações. Faremos isso com o Amazon API Gateway, conforme descrito na visão geral do módulo.

    Para que o API Gateway se integre em particular ao nosso NLB, configuraremos um Link VPC do API Gateway que permitirá que as APIs do API Gateway se integrem diretamente aos serviços da Web de back-end hospedados em um VPC em particular. Observação: Para os propósitos deste workshop, criamos o NLB voltado para a Internet, para que pudesse ser chamado diretamente nos módulos anteriores. Por esse motivo, mesmo exigindo tokens de autorização em nossa API após este módulo, nosso NLB ainda estará aberto ao público por trás da API do API Gateway.

    Em um cenário do mundo real, você deve criar seu NLB para ser interno desde o início (ou criar um novo load balancer interno para substituir o existente), sabendo que o API Gateway seria sua estratégia para autorização de API voltada para a Internet. Mas, por uma questão de tempo, usaremos o NLB que já criamos que permanecerá acessível ao público.

    Crie o link VPC para nossa próxima API REST usando o seguinte comando da ILC (você precisará substituir o valor indicado pelo ARN do Load Balancer que você salvou quando o NLB foi criado no módulo 2):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    O comando acima criará um arquivo chamado api-gateway-link-output.json que contém o ID do link VPC que está sendo criado. Também mostrará o status como PENDENTE, semelhante ao abaixo.

    Levará cerca de 5-10 minutos para concluir a criação. Você pode copiar o ID desse arquivo e prosseguir para a próxima etapa.

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    Com a criação do link da VPC, podemos criar a API REST real usando o Amazon API Gateway.

    B: Crie a API REST usando o Swagger

    Sua API REST MythicalMysfits é definida usando o ** Swagger **, uma estrutura popular de código aberto para descrever APIs via JSON. Esta definição do Swagger da API está localizada em `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`. Abra esse arquivo e você verá a API REST e todos os seus recursos, métodos e configurações aí definidos.

    Existem vários locais nesse arquivo JSON que precisam ser atualizados para incluir parâmetros específicos ao seu Pool de Usuários do Cognito, bem como ao seu Network Load Balancer.

    O objeto `securityDefinitions` na definição da API indica que configuramos um mecanismo de autorização apiKey usando o cabeçalho de autorização. Você notará que a AWS forneceu extensões personalizadas ao Swagger usando o prefixo `x-amazon-api-gateway-`, essas extensões são onde as funcionalidades específicas do API Gateway podem ser adicionadas aos arquivos swagger típicos para aproveitar os recursos específicos do API Gateway.

    CTRL-F por todo o arquivo para procurar os vários locais em que `REPLACE_ME` está localizado e aguardando seus parâmetros específicos. Depois que as edições forem feitas, salve o arquivo e execute o seguinte comando de ILC da AWS:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    Copie a resposta que este comando retorna e salve o valor `id` para a próxima etapa:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C: Implante a API

    Agora, nossa API foi criada, mas ainda precisa ser implantada em algum lugar. Para implantar nossa API, primeiro precisamos criar uma implantação e indicar qual **estágio** a implantação está à frente. Um estágio é uma referência nomeada a uma implantação, que é uma captura instantânea da API.

    Você usa um Estágio para gerenciar e otimizar uma implantação específica. Por exemplo, você pode definir configurações de estágio para habilitar o armazenamento em cache, personalizar a otimização de solicitações, configurar o log, definir variáveis de estágio ou anexar um release canário para teste. Vamos chamar nosso estágio de `prod`. Para criar uma implementação para o estágio prod, execute o seguinte comando de ILC:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    Com isso, nossa API REST capaz de Autorização de Usuário é implantada e disponível na Internet... mas onde?! A sua API está disponível no seguinte local:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    Copie o acima, substituindo os valores apropriados, e adicione `/ mysfits` ao final do URI. Digitada em uma barra de endereço do navegador, você deverá ver novamente a sua resposta JSON do Mysfits. Porém, adicionamos vários recursos, como adotar e curtir mysfits que o nosso back-end de serviço do Flask ainda não implementou.

    Vamos cuidar disso a seguir.

    Enquanto essas atualizações de serviço estão sendo enviadas automaticamente pelo pipeline de CI/CD, prossiga para a próxima etapa.

  • R: Atualize o back-end do serviço Flask

    A fim de acomodar a nova funcionalidade para visualizar os perfis do Mysfit, curti-los e adotá-los, incluímos o código Python atualizado para o serviço da web de back-end do Flask.

    Vamos sobrescrever sua base de código existente com esses arquivos e enviá-los para o repositório:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    Enquanto essas atualizações de serviço estão sendo enviadas automaticamente pelo pipeline de CI/CD, prossiga para a próxima etapa.

    B: Atualize o site Mythical Mysfits em S3

    Abra a nova versão do arquivo Mythical Mysfits index.html que enviaremos para o Amazon S3 em breve. está localizado em: ~/environment/aws-modern-application-workshop/module-4/app/web/index.html. No novo arquivo index.html, você notará um código HTML e JavaScript adicional que é usado para adicionar uma experiência de registro e de login de usuário.

    Esse código interage com o AWS Cognito JavaScript SDK para ajudar a gerenciar o registro, a autenticação e a autorização de todas as chamadas de API que exigem isso.

    Nesse arquivo, substitua as sequências REPLACE_ME entre aspas simples pelos valores de saída copiados acima e salve o arquivo:

    before-replace2

    Além disso, para o processo de registro do usuário, você tem dois arquivos HTML adicionais para inserir esses valores. register.html e confirm.html. Insira os valores copiados nas sequências de REPLACE_ME nestes arquivos também.

    Agora, vamos copiar esses arquivos HTML, bem como o Cognito JavaScript SDK para o bucket S3 que hospeda o nosso conteúdo do site Mítico Mysfits para que os novos recursos sejam publicados online.

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    Atualize o site Mythical Mysfits no seu navegador para ver a nova funcionalidade em ação!

    Isto conclui o Módulo 4.

Por fim, capture o comportamento do usuário