Agrega autenticación a tu aplicación web.

Recomendaciones personalizadas de anime

Por Elizabeth Fuentes Leone es Developer Advocate en AWS

Este nuevo episodio vas a integrar el registro de usuarios a la aplicación web empleando el servicio de Amazon Cognito a través de la interfaz visual de AWS Amplify Studio para administrar los usuarios y el acceso a la aplicación de forma segura y escalable, y lo integrarás empleando el método CI/CD que dejaste listo en el episodio anterior.

Resumen de la serie

Recomendaciones personalizadas de anime, es una serie de episodios donde te guío en la construcción de una aplicación web capaz de entregar una experiencia personalizada de recomendaciones de animes, nuevos de la preferencia del usuario y, a medida que se utiliza con mayor frecuencia, puede ir entregando recomendaciones cada vez más relevantes.

Consiste en los siguientes episodios:

1. Cómo crear un modelo de recomendaciones personalizadas.

En el primer episodio se entrenó un modelo de recomendaciones de anime utilizando Amazon Personalize empleando las calificaciones de Anime. Este modelo se puede utilizar a través de la API de Personalize Runtime utilizando un jupyter notebook.

2. Cómo desplegar el modelo recomendador de anime en una API REST

En el segundo episodio se hizo la integración a una API REST empleando Amazon API Gateway. Esta API permite entregar las recomendaciones a la aplicación y además alimentar el modelo recomendador con las nuevas interacciones.

3. Crea una aplicación web para probar las recomendaciones personalizadas de anime en tiempo real.

En el tercer episodio desplegaste una aplicación web que simula la interfaz de una plataforma de video streaming de series y películas de Anime para interactuar con lo creado en los episodios anteriores.

4. Cómo agregar autenticación a tu aplicación web. (este episodio)

5. Medir el impacto de las recomendaciones personalizadas en los usuarios.

La aplicación desplegada en el episodio 3 no permite la creación de nuevos usuarios ni el inicio y cierre de sesión. Si bien la recomendaciones se entregan por usuarios la aplicación solo permite ingresar un numero de usuario directamente en el código. Esto lo vas a cambiar hoy.

¡A construir! 🧰🚀

El proyecto 👷🏻: Incorporar un pool de usuarios a una aplicación web.

Pre-requisitos:

• Cuenta de AWS
• Conocimientos básicos en Python.
• Conocimientos básicos en JavaScript / react.

Manos a la obra 🚀 👩🏻‍🚀

Paso 1: Despliega la aplicación web de recomendaciones personalizadas de anime en tiempo real.

1. Sigue los pasos del episodio Cómo crear un modelo de recomendación personalizado e ignora el paso final donde se borran los recursos.
2. Sigue los pasos del episodio Cómo desplegar el modelo recomendador de anime en una API REST e ignora el paso final donde se borran los recursos.
3. Sigue los pasos del episodio Crea una aplicación web para probar las recomendaciones personalizadas de anime en tiempo real e ignora el paso final donde se borran los recursos.

Paso 2: Crear la aplicación backend de AWS Amplify Studio.

1. Ingresa a la consola de AWS Amplify
2. Selecciona la región donde configuraste los episodios anteriores.
3. Selecciona la aplicación que desplegaste en el episodio anterior ( 1)

Fig. 1 Aplicación recomendador-anime-app-recomendador en AWS Amplify.

4. En este paso desplegarás la aplicación backend para eso selecciona Backend enviroments y luego presiona Get Started ( 2)

Fig. 2 Crear la aplicación de Amplify Studio: Backend enviroments -> Get Started.

5. Configurando e inicializando el entorno de backend de Amplify Studio (3) que te permite acelerar el desarrollo de la interfaz de usuario con codificación mínima, ten paciencia este paso tarda unos minutos.

Fig. 3 Configurando e inicializando el entorno de backend de Amplify Studio.

Paso 3: Lanzar el Studio de Amplify

1. Una vez finalice la creación de nuestra instancia de Amplify Studio, ingresa nuevamente a Backend environments y selecciona Lanzar Studio (4).

Fig. 4 Lanzar el Studio de Amplify.

2. Te doy la bienvenida a (5), un entorno de desarrollo visual para crear y administrar tus aplicaciones móviles y web fullstack con unos pocos clics.

Fig. 5 Bienvenido a Amplify Studio.

Paso 4: Integra la autenticación a la aplicación web en Amplify Studio.

 Con Amplify Studio puedes generar el backend visualmente o con la Amplify CLI, aprovisionar una API de GraphQL con tablas de bases de datos, administrar los datos, archivos y usuarios desde la interfaz visual,  te invito a saber más sobre Amplify Studio acá.

