Implementare OAuth con le API di Profilo dell'attività

Ogni richiesta che la tua applicazione invia alle API Business Profile deve includere un token di autorizzazione. Il token di autorizzazione identifica l'utente o l'applicazione con Google, che consente l'accesso alle API Business Profile. L'applicazione deve utilizzare il protocollo OAuth 2.0 per autorizzare le richieste.

Questa guida illustra i diversi metodi che puoi utilizzare per implementare OAuth 2.0 sulla tua piattaforma. Google Identity Platform fornisce le funzionalità Accedi con Google e OAuth utilizzate in questa guida.

Per comprendere meglio come utilizzare Oauth 2.0 per le applicazioni server web, consulta questa guida.

L'implementazione di OAuth 2.0 offre i seguenti vantaggi:

  • Protegge l'accesso ai dati del proprietario dell'attività.
  • Stabilisce l'identità del proprietario dell'attività quando accede al proprio Account Google.
  • Stabilisce che una piattaforma o un'applicazione partner possa accedere e modificare i dati sulla posizione con il consenso esplicito del proprietario dell'attività. Il proprietario può revocare l'accesso in un secondo momento.
  • Stabilisce l'identità della piattaforma partner.
  • Consente alle piattaforme partner di eseguire azioni online o offline per conto del proprietario dell'azienda. come risposte alle recensioni, creazione di post e aggiornamenti di voci di menu.

Accesso API con OAuth 2.0

Prima di iniziare, devi configurare il tuo progetto Google Cloud e abilitare le API Business Profile. Per ulteriori informazioni, consulta la documentazione per la configurazione di base.

Per creare le credenziali e la schermata per il consenso:

  1. Dalla pagina Credenziali nell'API Console, fai clic su Crea credenziali e seleziona "ID client OAuth" dall'elenco a discesa.
  2. Seleziona il tipo di applicazione, inserisci le informazioni pertinenti e fai clic su Crea.
  3. Fai clic su Salva.
  4. Aggiorna le impostazioni della schermata per il consenso OAuth. Da qui puoi aggiornare il nome e il logo dell'applicazione, nonché includere un link ai tuoi Termini di servizio e alle Norme sulla privacy.

L'immagine seguente mostra i campi del nome e del logo dell'applicazione nella schermata per il consenso OAuth:

L'immagine seguente mostra i campi aggiuntivi che vengono visualizzati nella schermata per il consenso OAuth:

L'immagine seguente è un esempio di ciò che l'utente potrebbe vedere prima di fornire il consenso:

Metodi per incorporare OAuth 2.0

Per implementare OAuth 2.0 puoi utilizzare i seguenti metodi:

I seguenti contenuti forniscono informazioni su questi metodi per incorporare OAuth 2.0 nell'applicazione.

Ambiti di autorizzazione

Richiede uno dei seguenti ambiti OAuth:

  • https://www.googleapis.com/auth/business.manage
  • https://www.googleapis.com/auth/plus.business.manage

L'ambito plus.business.manage è stato deprecato ed è disponibile per mantenere la compatibilità con le versioni precedenti delle implementazioni.

Librerie client

Gli esempi specifici per le lingue in questa pagina utilizzano le librerie client delle API di Google per implementare l'autorizzazione OAuth 2.0. Per eseguire gli esempi di codice, devi prima installare la libreria client per il tuo linguaggio.

Le librerie client sono disponibili per i seguenti linguaggi:

Accedi con Google

Accedi con Google è il modo più rapido per integrare OAuth nella tua piattaforma. È disponibile per Android, iOS, web e altro ancora.

Accedi con Google è un sistema di autenticazione sicuro che consente agli utenti di accedere con il proprio Account Google, che è lo stesso account utilizzato per accedere ad altri servizi Google. Una volta eseguito l'accesso, l'utente può concedere alla tua applicazione il consenso per chiamare le API Profilo dell'attività e scambiare il codice di autorizzazione utilizzato per ottenere i token di aggiornamento e accesso.

Accesso offline

Potresti voler chiamare le API di Profilo dell'attività per conto di un utente anche quando l'utente è offline. È consigliabile che le piattaforme incorporino questa funzionalità perché puoi modificare, visualizzare e gestire le schede in qualsiasi momento dopo che l'utente ha eseguito l'accesso e ha concesso il consenso.

Google presuppone che l'utente abbia già eseguito l'accesso con il proprio Account Google, abbia concesso il consenso alla tua applicazione per chiamare le API Profilo dell'attività e ha scambiato un codice di autorizzazione che viene utilizzato per ottenere un token di aggiornamento e, in seguito, un token di accesso. L'utente può archiviare il token di aggiornamento in modo sicuro e utilizzarlo in un secondo momento per ottenere un nuovo token di accesso in qualsiasi momento. Per maggiori informazioni, consulta la pagina relativa all'accesso con Google per le app lato server.

Il seguente snippet di codice mostra come implementare l'accesso offline nella tua applicazione. Per eseguire il codice, vedi Eseguire l'esempio.

<!-- 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 accesso online

Per semplificare l'implementazione, le chiamate dalle API di Profilo dell'attività possono essere eseguite senza memorizzare nella cache i token di aggiornamento utente. Tuttavia, l'utente deve aver eseguito l'accesso affinché la piattaforma possa eseguire chiamate API in qualità di utente.

Lo snippet di codice riportato di seguito illustra l'implementazione del flusso Accedi con Google e come effettuare una chiamata API specifica per l'utente. Dopo che l'utente ha eseguito l'accesso con il proprio Account Google e avrà dato il consenso alla tua richiesta, viene concesso un token di accesso. Questo token di accesso identifica l'utente e deve essere trasmesso come intestazione nella richiesta dell'API Business Profile.

Per eseguire il codice, vedi Eseguire l'esempio.

<!-- 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>

Esegui l'esempio

Per eseguire il codice campione fornito, procedi nel seguente modo:

  1. Salva lo snippet di codice in un file denominato index.html. Assicurati di aver impostato il tuo ID client nel file.
  2. Avvia il server web con il seguente comando dalla directory di lavoro:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  3. Nella pagina Credenziali nella console API, seleziona l'ID client utilizzato.

  4. Nel campo Origini JavaScript autorizzate, inserisci l'URL del tuo sito web. Per eseguire il codice campione in questa guida, devi anche aggiungere http://localhost:8000.

  5. Carica il seguente URL nel browser:

    http://localhost:8000/index.html