GSP186

Descripción general

En este lab, se muestra cómo agregar autenticación a tu aplicación con Identity Platform. Esta autorización identifica tu identidad y determina lo que puedes hacer. Para obtener más información, consulta 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, consulta 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.

Qué aprenderás

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 Python para integrar la autenticación de Identity Platform a una aplicación web del cliente

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs son cronometrados y no se pueden pausar. El cronómetro, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

• Acceso a un navegador de Internet estándar (se recomienda el navegador Chrome)

Nota: Usa una ventana de navegador privada o de Incógnito para ejecutar este lab. Así evitarás cualquier conflicto entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.

• Tiempo para completar el lab: Recuerda que, una vez que comienzas un lab, no puedes pausarlo.

Nota: Si ya tienes un proyecto o una cuenta personal de Google Cloud, no los uses en este lab para evitar cargos adicionales en tu cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

1. Haga clic en el botón Comenzar lab. Si debe pagar por el lab, se abrirá una ventana emergente para que seleccione su forma de pago. A la izquierda, se encuentra el panel Detalles del lab, que tiene estos elementos:

   • El botón Abrir la consola de Google Cloud
   • El tiempo restante
   • Las credenciales temporales que debe usar para el lab
   • Otra información para completar el lab, si es necesaria

2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

   El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

   Sugerencia: Ordene las pestañas en ventanas separadas, una junto a la otra.

   Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usar otra cuenta.

3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

   {{{user_0.username | "Username"}}}

   También puedes encontrar el nombre de usuario en el panel Detalles del lab.

4. Haz clic en Siguiente.

5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

   {{{user_0.password | "Password"}}}

   También puedes encontrar la contraseña en el panel Detalles del lab.

6. Haz clic en Siguiente.

   Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia Cuenta de Google podría generar cargos adicionales.

7. Haga clic para avanzar por las páginas siguientes:

   • Acepta los Términos y Condiciones.
   • No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
   • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para ver un menú con una lista de productos y servicios de Google Cloud, haz clic en el menú de navegación que se encuentra en la parte superior izquierda.

Activa Cloud Shell

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. Cloud Shell proporciona acceso de línea de comandos a tus recursos de Google Cloud.

1. Haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.

Cuando te conectes, habrás completado la autenticación, y el proyecto estará configurado con tu PROJECT_ID. El resultado contiene una línea que declara el PROJECT_ID para esta sesión:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud es la herramienta de línea de comandos de Google Cloud. Viene preinstalada en Cloud Shell y es compatible con la función de autocompletado con tabulador.

2. Puedes solicitar el nombre de la cuenta activa con este comando (opcional):

gcloud auth list

3. Haz clic en Autorizar.

4. Ahora, el resultado debería verse de la siguiente manera:

Resultado:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`

5. Puedes solicitar el ID del proyecto con este comando (opcional):

gcloud config list project

Resultado:

[core] project = <project_ID>

Resultado de ejemplo:

[core] project = qwiklabs-gcp-44776a13dea667a6 Nota: Para obtener toda la documentación de gcloud, consulta la guía con la descripción general de gcloud CLI en Google Cloud.

Inicia el editor de código de Cloud Shell

En la barra de herramientas de Cloud Shell, mueve Cloud Shell a una ventana nueva; para ello, haz clic en el ícono de abrir en una ventana nueva y, luego, en el ícono de abrir editor para abrirlo.

En la terminal de Cloud Shell, ejecuta el siguiente comando para configurar el ID del proyecto y reemplaza <YOUR-PROJECT-ID> por el ID del proyecto de tu lab:

gcloud config set project <YOUR-PROJECT-ID>

Autoriza Cloud Shell.

Tarea 1. Prepara la aplicación del caso 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 esqueleto de la aplicación desde el repositorio en GitHub.com:

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

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

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

Configura y ejecuta la aplicación del caso de éxito

1. Navega al directorio que contenga los archivos de muestra de este lab:

   cd ~/firebase/start

2. Ejecuta el siguiente comando para cambiar la región us-central por la región que tienes asignada de manera predeterminada:

   export REGION={{{ project_0.startup_script.app_region | REGION }}} sed -i "s/us-central/$REGION/g" prepare_environment.sh

3. Configura la aplicación:

   . prepare_environment.sh

   Este archivo de secuencia de comandos hace 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.
   • Crea un entorno virtualenv aislado de Python para Python 3 y lo activa.
   • Ejecuta > pip install -r requirements.txt.
   • Crea entidades en Cloud Datastore.
   • Imprime el ID del proyecto de Google Cloud.

Haz clic en Revisar mi progreso para verificar el objetivo. Configurar la aplicación del caso de éxito

4. Ejecuta la aplicación:

   python run_server.py

Inicia la app del caso de éxito

• 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, ya que necesitarás el dominio de la vista previa de Cloud Shell Web más adelante en este lab.

Tarea 2: Examina el código de la aplicación del caso 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 código de Cloud Shell

• En Cloud Shell, haz clic en Abrir editor para iniciar el editor de código.

Nota: Si es necesario, haz clic en Abrir en una ventana nueva. Puedes volver a la terminal con la opción Abrir terminal.

Revisa la aplicación cliente

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

2. Continúa con la navegación. Abre ...quiz/webapp/static/client/. Haz clic en el archivo index.html.

   Este archivo es la única página de la aplicación de página única (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.

3. Selecciona el archivo qiq-login-template.html en la carpeta ...quiz/webapp/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 eventos que ejecuta código cuando se hace clic en él.

4. Dentro de esta carpeta, selecciona el archivo qiq-login.js.

   Este archivo contiene un componente de 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, 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.

Configura Identity Platform para usar correo electrónico y contraseña

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

2. Haz clic en Habilitar Identity Platform.

   Nota: Si ves el mensaje emergente ¿Deseas 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 siguiente formato:

8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-{{{project_0.default_region | "REGION"}}}-ctgq.cloudshell.dev

8. Pega el dominio en el campo Dominio.

9. Modifica el dominio pegado para que solo el nombre de dominio aparezca en el campo Dominio.

   Debes quitar https:// y todo lo que siga al nombre de dominio, incluidas las barras diagonales. El nombre de dominio debe terminar con cloudshell.dev.

10. Haz clic en Guardar.

Nota: Si recibes un mensaje de error en el que se indica que debes volver a intentarlo más tarde, es probable que hayas enviado algo más que el nombre de dominio. Debes hacer clic en Cancelar en el cuadro de diálogo y, luego, en Agregar dominio para volver a intentarlo.

11. En la ventana del proveedor de identidad nuevo, 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.

Haz clic en Revisar mi progreso para verificar el objetivo. Configurar la autenticación de Identity Platform

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, copia el fragmento de código de Identity Platform.

   

4. Haz clic en Cerrar.

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

6. Pega el fragmento de código 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.

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, haz clic en Take Test.

   

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

   Nota: Las páginas del cuestionario estarán en blanco, porque debes acceder con una cuenta para poder realizar una prueba.

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

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

   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 la información de 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 Logout.

9. Haz clic en el vínculo Register.

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

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

11. Haz clic en Register.

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

    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.

Finaliza la Quest

Este lab de autoaprendizaje forma parte de la Quest Application Development - Python. Una Quest es una serie de labs relacionados que forman una ruta de aprendizaje. Si completas esta Quest, obtendrás una insignia como reconocimiento por tu logro. Puedes hacer públicas tus insignias y agregar vínculos a ellas en tu currículum en línea o en tus cuentas de redes sociales. Inscríbete en cualquier Quest que contenga este lab y obtén un crédito inmediato de finalización. Consulta el catálogo de Google Cloud Skills Boost para ver todas las Quests disponibles.

Próximos pasos y más información

• Para conocer las funciones de Google Cloud con los que se puede usar Firebase, consulta la documentación de Google Cloud's operations suite.
• Para obtener más información acerca de Deployment Manager, consulta Firebase y Google Cloud.

Última actualización del manual: 23 de octubre de 2023

Prueba más reciente del lab: 23 de octubre de 2023

Copyright 2024 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.