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 ha 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 aplicación web .
- Asigne un nombre a 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á el ID de cliente para completar los siguientes pasos. (También se crea un secreto de cliente, pero solo lo necesita para las operaciones del lado del servidor).
Cargue la biblioteca de la plataforma de Google
Debe incluir la Biblioteca de la plataforma de Google 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 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 fácil de agregar un botón de inicio de sesión de Google a su sitio es usar un botón de inicio de sesión 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 apropiados 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 use 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>
Obtener información de perfil
Una vez que haya iniciado sesión en un usuario con 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 la información del perfil de un usuario, utilice 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 de un 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 cierre de 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>