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 APIs de Google. Un usuario siempre tiene la opción de revocar el acceso a un aplicación en cualquier momento.
En este documento, se describe cómo completar una integración básica con Acceso con Google.
Crea credenciales de autorización
Cualquier aplicación que utilice OAuth 2.0 para acceder a las APIs de Google debe tener credenciales de autorización que identifican la aplicación en el servidor OAuth 2.0 de Google. Los siguientes pasos explican cómo crear credenciales para tu proyecto. Así, tus aplicaciones pueden usar las credenciales para acceder a las APIs que hayas habilitado para ese proyecto.
- Go to the Credentials page.
- Haz clic en Crear credenciales > ID de cliente de OAuth.
- Selecciona el tipo de aplicación Aplicación web.
- Asigna un nombre a tu cliente de OAuth 2.0 y haz clic en Crear.
Después de completar la configuración, toma nota del ID de cliente que se creó. Necesitarás el ID de cliente para completar los pasos siguientes. (Un secreto del cliente también es creado, pero solo lo necesitas para operaciones en el servidor).
Carga la biblioteca de Google Platform
Debes incluir la biblioteca de Google Platform en las páginas web que se integran Acceso con Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Cómo especificar el ID de cliente de tu app
Especifica el ID de cliente que creaste para la aplicación en Google Developers Console.
con el metaelemento 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 renderizado automáticamente. Con solo unas pocas líneas de código, puedes agregar un botón que se configure automáticamente para incluir el texto adecuado el logotipo y los colores 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 una div
con la clase g-signin2 a tu página de acceso:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Obtén información del perfil
Después de que un usuario accede a Google con los alcances predeterminados, puedes acceder al ID, 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, usa el
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 la sesión de un usuario
Puedes permitir que los usuarios salgan de tu app sin salir de Google. Para ello, haz lo siguiente:
agregar un botón para salir o un vínculo a tu sitio. Para crear un vínculo de salida, adjunta
una función que llama al
GoogleAuth.signOut()
método 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>