Proyectos en AWS

Crear una aplicación web moderna

Implemente una aplicación web, conéctese a una base de datos y analice el comportamiento del usuario

Módulo 4: Configurar el registro de usuarios

En este módulo, configurará el registro de usuarios en el sitio web para que pueda capturar información específica del usuario.

Información general

Con el fin de agregar algunos aspectos fundamentales más al sitio web de Mythical Mysfits, como permitir a los usuarios votar su mysfit favorito y adoptar un mysfit, primero necesitamos que los usuarios se registren en el sitio web. Para permitir el registro y la autenticación de los usuarios del sitio web, crearemos un grupo de usuarios en AWS Cognito, un servicio de administración de identidades de usuarios completamente administrado.

Luego, para garantizar que solo los usuarios registrados estén autorizados a darle “Me gusta” o adoptar un mysfit en el sitio web, implementaremos API de REST con Amazon API Gateway para encargarse de nuestro NLB. Amazon API Gateway también es un servicio administrado y proporciona capacidades de API de REST listas para usar que se requieren normalmente, como la terminación de SSL, la autorización de solicitudes, la limitación controlada, las etapas y versiones de la API y mucho más.

Usará la CLI de AWS de nuevo para implementar los recursos necesarios en AWS.

Diagrama de la arquitectura

diagrama de arquitectura de configurar el registro de usuarios

