Cada solicitud que tu aplicación envíe a las APIs del Perfil de Negocio debe incluyen un token de autorización. El token de autorización identifica al usuario la aplicación a Google, que le permite acceder a las APIs del Perfil de Negocio. Tu aplicación debe usar OAuth 2.0. para autorizar solicitudes.
En esta guía, se explican los diferentes métodos que puedes usar para implementar OAuth 2.0 en tu plataforma. Google Identity Platform proporciona la funcionalidad de Acceso con Google y OAuth que se usa en este .
Para comprender mejor cómo usar OAuth 2.0 para el servidor web consulta la guía aquí.
La implementación de OAuth 2.0 ofrece los siguientes beneficios:
- Protege el acceso a los datos del propietario de la empresa.
- Establece la identidad del propietario de la empresa cuando accede a su Cuenta de Google.
- Establece que una plataforma o aplicación asociada puede acceder y modificar datos de ubicación con el consentimiento explícito del propietario de la empresa. El propietario puede revocar este acceso más adelante.
- Establece la identidad de la plataforma del socio.
- Permite que las plataformas de socios realicen acciones en línea o sin conexión en nombre de el propietario de la empresa. Esto incluye las respuestas a opiniones, la creación de publicaciones y actualizaciones a los elementos del menú.
Acceso a la API con OAuth 2.0
Antes de comenzar, debes configurar tu proyecto de Google Cloud y habilitar APIs del Perfil de Negocio. Para obtener más información, consulta la documentación del Configuración básica:
Configura OAuth y la pantalla de consentimiento
Sigue estos pasos para crear las credenciales y la pantalla de consentimiento:
- En la página Credenciales En la Consola de APIs, haz clic en Crear credenciales y selecciona "ID de cliente de OAuth" de la lista desplegable.
- Selecciona el tipo de solicitud, completa la información relevante y haz clic en Crear.
- Haz clic en Guardar.
- Actualiza la configuración de la pantalla de consentimiento de OAuth. Desde allí, puedes actualizar el nombre de la aplicación y el logotipo, así como incluir un vínculo a tus condiciones del servicio y política de privacidad.
En la siguiente imagen, se muestran los campos de logotipo y nombre de la aplicación en la API de pantalla de consentimiento:
En la siguiente imagen, se muestran los campos adicionales que aparecen en el documento de consentimiento de OAuth. pantalla:
La siguiente imagen es un ejemplo de lo que el usuario podría ver antes de proporcionar consentimiento:
Métodos para incorporar OAuth 2.0
Para implementar OAuth 2.0, puedes usar los siguientes métodos:
En el siguiente contenido, se proporciona información sobre estos métodos que puedes incorporar OAuth 2.0 en tu aplicación.
Alcances de la autorización
Se necesita uno de los siguientes permisos de OAuth:
- https://www.googleapis.com/auth/business.manage
- https://www.googleapis.com/auth/plus.business.manage
El permiso plus.business.manage dejó de estar disponible y se puede mantener retrocompatibilidad con las implementaciones existentes.
Bibliotecas cliente
En los ejemplos específicos para cada lenguaje de esta página, se usan bibliotecas cliente de la API de Google. para implementar la autorización de OAuth 2.0. Para ejecutar las muestras de código, primero debes hacer lo siguiente: instalar la biblioteca cliente para tu lenguaje.
Las bibliotecas cliente están disponibles para los siguientes lenguajes:
Acceso con Google
El Acceso con Google es la forma más rápida de integrar OAuth en tu plataforma. Está disponible para Android, iOS, la Web y más.
El Acceso con Google es un sistema de autenticación seguro que permite que los usuarios accedan con su Cuenta de Google, que es la misma cuenta que usan para acceder otros servicios de Google. Una vez que el usuario accede, puede otorgar su consentimiento para lo siguiente: tu aplicación para llamar a las APIs del Perfil de Negocio y, luego, intercambiar los código de autorización que se usa para obtener tokens de actualización y acceso.
Acceso sin conexión
Se recomienda llamar a las APIs del Perfil de Negocio en nombre de un usuario, incluso el usuario está sin conexión. Se recomienda que las plataformas incorporen esto porque puedes editar, ver y administrar fichas en cualquier momento después de la usuario accedió y otorgó su consentimiento.
Google supone que el usuario ya accedió con su Cuenta de Google, otorgaste el consentimiento para que tu aplicación llame a las APIs del Perfil de Negocio intercambiaron un código de autorización que luego se usa para obtener un token de actualización. más adelante, un token de acceso. El usuario puede almacenar el token de actualización de forma segura y usar para obtener un nuevo token de acceso en cualquier momento. Para obtener más información, lee lo siguiente: Acceso con Google para el servidor apps.
El siguiente fragmento de código muestra cómo implementar el acceso sin conexión en tu y mantener la integridad de su aplicación. Para ejecutar este código, consulta Cómo ejecutar la muestra.
<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
<head>
<!-- BEGIN Pre-requisites -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
</script>
<!-- END Pre-requisites -->
<!-- Continuing the <head> section -->
<script>
function start() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
// Scopes to request in addition to 'profile' and 'email'
scope: 'https://www.googleapis.com/auth/business.manage',
immediate: true
});
});
}
</script>
</head>
<body>
<!-- Add where you want your sign-in button to render -->
<!-- Use an image that follows the branding guidelines in a real app, more info here:
https://developers.google.com/identity/branding-guidelines
-->
<h1>Business Profile Offline Access Demo</h1>
<p> This demo demonstrates the use of Google Identity Services and OAuth to gain authorization to call the Business Profile APIs on behalf of the user, even when the user is offline.
When a refresh token is acquired, store this token securely on your database. You will then be able to use this token to refresh the OAuth credentials and make offline API calls on behalf of the user.
The user may revoke access at any time from the <a href='https://myaccount.google.com/permissions'>Account Settings</a> page.
</p>
<button id="signinButton">Sign in with Google</button><br>
<input id="authorizationCode" type="text" placeholder="Authorization Code" style="width: 60%"><button id="accessTokenButton" disabled>Retrieve Access/Refresh Token</button><br>
<input id="refreshToken" type="text" placeholder="Refresh Token, never expires unless revoked" style="width: 60%"><button id="refreshSubmit">Refresh Access Token</button><br>
<input id="accessToken" type="text" placeholder="Access Token" style="width: 60%"><button id="gmbAccounts">Get Business Profile Accounts</button><br>
<p>API Responses:</p>
<script>
//Will be populated after sign in.
var authCode;
$('#signinButton').click(function() {
// signInCallback
auth2.grantOfflineAccess().then(signInCallback);
});
$('#accessTokenButton').click(function() {
// signInCallback defined in step 6.
retrieveAccessTokenAndRefreshToken(authCode);
});
$('#refreshSubmit').click(function() {
// signInCallback defined in step 6.
retrieveAccessTokenFromRefreshToken($('#refreshToken').val());
});
$('#gmbAccounts').click(function() {
// signInCallback defined in step 6.
retrieveGoogleMyBusinessAccounts($('#accessToken').val());
});
function signInCallback(authResult) {
//the 'code' field from the response, used to retrieve access token and bearer token
if (authResult['code']) {
// Hide the sign-in button now that the user is authorized, for example:
$('#signinButton').attr('style', 'display: none');
authCode = authResult['code'];
$("#accessTokenButton").attr( "disabled", false );
//Pretty print response
var e = document.createElement("pre")
e.innerHTML = JSON.stringify(authResult, undefined, 2);
document.body.appendChild(e);
//autofill authorization code input
$('#authorizationCode').val(authResult['code'])
} else {
// There was an error.
}
}
//WARNING: THIS FUNCTION IS DISPLAYED FOR DEMONSTRATION PURPOSES ONLY. YOUR CLIENT_SECRET SHOULD NEVER BE EXPOSED ON THE CLIENT SIDE!!!!
function retrieveAccessTokenAndRefreshToken(code) {
$.post('https://www.googleapis.com/oauth2/v4/token',
{ //the headers passed in the request
'code' : code,
'client_id' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
'client_secret' : 'YOUR_CLIENT_SECRET',
'redirect_uri' : 'http://localhost:8000',
'grant_type' : 'authorization_code'
},
function(returnedData) {
console.log(returnedData);
//pretty print JSON response
var e = document.createElement("pre")
e.innerHTML = JSON.stringify(returnedData, undefined, 2);
document.body.appendChild(e);
$('#refreshToken').val(returnedData['refresh_token'])
});
}
//WARNING: THIS FUNCTION IS DISPLAYED FOR DEMONSTRATION PURPOSES ONLY. YOUR CLIENT_SECRET SHOULD NEVER BE EXPOSED ON THE CLIENT SIDE!!!!
function retrieveAccessTokenFromRefreshToken(refreshToken) {
$.post('https://www.googleapis.com/oauth2/v4/token',
{ // the headers passed in the request
'refresh_token' : refreshToken,
'client_id' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
'client_secret' : 'YOUR_CLIENT_SECRET',
'redirect_uri' : 'http://localhost:8000',
'grant_type' : 'refresh_token'
},
function(returnedData) {
var e = document.createElement("pre")
e.innerHTML = JSON.stringify(returnedData, undefined, 2);
document.body.appendChild(e);
$('#accessToken').val(returnedData['access_token'])
});
}
function retrieveGoogleMyBusinessAccounts(accessToken) {
$.ajax({
type: 'GET',
url: 'https://mybusinessaccountmanagement.googleapis.com/v1/accounts',
headers: {
'Authorization' : 'Bearer ' + accessToken
},
success: function(returnedData) {
var e = document.createElement("pre")
e.innerHTML = JSON.stringify(returnedData, undefined, 2);
document.body.appendChild(e);
}
});
}
</script>
</body>
</html>
Solo acceso en línea
Para facilitar la implementación, es posible que se realicen llamadas desde las APIs del Perfil de Negocio. sin almacenar en caché los tokens de actualización del usuario. Sin embargo, el usuario debe firmar para que la plataforma realice llamadas a la API como el usuario.
El siguiente fragmento de código demuestra la implementación del Acceso con Google y cómo hacer una llamada a la API específica para el usuario. Después de que el usuario accede con en su cuenta de Google y concede su consentimiento para su aplicación, se crea un otorgada. Este token de acceso identifica al usuario y se debe pasar como un encabezado en la solicitud a las APIs del Perfil de Negocio.
Para ejecutar este código, consulta Cómo ejecutar la muestra.
<!-- The top of file index.html -->
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/business.manage">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<script>
var gmb_api_version = 'https://mybusinessaccountmanagement.googleapis.com/v1';
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log('Full Name: ' + profile.getName());
console.log("Email: " + profile.getEmail());
var access_token = googleUser.getAuthResponse().access_token;
//Using the sign in data to make a Business Profile APIs call
var req = gmb_api_version + '/accounts';
var xhr = new XMLHttpRequest();
xhr.open('GET', req);
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
//Displaying the API response
xhr.onload = function () {
document.body.appendChild(document.createTextNode(xhr.responseText));
}
xhr.send();
}
</script>
</body>
</html>
Ejecuta la muestra
Realiza los siguientes pasos para ejecutar el código de muestra proporcionado:
- Guarda el fragmento de código en un archivo llamado
index.html. Asegúrate de tener tu ID de cliente establecido en el archivo. Inicia el servidor web con el siguiente comando desde tu directorio de trabajo:
Python 2.X
python -m SimpleHTTPServer 8000
Python 3.X
python -m http.server 8000
En la página Credenciales, en la Consola de APIs, selecciona el ID de cliente utilizado.
En el campo Orígenes autorizados de JavaScript, ingresa la URL de tu sitio web. Para ejecuta el código de muestra en esta guía, también debes agregar
http://localhost:8000.Carga la siguiente URL en tu navegador:
http://localhost:8000/index.html