DEV Community

Cover image for Agrega autenticaci贸n a tu aplicaci贸n web.
Elizabeth Fuentes L for AWS

Posted on • Updated on

 

Agrega autenticaci贸n a tu aplicaci贸n web.

馃嚮馃嚜馃嚚馃嚤 Dev.to Linkedin GitHub Twitter Instagram Youtube

github: https://github.com/aws-samples/aws-recomendador-anime/tree/main/recomendador-de-anime


Recomendaciones personalizadas de anime


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:

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 馃懛馃徎: Agrega autenticaci贸n a tu 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 recomendaciones personalizadas 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 (Fig. 1)

Image description

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

  1. En este paso desplegar谩s la aplicaci贸n backend para eso selecciona Backend enviroments y luego presiona Get Started (Fig. 2)

Image description

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

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

Image description

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 (Fig. 4).

Image description

Fig. 4 Lanzar el Studio de Amplify.

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

Image description

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 (Fig. 6).

Image description

Fig. 6 Men煤 Authentication.

  1. 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 (Fig. 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.

Image description

Fig. 7 Configuraci贸n del acceso de usuario.

  1. 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 (Fig. 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).

Image description

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

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

Image description

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

  1. 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 (Fig. 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.

Image description

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 (Fig. 11).

Image description

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

  1. En este nuevo men煤 encontraras a los usuarios autenticados en la aplicaci贸n web, ahora esta vac铆o (Fig. 12).

Image description

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 (Fig. 13).

Fig. 13 Acciones -> Ver la configuraci贸n de la aplicaci贸n.

Fig. 13 Acciones -> Ver la configuraci贸n de la aplicaci贸n.

  1. En Ramificaciones en Acciones selecciona Desconectar ramificaci贸n (Fig. 14) y confirma Desconectar en la ventana emergente.

Image description

Fig. 14 Desconectar la ramificaci贸n.

  1. Regresa al men煤 anterior y ahora te aparecer谩 Alojar una aplicaci贸n web (Fig. 15), selecciona AWS CodeCommit y luego Conectar ramificaci贸n.

Image description

Fig. 15 Agregar una aplicaci贸n web.

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

Image description

Fig. 16 Agregar nueva ramificaci贸n.

  1. 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 (Fig. 17).

Image description

Fig. 17 Configuraci贸n de compilaci贸n.

  1. Para crear el nuevo rol sigue los pasos, luego actualiza la vista de Fig. 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 鈥搒imple, 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.

Image description

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

  1. Finaliza con Guardar e implementar.
  2. Cuando finalices la aplicaci贸n entrar谩 en modo En ejecuci贸n, esto puede tardar unos minutos (Fig. 19).

Image description

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 (Fig. 20).

Image description

Fig. 20 Agregar usuarios en consola de AWS IAM.

  1. En Detalles del usuario -> Nombre de usuario ingresa recomendador-anime-amplify y selecciona Siguiente (Fig. 21).

Image description

Fig. 21 Detalle de usuario IAM.

  1. En Establecer permisos -> Opciones de permisos **selecciona Adjuntar pol铆ticas directamente, en **Pol铆ticas de permisos busca AdministratorAccess-Amplify, selecci贸nala y luego Siguiente (Fig. 22).

Image description

Fig. 22 Establecer permisos para usuario IAM.

  1. 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 (Fig. 23)

Image description

Fig. 23 Usuario IAM creado.

  1. En Credenciales de seguridad -> Claves de acceso selecciona Crear clave de acceso.
  2. 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 (Fig. 24).

Image description

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

  1. En Establecer el valor de etiqueta de descripci贸n 鈥 opcional, selecciona Crear clave de acceso.
  2. 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 (Fig. 25).

Image description

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

  1. Instala las siguientes librer铆as:

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

  1. Para actualizar la configuraci贸n local con la de Amplify console ingresa el comando:

amplify pull

  1. Esto va a gatillar una serie de consultas a continuaci贸n que debes responder.
  • a. Initialize the project with the above configuration (Y/n): Y
  • b. Con la flecha selecciona AWS access keys:
  • c. accessKeyId: Ingresa el valor en el csv que descargaste en el paso anterior.
  • d. secretAccessKey: Ingresa el valor en el csv que descargaste en el paso anterior.
  • e. Regi贸n: con la flecha selecciona la regi贸n donde tienes tu proyecto.
  • f. Which app are you working on? Selecciona el ID que corresponde en la Fig. 11.
  • g. Choose your default editor: Visual Studio Code
  • h. Choose the type of app that you're building: javascript
  • i. What javascript framework are you using: react
  • j. Source Directory Path: presiona enter
  • k. Distribution Directory Path: presiona enter
  • l. Build Command: npm run-script build
  • m. Start Command: npm run-script start
  • n. Do you plan on modifying this backend? (Y/n)
  • o. Al finalizar deber铆as ver algo como la Fig. 26.

Image description

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

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

Image description

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.

  1. Al finalizar crear谩 todo lo necesario para integrar la autenticaci贸n en la aplicaci贸n web (Fig. 28).

Image description

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.

Image description

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).

Image description

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.

Image description

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).

Image description

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.

Image description

Fig. 33 Crear nuevo usuario.

Image description

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.

Image description

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. :)

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 Delete.
  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 Eliminar.

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:


隆Gracias!

Te dejo mis redes:
馃嚮馃嚜馃嚚馃嚤 Dev.to Linkedin GitHub Twitter Instagram Youtube

Top comments (0)