Descripción general

En este lab, se muestra cómo agregar autenticación a tu app usando Identity Platform. Esta autorización identifica tu identidad y determina lo que puedes hacer. Para obtener más información, revisa la documentación Descripción general de la autenticación.

Identity Platform ofrece un servicio de autenticación directo y personalizable para el registro y acceso de los usuarios. Gracias a diversas opciones de SDKs para apps (Android, iOS y Web) y de administración (Node.js, Java, Python y muchos más), facilita las actividades administrativas y de desarrollo. Para obtener más información sobre Identity Platform, revisa el sitio web de Identity Platform.

En este lab, utilizarás una app en línea llamada Quiz. Agregarás la autenticación de Identity Platform y, luego, la configurarás para usar una credencial simple de dirección de correo electrónico y contraseña. Por último, te asegurarás de que los usuarios se registren y accedan antes de hacer un cuestionario.

Objetivos

En este lab, realizarás las siguientes tareas:

• Agregar la configuración de Identity Platform a una aplicación web del cliente
• Escribir código de Java para integrar la autenticación de Identity Platform a una aplicación web del cliente

Configuración y requisitos

En cada lab, recibirá un proyecto de Google Cloud y un conjunto de recursos nuevos por tiempo limitado y sin costo adicional.

1. Asegúrese de acceder a Qwiklabs desde una ventana de incógnito.

2. Tenga en cuenta el tiempo de acceso al lab (por ejemplo, ) y asegúrese de poder finalizarlo en el plazo asignado.

3. Cuando esté listo, haga clic en .

4. Tome nota de sus credenciales del lab. Las usará para acceder a Google Cloud Console.

5. Haga clic en Abrir Google Console.

6. Haga clic en Usar otra cuenta, copie las credenciales para este lab y péguelas en el mensaje emergente que aparece.

7. Acepte las condiciones y omita la página de recursos de recuperación.

Activa Google Cloud Shell

Google Cloud Shell es una máquina virtual que cuenta con herramientas para desarrolladores. Ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud.

Google Cloud Shell proporciona acceso de línea de comandos a tus recursos de Google Cloud.

1. En la consola de Cloud, en la barra de herramientas superior derecha, haz clic en el botón Abrir Cloud Shell.

   

2. Haz clic en Continuar.

El aprovisionamiento y la conexión al entorno demorarán unos minutos. Cuando te conectes, habrás completado la autenticación, y el proyecto estará configurado con tu PROJECT_ID. Por ejemplo:

gcloud es la herramienta de línea de comandos de Google Cloud. Viene preinstalada en Cloud Shell y es compatible con el completado de línea de comando.

• Puedes solicitar el nombre de la cuenta activa con este comando:

gcloud auth list

Resultado:

Credentialed accounts: - @.com (active)

Resultado de ejemplo:

Credentialed accounts: - google1623327_student@qwiklabs.net

• Puedes solicitar el ID del proyecto con este comando:

gcloud config list project

Resultado:

[core] project =

Resultado de ejemplo:

[core] project = qwiklabs-gcp-44776a13dea667a6 Nota: La documentación completa de gcloud está disponible en la guía de descripción general de gcloud CLI .

Tarea 1: Prepara la aplicación de casos de éxito

En esta tarea, clonarás, configurarás y ejecutarás la aplicación Quiz.

Clona el código fuente en Cloud Shell

1. Clona el repositorio de este lab:

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. Crea un vínculo simbólico al directorio de trabajo:

ln -s ~/training-data-analyst/courses/developingapps/v1.3/java/firebase ~/firebase

Configura y ejecuta la aplicación de casos de éxito

1. Cambia al directorio que contiene los archivos de muestra de este lab:

   cd ~/firebase/start

