Haz que un usuario acceda con un correo electrónico mediante Identity Platform

Haz que un usuario acceda con un correo electrónico mediante Identity Platform

Aprende a usar Identity Platform para que un usuario acceda con un correo electrónico y una contraseña.

---

Para seguir la guía paso a paso sobre esta tarea directamente en la Google Cloud consola, haz clic en Guiarme:

Guiarme

---

Antes de comenzar

Accede a tu Google Cloud cuenta de. Si eres nuevo en Google Cloud, crea una cuenta para evaluar el rendimiento de nuestros productos en situaciones reales. Los clientes nuevos también obtienen $300 en créditos gratuitos para ejecutar, probar y, además, implementar cargas de trabajo.
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.
Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.
Go to project selector
Verify that billing is enabled for your Google Cloud project.
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.
Grant the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

Check for the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.

Grant the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

Habilitar Identity Platform

1. En la Google Cloud consola, ve a la página Identity Platform en el Cloud Marketplace.

   Ir a Identity Platform

2. Haz clic en Habilitar Identity Platform.

Configura un acceso con correo electrónico

1. Ve a la página Proveedores de identidad.

   Ir a Proveedores de identidad

2. En la página Proveedores de identidad, haz clic en Agregar un proveedor.

3. En la lista Seleccionar un proveedor, selecciona Correo electrónico/Contraseña.

4. Haz clic en el botón de activación Habilitado para activarlo.

5. Para guardar la configuración del proveedor, haz clic en Guardar.

Crea un usuario

1. En la Google Cloud consola, ve a la página Usuarios.

   Ir a Usuarios

2. Haz clic en Agregar usuario.

3. En el campo Correo electrónico, ingresa un correo electrónico y una contraseña. Anota ambos valores, ya que los necesitarás en un paso posterior.

4. Para agregar el usuario, haz clic en Agregar. El usuario nuevo aparece en la página Usuarios.

Realiza el acceso del usuario

Los pasos para realizar el acceso del usuario varían según la versión del SDK que use tu app.

Asegúrate de seguir los pasos correctos para tu aplicación.

Nota: Se recomienda usar la versión 9 del SDK, en especial para las apps de producción. Si necesitas compatibilidad con otras opciones de administración de SDK, como window.firebase, consulta Actualiza de la versión 8 al SDK web modular o Formas alternativas de agregar Firebase.

SDK v9 (modular)

Instala el SDK e inicializa Firebase

La versión 9 del SDK de Firebase JS usa un módulo de JavaScript formato.

Este flujo de trabajo usa npm y requiere agrupadores de módulos o herramientas del framework de JavaScript porque la v9 del SDK está optimizada para funcionar con agrupadores de módulos a fin de eliminar el código que no se usa (eliminación de código no utilizado) y reducir el tamaño del SDK.

Para usar el SDK v9, sigue estos pasos:

1. Desde el directorio del proyecto, instala Firebase con npm:

   npm install firebase

2. Inicializa Firebase en tu app y crea un objeto de app de Firebase:

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   Reemplaza lo siguiente:

   • API_KEY: Es la apiKey de tu proyecto de Firebase.

     Importante: Evita usar varias claves de API en tu proyecto de Firebase si las restricciones de la aplicación se establecen en None o Websites. El uso de varias claves con estas restricciones específicas puede generar ambigüedad en la forma en que Firebase selecciona una clave, lo que podría causar un comportamiento inesperado o interrumpir tus flujos de trabajo orientados al usuario.

   • AUTH_DOMAIN: Es el authDomain de tu proyecto de Firebase.

   Puedes encontrar estos valores en la configuración del proyecto de Firebase de tu app.

   Una app de Firebase es un objeto similar a un contenedor que almacena una configuración común y comparte la autenticación entre los servicios de Firebase. Después de inicializar un objeto de la app de Firebase en tu código, puedes agregar y comenzar a usar los servicios de Firebase.

   Si usas ESM y quieres utilizar los módulos de navegador, reemplaza todas las líneas import con el siguiente patrón:
   import { } from 'https://www.gstatic.com/firebasejs/12.11.0/firebase-SERVICE.js',
   en el que SERVICE es un nombre de SDK como firebase-firestore.

   El uso de módulos de navegador es una forma rápida de comenzar, pero recomendamos que utilices un agrupador de módulos para producción.

Accede a Identity Platform en tu JavaScript

Ahora que inicializaste el SDK de Firebase, puedes usarlo en cualquier lugar de tu app. Por ejemplo, aquí hay una app que intenta acceder a un usuario codificado y mostrar el resultado en una página web.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Reemplaza lo siguiente:

• API_KEY: Es la apiKey de tu proyecto de Firebase.
• AUTH_DOMAIN: Es el authDomain de tu proyecto de Firebase.
• EMAIL_ID: Es la dirección de correo electrónico del usuario que creaste anteriormente en esta guía.
• PASSWORD: Es la contraseña del usuario que creaste anteriormente en esta guía.

Usa un agrupador de módulos para reducir el tamaño