Instrucciones para la implementación

  • A: Crear el grupo de usuarios de Cognito

    Para crear el grupo de usuarios de Cognito donde se almacenarán todos los visitantes de Mythical Mysfits, ejecute el siguiente comando de la CLI y cree un grupo de usuarios llamado MysfitsUserPool. Luego, indique que a todos los usuarios que estén registrados en este grupo se les debe verificar automáticamente la dirección de email a través de un correo electrónico de confirmación antes de que se conviertan en usuarios confirmados.

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

    Copie la respuesta del comando anterior, que incluye el ID único para su grupo de usuarios que deberá utilizar en los siguientes pasos. Por ejemplo: Id: us-east-1_ab12345YZ)

    B: Crear un cliente del grupo de usuarios de Cognito

    A continuación, con el propósito de integrar nuestro sitio web de frontend con Cognito, debemos crear un nuevo cliente del grupo de usuarios para este grupo de usuarios. Esto genera un identificador de cliente único que permitirá que nuestro sitio web esté autorizado a llamar a las API sin autenticar en Cognito, donde los usuarios del sitio web pueden iniciar sesión y registrarse en el grupo de usuarios de Mythical Mysfits. Para crear un nuevo cliente usando la CLI de AWS del grupo de usuarios anterior, ejecute el siguiente comando (reemplace el valor de --user-pool-id por el que copió anteriormente):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • A continuación, centrémonos en la creación de una API de RESTful en el servicio de Flask existente, para que podamos realizar una autorización de solicitud antes de que nuestro NLB reciba cualquier solicitud. Lo haremos con Amazon API Gateway, como se describió en la información general del módulo.

    Para que API Gateway se integre de manera privada a nuestro NLB, configuraremos un enlace de la VPC de API Gateway que permite que las API de API Gateway se integren directamente a los servicios web de backend que están alojados dentro de la VPC de manera privada. Nota: A los fines de este taller, creamos el NLB para que esté conectado a Internet y pueda llamarse directamente en los módulos anteriores. Debido a esto, si bien necesitaremos tokens de autorización en nuestra API después de este módulo, nuestro NLB aún estará disponible públicamente junto con la API de API Gateway.

    En una situación real, debería crear su NLB de modo que sea interno desde el comienzo (o crear un nuevo balanceador de carga interno para reemplazar el existente), y saber que API Gateway sería su estrategia para autorizar la API con conexión a Internet. Con el fin de ahorrar tiempo, usaremos el NLB que ya hemos creado y que podrá accederse públicamente.

    Cree el enlace de la VPC para nuestra próxima API de REST con el siguiente comando de la CLI (deberá reemplazar el valor indicado con el ARN del balanceador de carga que guardó cuando se creó el NLB en el módulo 2):

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

    El comando anterior creará un archivo llamado api-gateway-link-output.json que contiene el ID del enlace de la VPC que se está creando. También mostrará el estado PENDIENTE, como se muestra a continuación.

    Tomará alrededor de 5 a 10 minutos terminar de crearlo, por lo que puede copiar el ID de este archivo y avanzar al siguiente paso.

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

    Mientras se crea el enlace de la VPC, podemos continuar y crear la API de REST real usando Amazon API Gateway.

    B: Crear la API de REST con Swagger

    Su API de REST de MythicalMysfits se define usando **Swagger**, un marco de código abierto popular para describir las API a través de JSON. Esta definición de Swagger de la API se encuentra en “~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json”. Abra este archivo y verá la API de REST y todos sus recursos, métodos y configuración definidos allí.

    Hay varios lugares en el archivo JSON que necesitan actualizarse para incluir los parámetros específicos en su grupo de usuarios de Cognito, así como también su balanceador de carga de red.

    El objeto “securityDefinitions” de la definición de la API indica que hemos configurado un mecanismo de autorización de apiKey usando el encabezado de autorización. Notará que AWS ha proporcionado extensiones personalizadas para Swagger usando el prefijo “x-amazon-api-gateway-”. Estas extensiones son donde la funcionalidad específica de API Gateway puede agregarse a archivos típicos de Swagger con el de fin aprovechar las capacidades específicas de API Gateway.

    Presione CTRL-F en el archivo para buscar en los diversos lugares donde se encuentra “REPLACE_ME” a la espera de los parámetros específicos. Una vez que se hayan realizado las ediciones, guarde el archivo y ejecute el siguiente comando de la CLI de 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 la respuesta que devuelve este comando y guarde el valor “id” para el siguiente paso:

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

    Ya se ha creado nuestra API, pero aún debe implementarse en algún lugar. Para implementar nuestra API, primero debemos crear una implementación e indicar qué **etapa** de la implementación se realiza primero. Una etapa es una referencia indicada para una implementación, que es una instantánea de la API.

    Utiliza una etapa para administrar y optimizar una implementación específica. Por ejemplo, puede establecer la configuración de una etapa para permitir el almacenamiento en caché, personalizar la limitación controlada de solicitudes, configurar registros, definir variables de la etapa o asociar una versión de valor controlado para pruebas. Llamaremos a nuestra etapa “prod”. Con el fin de crear una implementación para la etapa prod, ejecute el siguiente comando de la CLI:

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

    Acto seguido, nuestra API de REST, que es compatible con la autorización de usuario, se implementa y se vuelve disponible en Internet… pero, ¿dónde? Su API está disponible en la siguiente ubicación:

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

    Copie lo anterior, reemplace los valores apropiados y agregue “/mysfits” al final del URI. Cuando lo escriba en la barra de direcciones de un navegador, una vez más debería ver su respuesta de JSON de Mysfits. Sin embargo, hemos agregado varias capacidades, como poder adoptar y dar “Me gusta” a los mysfits, que el backend del servicio de Flask no ha implementado todavía.

    A continuación, nos ocuparemos de eso.

    Mientras esas actualizaciones del servicio se envían automáticamente a través de la canalización de CI/CD, continúe con el siguiente paso.

  • A: Actualizar el backend del servicio de Flask

    Para adaptar la nueva funcionalidad con el fin de ver los perfiles de Mysfit, darles “Me gusta” y adoptarlos, hemos incluido un código de Python actualizado para su servicio web de Flask de backend.

    Sobrescribamos su base de código existente con estos archivos y los enviemos al repositorio:

    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

    Mientras esas actualizaciones del servicio se envían automáticamente a través de la canalización de CI/CD, continúe con el siguiente paso.

    B: Actualizar el sitio web de Mythical Mysfits en S3

    Abra la nueva versión del archivo index.html de Mythical Mysfits que enviará a Amazon S3 en breve y se encuentra en la siguiente ruta: ~/environment/aws-modern-application-workshop/module-4/app/web/index.html. En este nuevo archivo index.html, notará un código HTML y JavaScript adicional que se usa para agregar el registro de un usuario y la experiencia de inicio de sesión.

    Este código interactúa con el SDK de AWS Cognito para JavaScript con el fin de administrar el registro, la autenticación y la autorización de todas las llamadas a la API que lo requieran.

    En este archivo, reemplace las cadenas REPLACE_ME dentro de las comillas simples con los valores OutputValues que copió anteriormente y guarde el archivo:

    before-replace2

    Además, para el proceso de registro de usuarios, tiene dos archivos HTML adicionales en los que debe insertar estos valores: register.html y confirm.html. También inserte los valores copiados en las cadenas REPLACE_ME en estos archivos.

    Ahora, copiemos estos archivos HTML, así como también el SDK de Cognito para JavaScript en el bucket de S3 que aloja el contenido del sitio web de Mythical Mysfits, por lo que las nuevas características se publicarán en línea.

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

    Actualice el sitio web de Mythical Mysfits en su navegador para ver la nueva funcionalidad en acción.

    Con esto concluye el Módulo 4.

Finalmente, capture el comportamiento del usuario