2. Configura las dependencias de la aplicación:

   . prepare_environment.sh

   Este archivo de secuencia de comandos realiza lo siguiente:

   • Crea una aplicación de App Engine.
   • Crea un bucket de Cloud Storage llamado gs://[Project-ID]-media.
   • Exporta dos variables de entorno: GCLOUD_PROJECT y GCLOUD_BUCKET.
   • Ejecuta mvn clean install.
   • Crea entidades en Cloud Datastore.
   • Imprime el ID del proyecto de Google Cloud Platform.

   Una vez configuradas las dependencias de la aplicación, verás el resultado que se muestra a continuación:

   [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 11.775 s [INFO] Finished at: 2021-12-06T15:39:11Z [INFO] ------------------------------------------------------------------------

3. Ejecuta la aplicación:

   mvn spring-boot:run

   Cuando se inicia la aplicación, se ve la última línea de salida, similar al ejemplo que se muestra a continuación:

   15:40:08.312 [restartedMain] INFO c.g.training.appdev.QuizApplication - Started QuizApplication in 7.767 seconds (JVM running for 9.86)

Inicia la aplicación Quiz

• En Cloud Shell, haz clic en Vista previa en la Web () > Vista previa en el puerto 8080 para obtener una vista previa de la aplicación Quiz.

Deja esta ventana abierta por ahora, ya que necesitarás el dominio de la vista previa de Cloud Shell Web (que tiene el formato 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev) más adelante en este lab.

Tarea 2: Examina el código de la aplicación de casos de éxito

En esta tarea, examinarás el código de la aplicación del caso de éxito. Puedes usar los editores de shell que están instalados en Cloud Shell, como nano o vim, o bien el editor de código de Cloud Shell.

En este lab, se usa el editor de código de Cloud Shell para revisar el código de la aplicación Quiz.

Inicia el editor de texto de Cloud Shell

1. En Cloud Shell, haz clic en el ícono Abrir editor en la cinta superior. Haz clic en Abrir en una ventana nueva si se te solicita.

   El editor de código se inicia en una nueva pestaña del navegador, junto con Cloud Shell.

2. Usa el panel del navegador de archivos ubicado en la parte izquierda del editor para navegar hasta la carpeta firebase/start.

3. En la carpeta firebase, presta atención a la carpeta end. La carpeta end contiene los mismos archivos que la carpeta start, pero cada archivo de la carpeta end contiene el código completo necesario para realizar este lab.

Revisa la aplicación cliente

1. Selecciona el archivo index.html en la carpeta .../src/main/resources/static/client. No lo confundas con el archivo index.html de la carpeta static.

   Este archivo es la única página de la SPA de AngularJS. Contiene las etiquetas <script></script> para las bibliotecas y el código de la aplicación, y las marcas donde la SPA renderizará un resultado dinámico.

2. Selecciona el archivo qiq-login-template.html en la carpeta .../src/main/resources/static/client/app/auth/.

   Este archivo contiene la plantilla de AngularJS para el componente de acceso.

   Observa que contiene un par de cuadros de texto y un botón. El botón tiene un controlador de evento que, cuando se le hace clic, ejecuta código.

3. Selecciona el archivo qiq-login.js.

   Este archivo contiene un componente AngularJS. Permite al usuario acceder a la aplicación o navegar a una página de registro.

Tarea 3: Configura la autenticación de Identity Platform

En esta tarea, confirmarás que la facturación esté habilitada para tu proyecto de la nube. A continuación, configurarás Identity Platform para que un usuario acceda con un correo electrónico y una contraseña. Luego, puedes crear un usuario y usarlo para acceder a la aplicación Quiz.

Confirma que la facturación está habilitada

1. En la consola de Google Cloud, ve a Menú de navegación () y haz clic en Facturación.

2. Verifica que haya una cuenta de facturación vinculada al proyecto. Deberías ver un mensaje que indique que la cuenta de facturación “Qwiklabs Production gcpd xx” está vinculada al proyecto.

Configura Identity Platform para los correos electrónicos y las contraseñas

1. En la consola de Google Cloud, ve a Menú de navegación () y haz clic en Identity Platform.

2. Haz clic en Habilitar Identity Platform.

   Nota: Si ves el mensaje emergente ¿Quieres abandonar el sitio?, haz clic en Salir.

   La página de Identity Platform aparece en la consola de Cloud.

   

3. Haz clic en Agregar un proveedor.

4. En la ventana del Método de acceso, para Selecciona un proveedor, selecciona Correo electrónico y contraseña.

5. Haz clic en Habilitado.

6. En el panel Dominios autorizados, haz clic en Agregar dominio.

7. Vuelve a la aplicación en ejecución Quiz y copia el dominio (que tiene el formato 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev).

8. Haz clic en Guardar.

9. En la nueva ventana del proveedor de identidad, haz clic en Guardar.

   Es posible que necesites desplazarte hacia abajo para ver el botón Guardar.

Agrega un usuario

1. En el panel de Identity Platform, haz clic en Usuarios.

2. Haz clic en Agregar usuario.

3. En el cuadro de diálogo Agregar usuario, especifica lo siguiente:

   Correo electrónico	user1@example.com
   Contraseña	abc123!

4. Haz clic en Agregar.

Tarea 4: Integra una aplicación web del cliente usando Identity Platform

En esta tarea, aplicarás la configuración de Identity Platform a la aplicación web del cliente.

1. En el panel de navegación, haz clic en Proveedores.

2. Haz clic en Detalles de configuración de la aplicación.

3. En el cuadro de diálogo Configurar tu aplicación, pega la marca de Identity Platform.

   

4. Haz clic en Cerrar.

5. En el editor de código de Cloud Shell, abre el archivo index.html en .../src/main/resources/static/client/.

6. Pega la marca de configuración justo antes de las otras etiquetas <script></script> en la parte inferior de la página.

7. Guarda el archivo index.html.

8. En Cloud Shell, presiona Ctrl + C para detener la aplicación y, luego, vuelve a ingresar el comando que se muestra a continuación para reiniciarla:

mvn spring-boot:run

Tarea 5: Ejecuta la aplicación

En esta tarea, verificarás si puedes acceder a la aplicación Quiz con las credenciales que creaste en Identity Platform en un paso anterior. Luego, registrarás a un usuario nuevo en la aplicación Quiz y verificarás que las credenciales se agreguen a Identity Platform.

1. Regresa a la aplicación Quiz y actualiza tu navegador.

2. En la barra de navegación, haga clic en Take Test.

3. En la barra de navegación, haz clic en GCP, Personas o Lugares.

   Nota: No deberías poder realizar ninguna prueba si no accediste a la aplicación.

4. En la barra de navegación, ingresa las siguientes credenciales no válidas:

   Correo electrónico	user2@example.com
   Contraseña	abcd1234$

5. Haz clic en Acceder.

   Nota: El acceso no funcionará porque el usuario no está registrado.

6. Ingresa las siguientes credenciales que creaste en una tarea anterior:

   Correo electrónico	user1@example.com
   Contraseña	abc123!

7. Haz clic en Acceder.

   La dirección de correo electrónico del usuario debería mostrarse en la barra de navegación y se presentará la primera pregunta.

   Nota: Si el acceso no funciona, es posible que la contraseña no se haya configurado correctamente. Regresa a la página Usuarios en Identity Platform y borra user1@example.com. Luego, agrega user1@example.com con la contraseña correcta.

8. En la barra de navegación, haz clic en Salir.

9. Haz clic en el vínculo Registrarse.

10. En el nuevo formulario, ingresa las siguientes credenciales:

    Correo electrónico	user2@example.com
    Contraseña	abcd1234$

11. Haz clic en Registrar.

    Es necesaria una contraseña compleja. Si ingresaste una contraseña aceptable, deberías acceder y, luego, se te debería redireccionar a la prueba de GCP.

    Podrás contestar preguntas y enviar respuestas.

12. En la barra de navegación, haz clic en Salir.

    Nota: Saldrás y se te redireccionará a la página principal de Quiz.

13. En la consola de Google Cloud, ve al panel de navegación de Identity Platform y haz clic en Usuarios.

    Nota: Deberías ver que se agregó a user2@example.com como usuario.

¡Felicitaciones!

En este lab, aprendiste a usar Identity Platform para permitir el registro de correos electrónicos y contraseñas para tu aplicación.

Finalice su lab

Cuando haya completado el lab, haga clic en Finalizar lab. Google Cloud Skills Boost quitará los recursos que usó y limpiará la cuenta.

Tendrá la oportunidad de calificar su experiencia en el lab. Seleccione la cantidad de estrellas que corresponda, ingrese un comentario y haga clic en Enviar.

La cantidad de estrellas indica lo siguiente:

• 1 estrella = Muy insatisfecho
• 2 estrellas = Insatisfecho
• 3 estrellas = Neutral
• 4 estrellas = Satisfecho
• 5 estrellas = Muy satisfecho

Puede cerrar el cuadro de diálogo si no desea proporcionar comentarios.

Para enviar comentarios, sugerencias o correcciones, use la pestaña Asistencia.

Copyright 2020 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.