Esta página se ha traducido con Cloud Translation API.

Inicio de sesión de usuarios con Google

En este documento se explica cómo usar Identity Platform para iniciar sesión con Google.

Antes de empezar

En este tutorial se da por hecho que ya has habilitado Identity Platform y que tienes una aplicación web básica escrita en HTML y JavaScript. Consulta la guía de inicio rápido para saber cómo hacerlo.

Configurar Google como proveedor

Para configurar Google como proveedor de identidades, sigue estos pasos:

Ve a la página Proveedores de identidades de la consola de Google Cloud .

Ir a la página Proveedores de identidades
Haz clic en Add A Provider (Añadir proveedor).
Selecciona Google en la lista.
Introduce tu ID de cliente web y tu secreto web de Google. Si aún no tienes un ID y un secreto, puedes obtenerlos en la página APIs & Services (APIs y servicios).
Configure el URI que aparece en Configurar Google como un URI de redirección de OAuth válido para su aplicación de Google. Si ha configurado un dominio personalizado en Identity Platform, actualice el URI de redirección en la configuración de su aplicación de Google para que use el dominio personalizado en lugar del dominio predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler por https://auth.myownpersonaldomain.com/__/auth/handler.
Para registrar los dominios de tu aplicación, haz clic en Añadir dominio en Dominios autorizados. Para las actividades de desarrollo, localhost ya está habilitado de forma predeterminada.

Importante: En los proyectos creados después del 28 de abril del 2025, Identity Platform ya no incluye localhost como dominio autorizado de forma predeterminada. Google desaconseja encarecidamente el uso de localhost en proyectos de producción. Si decides autorizar localhost, puedes añadirlo manualmente en la página Configuración, en Dominios autorizados, haciendo clic en Añadir dominio.
En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu aplicación para inicializar el SDK de cliente de Identity Platform.
Haz clic en Guardar.

Inicio de sesión de usuarios con el SDK de cliente

Crea una instancia del objeto de proveedor de Google:

Versión web 9

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

Versión web 8

var provider = new firebase.auth.GoogleAuthProvider();google-signin.js

Opcional: Añade permisos de OAuth. Los permisos especifican los datos que solicitas a Google. Es posible que los datos más sensibles requieran ámbitos específicos. Consulta la documentación del proveedor para determinar qué ámbitos necesita tu aplicación.
Versión web 9
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Versión web 8
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```

Opcional: Localiza el flujo de autenticación. Puedes especificar un idioma o usar el idioma predeterminado del dispositivo:

Versión web 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js

Versión web 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

Opcional: especifica parámetros de OAuth personalizados adicionales. Son específicos de Google y se suelen usar para personalizar la experiencia de autenticación. No puedes transferir parámetros reservados por OAuth o Identity Platform.
Versión web 9
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Versión web 8
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```

Usa el objeto del proveedor de Google para iniciar la sesión del usuario. Puedes abrir una ventana emergente o redirigir la página actual. La redirección es más sencilla para los usuarios de dispositivos móviles.

Para mostrar una ventana emergente, llama a signInWithPopup():

Versión web 9

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });auth_google_signin_popup.js

Versión web 8

firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });google-signin.js

Para redirigir la página, primero llama a signInWithRedirect().

Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

Versión web 9

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Versión web 8

firebase.auth().signInWithRedirect(provider);index.js

A continuación, recupera el token de Google llamando a getRedirectResult() cuando se cargue tu página:

Versión web 9

import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access Google APIs.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });auth_google_signin_redirect_result.js

Versión web 8

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Google Access Token. You can use it to access the Google API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });google-signin.js

Una vez que tengas un token de acceso, podrás usarlo para llamar a la API de Google. Por ejemplo:

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

Inicio de sesión de usuarios de forma manual

Si no quieres usar el SDK de cliente, también puedes gestionar el flujo de inicio de sesión manualmente:

Integra la autenticación de Google en tu aplicación siguiendo los pasos que se indican en su documentación para desarrolladores.
Inicia la sesión del usuario con Google mediante el flujo que has implementado en el paso anterior.

Intercambia el token que recibes de Google por una credencial de Identity Platform:

Versión web 9

import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(idToken);auth_google_provider_credential.js

Versión web 8

var credential = firebase.auth.GoogleAuthProvider.credential(idToken);google-signin.js

Usa la credencial para iniciar la sesión del usuario con Identity Platform:

Versión web 9

import { getAuth, signInWithCredential } from "firebase/auth";

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // ...
  });auth_signin_credential.js

Versión web 8

// Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });index.js

Siguientes pasos

Más información sobre los usuarios de Identity Platform
Permite que los usuarios inicien sesión con otros proveedores de identidades.