Nota: Puedes omitir este paso si usas una herramienta de la CLI del framework de JavaScript como la CLI de Angular, Next.js, la CLI de Vue, o Create React App. Consulta nuestra guía sobre la agrupación de módulos para obtener más información.

El SDK web de Firebase está diseñado para funcionar con agrupadores de módulos a fin de quitar cualquier código que no se use (eliminación de código no utilizado). Te recomendamos usar este enfoque para las apps de producción. Las herramientas, como la CLI de Angular, Next.js, la CLI de Vue, o Create React App controlan automáticamente la agrupación de módulos para bibliotecas instaladas mediante npm y que se importan a tu base de código.

Por ejemplo, puedes usar Webpack para generar una carpeta dist que contenga el paquete de aplicación y el código de dependencia. Consulta Usa agrupadores de módulos con Firebase para obtener más información.

Importa tu JavaScript a tu página

1. Crea un archivo nuevo llamado index.html.

2. Agrega dos contenedores HTML básicos y, luego, importa el archivo js agrupado.

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. Inicia index.html en tu navegador web. Aparecerá un mensaje de bienvenida en el que se mostrará el correo electrónico de tu usuario.

SDK v8 (heredado)

Crea una página web

1. En tu máquina local, crea un archivo nuevo llamado index.html.

2. En el archivo HTML, agrega dos contenedores HTML:

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

Inicializa el SDK cliente de Identity Platform con tu clave de API

1. En la Google Cloud consola, ve a la página Proveedores de identidad.

   Ir a Proveedores de identidad

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

3. Copia el código de inicialización en index.html.

Realiza el acceso del usuario

1. Para realizar el acceso del usuario, copia el siguiente código en index.html:

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   Este código llama a signInWithEmailAndPassword() y, luego, procesa el resultado con la devolución de llamada onAuthStateChanged().

   Reemplaza lo siguiente:

   • EMAIL_ID: Es el correo electrónico del usuario que creaste anteriormente.
   • PASSWORD: Es la contraseña del usuario que creaste anteriormente.

2. Abre index.html en el navegador web Aparecerá un mensaje de bienvenida en el que se mostrará el correo electrónico de tu usuario.

Hay un límite de intentos de acceso fallidos del usuario. Si se realizan varios intentos de acceso rápidos y no exitosos, se bloqueará temporalmente la cuenta del usuario.

Para obtener más información sobre otros límites de Identity Platform, consulta Cuotas y límites.

Limpia

Sigue estos pasos para evitar que se apliquen cargos a tu Google Cloud cuenta de por los recursos que usaste en esta página.

Borra el proveedor y el usuario

Si usaste un proyecto de existente Google Cloud , borra el proveedor y el usuario que creaste para evitar que se generen cargos en tu cuenta:

1. En la Google Cloud consola, ve a la página Proveedores de identidad.

   Ir a Proveedores de identidad

2. Para borrar el proveedor, haz clic en Borrar junto al nombre del proveedor. Para confirmar la acción, haz clic en Borrar.

3. En la Google Cloud consola, ve a la página Usuarios.

   Ir a Usuarios

4. Para borrar el usuario que creaste, haz clic en Borrar junto al nombre del usuario. Para confirmar la acción, haz clic en Borrar.

Borra el proyecto

La manera más fácil de eliminar la facturación es borrar el proyecto que creaste para el instructivo.

Para borrar el proyecto, sigue estos pasos:

Precaución: Borrar un proyecto tiene estas consecuencias:

• Se borra todo su contenido. Si usaste un proyecto existente para las tareas de este documento, cuando lo borres, también se borrará cualquier otro trabajo que hayas realizado en el proyecto.
• Se pierden los IDs personalizados de los proyectos. Cuando creaste este proyecto, es posible que hayas creado un ID personalizado del proyecto que desees utilizar en el futuro. Para conservar las URLs que usan el ID del proyecto, como una URL appspot.com, borra los recursos seleccionados dentro del proyecto, en lugar de todo el proyecto.

Si planeas explorar varios instructivos, arquitecturas o guías de inicio rápido, reutilizar proyectos puede ser útil para no exceder los límites de cuota de los proyectos.

1. En la Google Cloud consola, ve a la página Administrar recursos.

   Ir a Administrar recursos

2. En la lista de proyectos, elige el proyecto que tú quieres borrar y haz clic en Borrar.
3. En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrar el proyecto.

¿Qué sigue?

En una aplicación real, los usuarios se registrarían mediante una página de registro dedicada y accederían mediante sus correos electrónicos y contraseñas. Identity Platform ofrece una IU de autenticación compilada de forma previa que puedes usar para estas páginas. O bien, puedes compilar una propia. Se recomienda admitir métodos de acceso adicionales, como el uso de proveedores de redes sociales (como Facebook o Google), números de teléfono, OIDC o SAML.

Obtén más información sobre los siguientes temas:

• Haz que los usuarios accedan con JavaScript, Android, iOS, C++ o Unity.

• Permite que los usuarios accedan con OIDC o SAML.

• Migra usuarios de tu aplicación existente a Identity Platform.