Amplify usa Amazon Cognito como el principal proveedor de autenticación, a continuación aprenderás a configurar el inicio de sesión con usuario/contraseña:

1. En el menú de la izquierda selecciona Authentication ( 6).

Fig. 6 Menú Authentication.

2. El primer paso en el menú de Authentication es configurar el tipo de acceso que tendrán los usuario a la aplicación. Puedes escoger métodos de autenticación como:

• Correo y contraseña.
• Iniciar sesión con cuentas de aplicaciones de terceros como Amazon, Google, Facebook o Apple ( 7).

Para la aplicación web recomendaciones de anime se utilizará correo y contraseña, por lo que en este paso no se requiere modificación. En este link puedes explorar como crear el inicio de sesión con cuentas de aplicaciones de terceros.

Fig. 7 Configuración del acceso de usuario.

3. El siguiente paso es configurar el inicio de sesión, en Add attribute selecciona Email y en Password Policy puedes dejarlo como esta o quitar selecciones para crear la contraseña (8). Con esto queda definido que el inicio de sesión requiere Email y la contraseña creada debe cumplir con la política definida. Finaliza con Deploy (Fig. 8).

Fig. 8 Configuración del inicio de sesión.

4. En la ventana emergente confirma en Confim deployment ( 9), esto despliega un nuevo grupo de usuarios en Amazon Cognito.

Fig. 9 Despliegue de la autenticación en Amazon Cognito.

5. Amplify tomara los datos de configuración y procederá a desplegar nuestros recursos en Cognito mediante AWS CloudFormation. Al finalizar el despliegue verás el comando con el cual puedes integrar la nueva autenticación a la web existente (10) y los pasos a seguir en el caso de que lo hagas desde un pc local, para este proyecto solo necesitas el ID que se oculta con el recuadro naranja.

Fig. 10 Despliegue exitoso de la autenticación.

Paso 4: 👀 Échale un vistazo el nuevo grupo de usuario en la consola de Amazon Cognito.

1. Ingresa a la consola de Amazon Cognito.
2. Ve a Grupos de usuarios y selecciona el creado recientemente, debería llamarse recomendadoranimeapprecomendador-staging, ingresa (11).

Fig. 11 Listado de Grupo de usuarios de Amazon Cognito.

3. En este nuevo menú encontraras a los usuarios autenticados en la aplicación web, ahora está vacío ( 12).

Fig. 12 Grupo de usuarios en Amazon Cognito.

Paso 5: Generar la comunicación del backend con el frontend en Amplify.

En el episodio 3 el frontend lo se creó con el código existente en el  repositorio del proyecto y se utilizó el servicio de Amplify para hospedarlo.

En los pasos anteriores se creó el backend de la aplicación, ahora debes actualizar el repositorio para conectar ambos ambientes

1. Ingresa a la aplicación en Acciones selecciona Ver la configuración de la aplicación (13).

Fig. 13 Acciones à Ver la configuración de la aplicación.

2. En Ramificaciones en Acciones selecciona Desconectar ramificación ( 14) y confirma Desconectar en la ventana emergente.

Fig. 14 Desconectar la ramificación.

3. Regresa al menú anterior y ahora te aparecerá Alojar una aplicación web (15), selecciona AWS CodeCommit y luego Conectar ramificación.

Fig. 15 Agregar una aplicación web.

4. En Repositorios actualizado recientemente selecciona recomendador-anime, selecciona ¿Conectando un monorepo? Escoja una carpeta, escribe app-recomendador, deberías ver algo como en 16 y luego selecciona Siguiente.

Fig. 16 Agregar nueva ramificación.

5. En Configuración de compilación, selecciona redomendador-anime-app-recomendador como el App name, en Enviroment selecciona staging, selecciona el recuadro de Las CI/CD de pila completa permiten implementar continuamente los cambios del frontend y del backend en cada confirmación de código, Crea un nuevo rol ( 17).

Fig. 17 Configuración de compilación.

6. Para crear el nuevo rol sigue los pasos, luego actualiza la vista de 17 y anéxalo en Si, implementar el backend con un rol existente. Deberías ver algo similar a la Fig. 18, fíjate que en los comandos del build aparece uno nuevo: amplifypush –simple, este se encarga de implementar el backend.

Esta actualización de Amplify permite un CI/CD full stack, genera el archivo aws-exports.js con la configuración de Amplify para que el frontend se pueda comunicar con el backend (Cognito).

Avanza con Siguiente.

Fig. 18 Configuración de compilación y pruebas.

7. Finaliza con Guardar e implementar.
8. Cuando finalices la aplicación entrará en modo En ejecución, esto puede tardar unos minutos ( 19).

