Iniciar sesión con un correo electrónico mediante Identity Platform

Iniciar sesión con un correo electrónico mediante Identity Platform

Consulta cómo usar Identity Platform para iniciar sesión con una dirección de correo y una contraseña.

---

Para seguir las instrucciones paso a paso de esta tarea directamente en la Google Cloud consola, haga clic en Ayúdame:

Guíame

---

Antes de empezar

Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
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 (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.

   Ir a IAM
2. Selecciona el proyecto.
3. Haz clic en Conceder acceso.

4. En el campo Nuevos principales, introduce tu identificador de usuario. Normalmente, se trata de la dirección de correo de una cuenta de Google.

5. En la lista Selecciona un rol, elige un rol.
6. Para conceder más roles, haz clic en Añadir otro rol y añade cada rol adicional.
7. Haz clic en Guardar.

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

   Ir a IAM
2. Selecciona el proyecto.
3. Haz clic en Conceder acceso.

4. En el campo Nuevos principales, introduce tu identificador de usuario. Normalmente, se trata de la dirección de correo de una cuenta de Google.

5. En la lista Selecciona un rol, elige un rol.
6. Para conceder más roles, haz clic en Añadir otro rol y añade cada rol adicional.
7. Haz clic en Guardar.

Habilitar Identity Platform

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

   Ir a Identity Platform

2. Haz clic en Habilitar Identity Platform.

Configurar un inicio de sesión con correo electrónico

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

   Ir a Proveedores de identidades

2. En la página Proveedores de identidades, haz clic en Añadir un proveedor.

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

4. Activa el interruptor Habilitado.

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

Crear un usuario

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

   Ve a Usuarios

2. Haz clic en Añadir usuario.

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

4. Para añadir al usuario, haz clic en Añadir. El nuevo usuario aparece en la página Usuarios.

Iniciar la sesión del usuario

Los pasos para iniciar la sesión del usuario varían en función de la versión del SDK que utilice tu aplicación. Asegúrate de seguir los pasos correctos para tu aplicación.

Nota: Es muy recomendable usar el SDK v9, sobre todo en las aplicaciones de producción. Si necesita ayuda con otras opciones de gestión del SDK, como window.firebase, consulte Actualizar de la versión 8 al SDK web modular o Formas alternativas de añadir Firebase.

SDK v9 (modular)

Instalar el SDK e inicializar Firebase

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

Este flujo de trabajo usa npm y requiere herramientas de creación de bundles de módulos o frameworks de JavaScript, ya que el SDK de la versión 9 está optimizado para funcionar con herramientas de creación de bundles de módulos con el fin de eliminar el código no utilizado (tree-shaking) y reducir el tamaño del SDK.

Para usar el SDK v9, sigue estos pasos:

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

   npm install firebase

2. Inicializa Firebase en tu aplicación y crea un objeto FirebaseApp:

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

   Haz los cambios siguientes:

   • 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 aplicación.

   Una aplicación 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 aplicación de Firebase en tu código, puedes añadir y empezar a usar servicios de Firebase.

   Si usas ESM y quieres usar módulos de navegador, sustituye todas las líneas import por el siguiente patrón:
   import { } from 'https://www.gstatic.com/firebasejs/12.2.1/firebase-SERVICE.js',
   donde SERVICE es el nombre de un SDK, como firebase-firestore.

   Usar módulos de navegador es una forma rápida de empezar, pero te recomendamos que uses un empaquetador de módulos para la producción.

Acceder a Identity Platform en JavaScript

Ahora que ha inicializado el SDK de Firebase, puede usarlo en cualquier parte de su aplicación. Por ejemplo, aquí tiene una aplicación que intenta iniciar sesión 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;
      });
}

Haz los cambios siguientes:

• 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 del usuario que has creado anteriormente en esta guía.
• PASSWORD: la contraseña de usuario que has creado anteriormente en esta guía.

Usar un paquete de módulos para reducir el tamaño

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

El SDK web de Firebase se ha diseñado para funcionar con los empaquetadores de módulos y eliminar el código que no se utilice (tree-shaking). Te recomendamos que uses este método en las aplicaciones de producción. Herramientas como Angular CLI, Next.js, Vue CLI o Create React App gestionan automáticamente la agrupación de módulos de las bibliotecas instaladas a través de npm e importadas en tu base de código.

Por ejemplo, puedes usar Webpack para generar una carpeta dist que contenga el código de tu aplicación y de las dependencias empaquetados. Para obtener más información, consulta Usar empaquetadores de módulos con Firebase.

Importar JavaScript en tu página

1. Crea un archivo llamado index.html.

2. Añade dos contenedores HTML básicos e importa el JS empaquetado.

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

3. Abre index.html en tu navegador web. Aparecerá un mensaje de bienvenida con el correo del usuario.

SDK v8 (antiguo)

Crear una página web

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

2. En el archivo HTML, añade dos contenedores HTML:

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

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

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

   Ir a Proveedores de identidades

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

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

Iniciar la sesión del usuario

1. Para iniciar la sesión 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, a continuación, procesa el resultado con la retrollamada onAuthStateChanged().

   Haz los cambios siguientes:

   • EMAIL_ID: el correo del usuario que has creado antes
   • PASSWORD: la contraseña del usuario que has creado antes

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

Hay un límite en los intentos de inicio de sesión de usuario fallidos. Si se producen varios intentos de inicio de sesión fallidos rápidamente, se bloquea temporalmente el acceso del usuario a su cuenta.

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

Limpieza

Para evitar que se apliquen cargos en tu cuenta de Google Cloud por los recursos utilizados en esta página, sigue estos pasos.

Eliminar el proveedor y el usuario

Si has usado un proyecto, elimina el proveedor y el usuario que has creado para evitar que se te cobren cargos en tu cuenta: Google Cloud

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

   Ir a Proveedores de identidades

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

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

   Ve a Usuarios

4. Para eliminar el usuario que has creado, haz clic en Eliminar junto al nombre del usuario. Para confirmar la acción, haz clic en Eliminar.

Eliminar el proyecto

La forma más fácil de evitar que te cobren es eliminar el proyecto que has creado para el tutorial.

Para ello, sigue las instrucciones que aparecen a continuación:

Precaución: Eliminar un proyecto tiene los siguientes efectos:

• Se elimina todo el contenido del proyecto. Si has usado un proyecto que ya existía para las tareas de este documento, cuando lo elimines, también se eliminará cualquier otro trabajo que hayas realizado en él.
• Se pierden los IDs de proyecto personalizados. Cuando creaste este proyecto, es posible que hayas creado un ID de proyecto personalizado que quieras usar en el futuro. Para conservar las URLs que usan el ID del proyecto, como una URL appspot.com, elimina los recursos seleccionados dentro del proyecto en lugar de eliminar todo el proyecto.

Si tienes previsto consultar varias arquitecturas, tutoriales o guías de inicio rápido, reutilizar los proyectos puede ayudarte a no superar los límites de cuota de proyectos.

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

Siguientes pasos

En una aplicación real, los usuarios se registrarían en una página de registro específica y, a continuación, iniciarían sesión introduciendo sus correos y contraseñas. Identity Platform ofrece una interfaz de autenticación prediseñada que puedes usar en estas páginas, pero también puedes crear la tuya propia. También puedes admitir otros métodos de inicio de sesión, como proveedores de redes sociales (como Facebook o Google), números de teléfono, OIDC o SAML.

Consulta más información sobre lo siguiente:

• Inicia la sesión de los usuarios con JavaScript, Android, iOS, C++ o Unity.

• Permite que los usuarios inicien sesión con OIDC o SAML.

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