Descripción general

En este lab, se muestra cómo agregar autenticación a tu app con Identity Platform. Esta autorización identifica tu identidad y determina lo que puedes hacer. Para obtener más información, consulta la documentación sobre la Autenticación en Google.

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. Consulta la página de Identity Platform para obtener más información sobre la plataforma.

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 JavaScript 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. Para clonar el repositorio para la clase, ejecuta el siguiente comando:

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

2. Crea un vínculo simbólico a los archivos de trabajo:

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

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

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

cd ~/firebase/start

2. Para configurar la aplicación, ejecuta el siguiente comando:

. prepare_environment.sh Nota: 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.
• Ejecuta npm install.
• Crea entidades en Cloud Datastore.
• Imprime el ID del proyecto de Google Cloud.

3. Para ejecutar la aplicación, utiliza el siguiente comando:

npm start

Inicia la app de casos 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 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 sección, usarás el editor de texto de Cloud Shell para revisar el código de la aplicación de casos de éxito.

Inicia el editor 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 en Abrir terminal.

Revisa la aplicación cliente

1. Selecciona el archivo index.html en la carpeta firebase/start/server/public/client/.

Nota: Este archivo es la única página de la SPA de AngularJS. Contiene las etiquetas <script></script> para las bibliotecas de las aplicaciones y el código, además de las marcas con las que la SPA procesará un resultado dinámico.

2. Selecciona el archivo qiq-login-template.html en la carpeta firebase/start/server/public/client/app/auth/.

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

3. Selecciona el archivo qiq-login.js.

Nota: 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, 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

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

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

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

Tarea 4. Integra una aplicación web del cliente mediante 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. Regresa al editor de código de Cloud Shell y, luego, abre firebase/start/server/public/client/index.html.

6. Pega la marca de la secuencia de comandos de configuración de Identity Manager que copiaste en las líneas en blanco justo antes de la serie de líneas <script></script> en la parte inferior del archivo.

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

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

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.