Fig. 19 Modo En ejecución de la aplicación.

Paso 6: Crea el usuario AWS Identity and Access Management (IAM) para Amplify.

Para incorporar la autenticación del pool de usuario en el frontend utilizando Amplify CLI y administrar el proyecto desde la terminal de Cloud9 necesitaras credenciales programáticas de un usuario de IAM con las políticas y permisos necesarios.

1. En la consola de AWS IAM ve a Usuarios y selecciona Agregar usuarios ( 20).

Fig. 20 Agregar usuarios en consola de AWS IAM.

2. En Detalles del usuario à Nombre de usuario ingresa recomendador-anime-amplify y selecciona Siguiente ( 21).

Fig. 21 Detalle de usuario IAM.

3. En Establecer permisos à Opciones de permisos selecciona Adjuntar políticas directamente, en Políticas de permisos busca AdministratorAccess-Amplify, selecciónala y luego Siguiente ( 22).

Fig. 22 Establecer permisos para usuario IAM.

4. Finaliza con Crear usuario.

Antes de continuar crea la Claves de acceso para poder utilizar el usuario IAM desde la aplicación web, para esto debes.

1. Acceder al usuario recién creado ( 23)

Fig. 23 Usuario IAM creado.

2. En Credenciales de seguridad à Claves de acceso selecciona Crear clave de acceso.
3. En Prácticas recomendadas y alternativas para la clave de acceso selecciona Interfaz de línea de comandos (CLI), selecciona la casilla de Entiendo la recomendación anterior y deseo proceder a la creación de una clave de acceso y continua con Siguiente ( 24).

Fig. 24 Practicas recomendadas y alternativas para la clave de acceso.

4. En Establecer el valor de etiqueta de descripción – opcional, selecciona Crear clave de acceso.
5. En Recuperar claves de acceso descarga el archivo csv y asegúrate de tener la clave de acceso y la Clave de acceso secreta, son necesarias más adelante, finaliza con Listo ( 25).

Fig. 25 Recuperar claves de acceso.

Paso 7: Configurar Amplify en ambiente de AWS Cloud9.

Como estas trabajando en un ambiente virtual de AWS Cloud 9 no requieres instalar Amplify, en el caso contrario antes de avanzar sigue los pasos de instalación en el link.

1. Ingresa al ambiente de AWS Cloud9 creado en el punto 3 del paso 1.
2. En el terminal accede a la carpeta aws-recomendador-anime/app-recomendador/:

cd aws-recomendador-anime/app-recomendador

3. Instala las siguientes librerías:

npm install -g @aws-amplify/cli

npm install aws-amplify @aws-amplify/ui-react

4. Para actualizar la configuración local con la de Amplify console ingresa el comando:

amplify pull

5. Esto va a gatillar una serie de consultas a continuación que debes responder.
   1. Initialize the project with the above configuration (Y/n): Y
   2. Con la flecha selecciona AWS access keys:
   3. accessKeyId: Ingresa el valor en el csv que descargaste en el paso anterior.
   4. secretAccessKey: Ingresa el valor en el csv que descargaste en el paso anterior.
   5. Región: con la flecha selecciona la región donde tienes tu proyecto.
   6. Which app are you working on? Selecciona el ID que corresponde en la Fig. 11.
   7. Choose your default editor: Visual Studio Code
   8. Choose the type of app that you’re building: javascript
   9. What javascript framework are you using: react
   10. Source Directory Path: presiona enter
   11. Distribution Directory Path: presiona enter
   12. Build Command: npm run-script build
   13. Start Command: npm run-script start
   14. Do you plan on modifying this backend? (Y/n)
   15. Al finalizar deberías ver algo como la 26.

Fig. 26 Configuración Amplify en la aplicación.

Al finalizar revisa el estado con amplify status (Fig. 27):

Fig. 27 Estado de Amplify.

Esta configuración permitirá a Amplify generar en el proyecto de frontend las librerías necesarias para que se comunique con el backend (Cognito), como verás en el paso siguiente.

6. Al finalizar creará todo lo necesario para integrar la autenticación en la aplicación web ( 28).

Fig. 28 Instalación autenticación de Amplify con Cognito en aplicación web.

Paso 8: Integración autenticación a la aplicación existente.

Debes modificar el código para que cada vez que ingreses a la aplicación solicite el inicio de sesión o la creación de nuevo usuario, ya lo hice por ti y lo activas ingresando al archivo aws-recomendador-anime/app-recomendador/src/index.js y modificando la línea 4 por import App from ‘./App_auth’; se debe ver como en la Fig. 29.

Fig. 29 Modificación línea 4 de index.js

