Permitir que los usuarios accedan con Google

En este documento se muestra cómo usar Identity Platform para que los usuarios accedan con Google.

Antes de comenzar

En este instructivo, se supone que ya habilitaste Identity Platform y que tienes una aplicación web básica escrita con HTML y JavaScript. Consulta la Guía de inicio rápido para aprender a hacer esto.

Configura Google como proveedor

Para configurar Google como proveedor de identidad, haz lo siguiente:

  1. Ve a la página Proveedores de identidad en Cloud Console.

    Ir a la página Proveedores de identidad

  2. Haz clic en Agregar un proveedor.

  3. Selecciona Google de la lista.

  4. Ingresa el ID del cliente web de Google y el secreto web. Si aún no tienes un ID y un secreto, puedes obtener uno de la página API y servicios.

  5. Configura el URI que se enumera en Configura Google como un URI de redireccionamiento de OAuth válido para tu app de Google.

  6. Para registrar los dominios de tu app, haz clic en Agregar dominio en Dominios autorizados. Para fines de desarrollo, localhost ya está habilitado de forma predeterminada.

  7. En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu app para inicializar el SDK de cliente de Identity Platform.

  8. Haga clic en Save.

Acceso de los usuarios con el SDK de cliente

  1. Crea una instancia del objeto del proveedor de Google:

    JavaScript

    var provider = new firebase.auth.GoogleAuthProvider();
  1. Opcional: Agrega permisos de OAuth. Los permisos especifican qué datos solicitas de Google. Los datos más sensibles pueden requerir permisos específicos. Consulta la documentación del proveedor para determinar los permisos que necesita tu app.

    JavaScript

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    
  1. Opcional: Localiza el flujo de autenticación. Puedes especificar un lenguaje o usar el lenguaje predeterminado del dispositivo:

    JavaScript

    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of
    // explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  2. Opcional: Especifica parámetros personalizados de OAuth adicionales. Estos son específicos de Google y, por lo general, se usan para personalizar la experiencia de autenticación.

    JavaScript

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    

    No puedes pasar parámetros reservados por OAuth o Identity Platform.

  3. Usa el objeto del proveedor de Google para permitir que el usuario acceda. Puedes abrir una ventana emergente o redireccionar la página actual. El redireccionamiento es más sencillo para los usuarios de dispositivos móviles.

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

    JavaScript

    firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Google Access Token. You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(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;
      // ...
    });

    Para redireccionar la página, primero llama a signInWithRedirect():

    JavaScript

    firebase.auth().signInWithRedirect(provider);

    Luego, llama a getRedirectResult() cuando tu página cargue para recuperar el token de Google:

    JavaScript

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // ...
      }
      // The signed-in user info.
      var user = result.user;
    }).catch(function(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;
      // ...
    });

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

REST

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

Permite que los usuarios accedan de forma manual

Si no deseas usar el SDK de cliente, también puedes manejar el flujo de acceso manualmente:

  1. Para integrar la autenticación de Google en tu app, sigue los pasos de su documentación para desarrolladores.

  2. Permite que el usuario acceda a Google mediante el flujo que implementaste en el paso anterior.

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

    firebase.auth.GoogleAuthProvider.credential(id_token);
    
  4. Usa la credencial para que el usuario acceda con Identity Platform:

    firebase.auth().signInWithCredential(credential).catch(function(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;
      // ...
    });
    

¿Qué sigue?