Integra el Acceso con Google en tu app web

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

El Acceso con Google administra el flujo de OAuth 2.0 y el ciclo de vida del token, lo que simplifica tu integración con las API de Google. Un usuario siempre tiene la opción de revocar el acceso a una aplicación en cualquier momento.

En este documento, se describe cómo completar una integración básica con el Acceso con Google.

Crea credenciales de autorización

Cualquier aplicación que utilice OAuth 2.0 para acceder a las API de Google debe tener credenciales de autorización que identifiquen la aplicación al servidor OAuth 2.0 de Google. En los siguientes pasos, se explica cómo crear credenciales para tu proyecto. Luego, tus aplicaciones pueden usar las credenciales para acceder a las API que hayas habilitado en ese proyecto.

  1. Go to the Credentials page.
  2. Haz clic en Crear credenciales > ID de cliente de OAuth.
  3. Selecciona el tipo de aplicación Aplicación web.
  4. Asigna un nombre a tu cliente de OAuth 2.0 y haz clic en Crear

Una vez completada la configuración, toma nota del ID de cliente que se creó. Necesitarás el ID de cliente para completar los pasos siguientes. También se crea un secreto de cliente, pero solo lo necesitas para las operaciones del servidor.

Carga la biblioteca de Google Platform

Debes incluir la biblioteca de Google Platform en tus páginas web que integran el Acceso con Google.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Especifica el ID de cliente de tu app

Especifica el ID de cliente que creaste para tu app en Google Developers Console con el elemento google-signin-client_id.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Agrega un botón de Acceso con Google

La forma más fácil de agregar un botón de Acceso con Google a tu sitio es usar un botón de acceso que se procese automáticamente. Con solo unas pocas líneas de código, puedes agregar un botón que se configure automáticamente a fin de tener el texto, el logotipo y los colores adecuados para el estado de acceso del usuario y los alcances que solicites.

Para crear un botón de Acceso con Google que use la configuración predeterminada, agrega un elemento div con la clase g-signin2 a tu página de acceso:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Obtener información de perfil

Después de que un usuario accede con Google mediante los alcances predeterminados, puedes acceder al ID de Google, el nombre, la URL del perfil y la dirección de correo electrónico del usuario.

Para recuperar la información de perfil de un usuario, usa el método getBasicProfile().

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Cómo cerrar la sesión de un usuario

Puedes permitir que los usuarios salgan de la app sin salir de Google. Para ello, agrega un botón o vínculo de salida a tu sitio. Para crear un vínculo de cierre de sesión, adjunta una función que llame al método GoogleAuth.signOut() al evento onclick del vínculo.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>