En el archivo App_auth.js al que hace referencia index.js importa la librería de Amplify e inicializa el perfil que configuramos en el paso anterior , el Frontend creado en Amplify Studio y los componentes UIs de Amplify necesarios para la autenticación (Fig. 30).

Fig. 30 Importar librería y componentes UIs de Amplify para activar la autenticación.

Cada vez que se ingrese a la aplicación sin estar previamente registrado te aparecerá la ventana de iniciar sesión (Sign In) o crear una cuenta nueva (Create Account) de la Fig. 31.

Fig. 31 Ventana inicio sesión (Sign In)  o crear una cuenta nueva (Create Account).

Por ultimo realiza el despliegue de la actualización utilizando las bondades del CI/CD, con los siguientes comandos:

git add .

git commit -m "autenticacion activada"

git push origen_new main

Puedes ver como se actualiza la aplicación en la consola de AWS Amplify (Fig. 33).

Fig. 32 Implementación de aplicación web en Amplify.

Paso 9: Funcionamiento autenticación a la aplicación existente.

Por ejemplo, creando una nueva cuenta con mi correo (Fig. 33), al crear la cuenta llega un correo con el código de verificación (Fig. 34) para asegurar que el correo sea válido.

Fig. 33 Crear nuevo usuario.

Fig. 34 Correo con código de verificación.

Los usuario creados en el grupo los puedes administrar en  el menú Usuarios del Grupo de usuarios (Fig. 35), vemos que Nombre de usuario no corresponde a la dirección de correo electrónico si no que a un id único ideal para aplicaciones web como el Recomendador de Anime.

Fig. 35 Administración de Usuarios del Grupo de usuarios.

En la administración de usuarios puedes agregar y confirmar usuarios manualmente, puedes realizar búsqueda de usuarios, recuperar cuentas, entre otras acciones más que puedes conocer más a fondo en la documentación.

Pon a prueba tu aplicación.

Ahora solo queda probar la aplicación web de recomendaciones de anime personalizada con nuevos usuarios, disfruta esta nueva actualización. Navega en tu aplicación disponible desde la consola de Amplify:

1. Ingresa a tu aplicación la verás en la consola de Ampify dentro del frontend de tu aplicación https://main…amplifyapp.com
2. Crea tu usuario e ingresa.
3. Interactúa con los ítems, comparte con tus amigos y prueba las recomendaciones personalizadas.
4. J

Paso 9: Limpieza de recursos en la cuenta de AWS.

Estos pasos son opcionales, si tu intención es continuar con la construcción de la aplicación web, puedes mantener los recursos ya que los vamos a utilizar en el próximo episodio de esta serie.

De lo contrario, sigue los siguientes pasos:

1. Borrar recursos en AWS Amplify: En la consola de Amplify, ingresa a tu aplicación y en Acciones selecciona Eliminar la aplicación.
2. Borrar el repositorio en AWS CodeCommit: En la consola de CodeCommit ve Repositorios, selecciona el repositorio recomendador-anime y luego en Eliminar el repositorio.
3. Borrar el ambiente virtual de AWS Cloud9: En la consola de Cloud9 ve a Environments, selecciona el ambiente y luego
4. Borrar el grupo de usuarios de Amazon Cognito: En la consola de Amzon Cognito, ve a Grupos de usuarios, selecciona el grupo de usuario y luego

Conclusiones

Ahora ya tienes una aplicación web con autenticación de usuario y contraseña, donde los usuarios se pueden registrar o ingresar con sus credenciales para recibir la experiencia personalizada de recomendaciones de animes nuevos de la preferencia del usuario. Además, la aplicación está preparada para entrenarse con tus gustos calificando animes y así te entregue recomendaciones cada vez más relevantes.

En este episodio desbloqueaste nuevas habilidades: integrar autenticación de usuarios a una aplicación web con verificación de correo automática, de forma visual empleando Amplify Studio sin generar cientos de líneas de código porque Amplify hizo todo por ti, el único código que se tuvo que generar fue la integración a la aplicación web y como pudiste ver fueron unas pocas líneas.

Ya te estas acercando al final, solo queda un último episodio:

• Analizar el comportamiento de una aplicación web mediante un dashboard.

Te dejo estos recursos para que sigas aprendiendo de las herramientas utilizadas:

• Amplify Studio Dev Center
• Amazon Cognito Workshop
• Amplify Workshops
• Amplify Social Network App(or SNS) Workshop
• Headless mode for CI/CD – Amplify Dev Center

Acerca de la autora

Elizabeth Fuentes Leone es Developer Advocate en AWS con experiencia en Data Analytics y Machine Learning. Le encanta ayudar a los desarrolladores a aprender mientras meten las manos construyendo.