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 de forma directa en la consola de Google Cloud, haz clic en Guiarme:

Guiarme


Antes de comenzar

  1. Accede a tu cuenta de Google Cloud. 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.
  2. En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.

    Ir al selector de proyectos

  3. Comprueba que la facturación esté habilitada en tu proyecto.

    Descubre cómo puedes habilitar la facturación

  4. Asegúrate de tener los siguientes roles en el proyecto: Identity Platform Admin, Service Usage Admin

    Verifica los roles

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

      Ir a IAM
    2. Selecciona el proyecto.
    3. En la columna Principal, busca la fila que tiene tu dirección de correo electrónico.

      Si tu dirección de correo electrónico no está en esa columna, no tienes ningún rol.

    4. En la columna Función de la fila con la dirección de correo electrónico, verifica si la lista de roles incluye los roles necesarios.

    Otorga los roles

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

      Ir a IAM
    2. Selecciona el proyecto.
    3. Haz clic en Grant access.
    4. En el campo Principales nuevas, ingresa tu dirección de correo electrónico.
    5. En la lista Seleccionar un rol, elige un rol.
    6. Para otorgar funciones adicionales, haz clic en Agregar otro rol y agrega cada rol adicional.
    7. Haz clic en Guardar.
  5. En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.

    Ir al selector de proyectos

  6. Comprueba que la facturación esté habilitada en tu proyecto.

    Descubre cómo puedes habilitar la facturación

  7. Asegúrate de tener los siguientes roles en el proyecto: Identity Platform Admin, Service Usage Admin

    Verifica los roles

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

      Ir a IAM
    2. Selecciona el proyecto.
    3. En la columna Principal, busca la fila que tiene tu dirección de correo electrónico.

      Si tu dirección de correo electrónico no está en esa columna, no tienes ningún rol.

    4. En la columna Función de la fila con la dirección de correo electrónico, verifica si la lista de roles incluye los roles necesarios.

    Otorga los roles

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

      Ir a IAM
    2. Selecciona el proyecto.
    3. Haz clic en Grant access.
    4. En el campo Principales nuevas, ingresa tu dirección de correo electrónico.
    5. En la lista Seleccionar un rol, elige un rol.
    6. Para otorgar funciones adicionales, haz clic en Agregar otro rol y agrega cada rol adicional.
    7. Haz clic en Guardar.

Habilitar Identity Platform

  1. En la consola de Google Cloud, ve a la página de Identity Platform en 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.

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

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

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

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

Crea un usuario

  1. En la consola de Google Cloud, 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 al usuario, haz clic en Agregar. El usuario nuevo aparece en la página Usuarios.

Realiza el acceso del usuario

Los pasos para que el usuario acceda varían según la versión del SDK que use tu app. Asegúrate de seguir los pasos correctos para tu aplicación.

Versión 9 del SDK (modular)

Instala el SDK e inicializa Firebase

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

Este flujo de trabajo usa npm y requiere agrupadores de módulos o herramientas del framework de JavaScript porque la versión 9 del SDK está optimizado para funcionar con agrupadores de módulos para 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 de la versión 9, sigue estos pasos:

  1. Desde el directorio del proyecto, instala Firebase usando 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: El apiKey de tu proyecto de Firebase
    • AUTH_DOMAIN: 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.

Accede a Identity Platform en tu JavaScript

Ahora que inicializaste el SDK de Firebase, puedes usarlo en cualquier lugar de la app. Por ejemplo, esta es una app que intenta acceder con 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: El apiKey de tu proyecto de Firebase
  • AUTH_DOMAIN: El authDomain de tu proyecto de Firebase
  • EMAIL_ID: La dirección de correo electrónico del usuario que creaste antes en esta guía.
  • PASSWORD: Es la contraseña de usuario que creaste antes en esta guía.

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

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 a través de 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 JavaScript a tu página

  1. Crea un archivo nuevo llamado index.html.

  2. Agrega dos contenedores de HTML básicos y, luego, importa el paquete js.

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

Versión 8 del SDK (heredada)

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 consola de Google Cloud, 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 que el usuario acceda, 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: El correo electrónico del usuario que creaste antes
    • PASSWORD: Es la contraseña del usuario que creaste antes.
  2. Abre index.html en tu 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 de los usuarios. Varios intentos de acceso rápidos y fallidos bloquean temporalmente al usuario de su cuenta.

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 cuenta de Google Cloud por los recursos que se usaron en esta página.

Borra el proveedor y el usuario

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

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

    Ir a Proveedores de identidad

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

  3. En la consola de Google Cloud, 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, haz lo siguiente:

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

    Ir a Administrar recursos

  2. En la lista de proyectos, elige el proyecto que 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: