Proyectos en AWS:

Desarrolle una aplicación web sin servidor

con AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB y Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Introducción

Progression-Bar-07

Alojar un sitio web estático

Progression-Bar-14

Administrar usuarios

Progression-Bar-09

Crear un backend sin servidor

Progression-Bar-10

Implementar una API RESTful

Progression-Bar-11

Finalizar los recursos

Módulo 2. Administración de usuarios

En este módulo va a crear un grupo de usuarios de Amazon Cognito para administrar las cuentas de los usuarios. Implementará páginas que permiten a los clientes registrarse como nuevo usuario, verificar su dirección de correo electrónico e iniciar sesión en el sitio.

Información general de la arquitectura

Serverless_Web_App_LP_assets-03

Cuando los usuarios visiten su sitio web, deberán registrar en primer lugar una cuenta de usuario nueva. Para este taller, solo se les pedirá que proporcionen una dirección de correo electrónico y una contraseña para registrarse. Sin embargo, puede configurar Amazon Cognito para solicitar atributos adicionales en sus propias aplicaciones.

Una vez que los usuarios envíen su registro, Amazon Cognito enviará un correo electrónico de confirmación con un código de verificación a la dirección que hayan proporcionado. Para confirmar su cuenta, los usuarios volverán a su sitio y especificarán la dirección de correo electrónico y el código de verificación que han recibido. También puede utilizar la consola de Amazon Cognito para confirmar las cuentas de usuario, si desea utilizar direcciones de correo electrónico falsas para las pruebas.

Una vez que los usuarios tengan una cuenta confirmada (ya sea mediante el proceso de verificación por correo electrónico o de confirmación manual a través de la consola), podrán iniciar sesión. Al iniciar sesión, los usuarios especifican su nombre de usuario (o correo electrónico) y contraseña. A continuación, una función JavaScript se comunica con Amazon Cognito, se autentica con el protocolo Secure Remote Password (SRP) y se le devuelve un conjunto de tokens web JSON (JWT). Los tokens JWT contienen notificaciones sobre la identidad del usuario y se utilizarán en el módulo siguiente para autenticarse en la API RESTful que creó con Amazon API Gateway.

Tiempo para completar el módulo: 30 minutos

Servicios utilizados: Amazon Cognito

Plantilla de CloudFormation: si desea avanzar al módulo siguiente, puede lanzar una de estas plantillas de AWS CloudFormation en la misma región que utilizó en el módulo 1.

Región Plantilla de CloudFormation
EE.UU. Este (Norte de Virginia) Lanzar pila >
EE.UU. Este (Ohio) Lanzar pila >
EE.UU. Oeste (Oregón) Lanzar pila >
UE (Fráncfort) Lanzar pila >
UE (Irlanda) Lanzar pila >
UE (Londres) Lanzar pila >
Asia Pacífico (Tokio) Lanzar pila >
Asia Pacífico (Seúl) Lanzar pila >
Asia Pacífico (Sídney) Lanzar pila >
Asia Pacífico (Mumbai) Lanzar pila >
Serverless_Web_App_LP_assets-17

Instrucciones de lanzamiento de CloudFormation

  1. Elija el enlace Lanzar pila anterior de la región que elija.

  2. Elija Next (Siguiente) en la página para seleccionar la plantilla.

  3. Proporcione el nombre del bucket del sitio web del módulo 1 en el campo Website Bucket Name (Nombre del bucket del sitio web) (por ejemplo, wildrydes-yourname) y elija Next (Siguiente).

    Nota: debe especificar el mismo nombre de bucket que utilizó en el módulo anterior. Si proporciona un nombre de bucket que no existe o al que no tiene acceso de escritura, se producirá un error de la pila de CloudFormation durante la creación.

  4. En la página Options (Opciones), deje los valores predeterminados y elija Next (Siguiente).

  5. En la página Review (Revisar), seleccione la casilla para confirmar que CloudFormation debe crear los recursos de IAM y elija Create (Crear).

    Esta plantilla utiliza recursos personalizados para crear un cliente y un grupo de usuarios de Amazon Cognito, además de generar un archivo de configuración con los detalles necesarios para conectarse a dicho grupo de usuarios y cargarlo en el bucket del sitio web. La plantilla creará un rol que proporciona acceso para crear estos recursos y cargar el archivo de configuración en el bucket.

  6. Espere hasta que la pila wildrydes-webapp-2 alcance el estado CREATE_COMPLETE.

  7. Siga los pasos que se indican en el Paso 4. Probar la implementación para confirmar que está listo para pasar al módulo siguiente.

Instrucciones de implementación

