Google Sign-In administra el flujo de OAuth 2.0 y el ciclo de vida del token, lo que simplifica su 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.
Este documento describe cómo completar una integración básica de inicio de sesión de Google.
Crear credenciales de autorización
Cualquier aplicación que use OAuth 2.0 para acceder a las API de Google debe tener credenciales de autorización que identifiquen la aplicación en el servidor OAuth 2.0 de Google. Los siguientes pasos explican cómo crear credenciales para su proyecto. Luego, sus aplicaciones pueden usar las credenciales para acceder a las API que haya habilitado para ese proyecto.
- Go to the Credentials page.
- Haga clic en Crear credenciales> ID de cliente de OAuth .
- Seleccione el tipo de aplicación de la aplicación web .
- Nombre su cliente OAuth 2.0 y haga clic en Crear
Una vez completada la configuración, tome nota del ID de cliente que se creó. Necesitará la identificación de cliente para completar los siguientes pasos. (También se crea un secreto de cliente, pero solo lo necesita para operaciones del lado del servidor).
Cargar la biblioteca de Google Platform
Debe incluir la biblioteca de Google Platform en sus páginas web que integran el inicio de sesión de Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Especifique el ID de cliente de su aplicación
Especifique el ID de cliente que creó para su aplicación en Google Developers Console con el meta elemento google-signin-client_id .
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">Agregar un botón de inicio de sesión de Google
La forma más sencilla de agregar un botón de inicio de sesión de Google a su sitio es utilizar un botón de inicio de sesión renderizado automáticamente. Con solo unas pocas líneas de código, puede agregar un botón que se configura automáticamente para tener el texto, el logotipo y los colores adecuados para el estado de inicio de sesión del usuario y los ámbitos que solicita.
Para crear un botón de inicio de sesión de Google que utilice la configuración predeterminada, agregue un elemento div con la clase g-signin2 a su página de inicio de sesión:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
El siguiente es un ejemplo del botón de inicio de sesión de Google predeterminado:
Obtener información de perfil
Una vez que haya iniciado sesión con un usuario en Google utilizando los ámbitos predeterminados, puede acceder al ID de Google, el nombre, la URL del perfil y la dirección de correo electrónico del usuario.
Para recuperar información de perfil de un usuario, use 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.
}
Cerrar sesión como usuario
Puede permitir que los usuarios cierren sesión en su aplicación sin cerrar sesión en Google agregando un botón de cierre de sesión o un enlace a su sitio. Para crear un enlace de GoogleAuth.signOut() sesión, adjunte una función que llame al método GoogleAuth.signOut() al evento onclick del enlace.
<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>