Siga las instrucciones paso a paso a continuación para crear grupos de usuarios. Haga clic en cada uno de los números de paso para ampliar la sección correspondiente.

  • Paso 1. Crear un grupo de usuarios de Amazon Cognito

    Crear un grupo de usuarios de Amazon Cognito

    Amazon Cognito ofrece dos mecanismos distintos para la autenticación de usuarios. Puede utilizar los grupos de usuarios de Cognito para añadir funcionalidad de inscripción e inicio de sesión a su aplicación, o bien utilizar los grupos de identidades de Cognito para autenticar a los usuarios a través de proveedores de identidad de redes sociales, como Facebook, Twitter o Amazon, con soluciones de identidad SAML o mediante su propio sistema de identidad. Para este módulo, utilizará un grupo de usuarios como backend para las páginas de registro e inicio de sesión proporcionadas.

    1. En la consola de AWS, haga clic en Services (Servicios) y, a continuación, seleccione Cognito en Mobile Services (Servicios móviles).
    2. Elija Manage your User Pools (Administrar sus grupos de usuarios).
    3. Elija Create a User Pool (Crear un grupo de usuarios).
    4. Proporcione un nombre para el grupo de usuarios, como WildRydes; a continuación, seleccione Review Defaults (Revisar valores predeterminados)
    5. En la página de revisión, haga clic en Create pool (Crear grupo).
    6. Anote el Pool Id (ID de grupo) en la página de detalles del grupo de usuarios que acaba de crear.

  • Paso 2. Añadir una aplicación al grupo de usuarios

    Añadir una aplicación al grupo de usuarios

    En la consola de Amazon Cognito, seleccione su grupo de usuarios y, a continuación, elija la sección de clientes de aplicaciones. Añada un nuevo cliente de aplicación y asegúrese de que la opción Generate client secret (Generar secreto de cliente) no está seleccionada. Los secretos de cliente no se admiten actualmente en el SDK de JavaScript. Si crea una aplicación con un secreto generado, elimínela y cree una nueva con la configuración correcta.

    1. En la página Pool Details (Detalles del grupo) de su grupo de usuarios, seleccione App clients (Clientes de la aplicación) en la sección General Settings (Configuración general) ubicada en el lateral izquierdo de la barra de navegación.
    2. Elija Add an app client (Añadir un cliente de aplicación).
    3. Asigne un nombre al cliente de aplicación, como WildRydesWebApp.
    4. Desactive la opción Generate client secret (Generar secreto de cliente). Los secretos de cliente no se admiten actualmente para su uso con aplicaciones basadas en navegadores.
    5. Elija Create app client (Crear cliente de aplicación).
    6. Anote el App client id (ID de cliente de aplicación) para la aplicación que se acaba de crear.

  • Paso 3. Actualizar la configuración del sitio web

    Actualizar la configuración del sitio web

    El archivo /js/config.js contiene la configuración del ID de grupo de usuarios, el ID de cliente de aplicación y la región. Actualice este archivo con la configuración de la aplicación y el grupo de usuarios que creó en los pasos anteriores y vuelva a cargar el archivo en el bucket.

    a. Desde la máquina local, abra “wild-ryde-site/js/config.js” en el editor de texto que prefiera.

    b. Actualice la sección de cognito con los valores correctos para la aplicación y el grupo de usuarios que acaba de crear.

    Puede encontrar el valor para userPoolId en la página de detalles del grupo de la consola de Amazon Cognito, después de seleccionar el grupo de usuarios que ha creado.
    Para encontrar el valor de userPoolClientId, seleccione clientes de aplicaciones en la barra de navegación ubicada a la izquierda. Utilice el valor del campo ID de cliente de aplicaciones para la aplicación que creó en la sección anterior.

    El valor de la región debe ser el código de la región de AWS en la que creó el grupo de usuarios. Por ejemplo, us-east-1 para la región Norte de Virginia o us-west-2 para la región de Oregón. Si no está seguro de qué código utilizar, puede ver el valor ARN del grupo en la página de detalles del grupo. El código de la región es la parte del ARN inmediatamente después de arn:aws:cognito-idp:.

    El archivo config.js actualizado debería tener un aspecto similar al siguiente. Tenga en cuenta que los valores reales para su archivo serán distintos:

    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. Guarde el archivo modificado y envíelo al repositorio de Git para que se implemente de forma automática en la consola de Amplify.

    $ git push

  • Paso 4. Probar la implementación

    Validar su implementación

    1. Visite /register.html en su dominio de sitio web o elija el botón Giddy Up! en la página de inicio de su sitio.
    2. Complete el formulario de registro y elija Let's Ryde. Puede utilizar su correo electrónico o especificar uno falso. Asegúrese de elegir una contraseña que contenga al menos una letra en mayúsculas, un número y un carácter especial. No olvide la contraseña especificada, la necesitará más adelante. Debería ver una alerta que confirme que el usuario se ha creado.
    3. Confirme su nuevo usuario con uno de los dos métodos siguientes.
    4. Si utilizó una dirección de correo electrónico que usted controla, puede finalizar el proceso de verificación de cuenta si visita /verify.html en el dominio del sitio web e introduce el código de verificación que se le ha enviado por correo electrónico. Tenga en cuenta que el correo electrónico de verificación podría estar en la carpeta de spam. Para las implementaciones reales, se recomienda configurar el grupo de usuarios para utilizar Amazon Simple Email Service a fin de enviar correos electrónico desde un dominio propio.
    5. Si ha utilizado una dirección de correo electrónico ficticia, debe confirmar manualmente el usuario a través de la consola de Cognito.
    6. En la consola de AWS, haga clic en Services (Servicios) y, a continuación, seleccione Cognito en Security, Identity & Compliance (Seguridad, identidad y conformidad).
    7. Elija Manage your User Pools (Administrar sus grupos de usuarios).
    8. Seleccione el grupo de usuarios WildRydes y haga clic en Users and groups (Usuarios y grupos) en la barra de navegación izquierda.
    9. Debería aparecer el usuario correspondiente a la dirección de correo electrónico que envió a través de la página de registro. Elija dicho nombre de usuario para ver la página de detalles correspondiente.
    10. Elija Confirm user (Confirmar el usuario) para finalizar el proceso de creación de la cuenta.
    11. Después de confirmar el usuario nuevo con la página /verify.html o la consola de Cognito, visite /signin.html e inicie sesión con la dirección de correo electrónico y la contraseña que introdujo durante el paso de registro.
    12. Si el proceso se desarrolla correctamente, se le redirigirá a /ride.html. Debería aparecer una notificación de que la API no está configurada.
    successful-login
Siguiente: Crear un backend sin servidor