Implementare OAuth con le API di Profilo dell'attività

Ogni richiesta inviata dalla tua applicazione alle API di Profilo dell'attività deve includono un token di autorizzazione. Il token di autorizzazione identifica l'utente l'applicazione a Google, il che consente di accedere alle API di Profilo dell'attività. 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 questo guida.

Per comprendere meglio come utilizzare Oauth 2.0 per il server web applicazioni, 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 può accedere e modificare Dati sulla posizione con il consenso esplicito del proprietario dell'attività. Il proprietario può in seguito revocare l'accesso.
  • Stabilisce l'identità della piattaforma partner.
  • Consente alle piattaforme partner di eseguire azioni online o offline per conto di il proprietario dell'attività. tra cui risposte alle recensioni, creazione di post e aggiornamenti alle voci del menu.

Accesso API con OAuth 2.0

Prima di iniziare, devi configurare il progetto Google Cloud e abilitare API di Profilo dell'attività. Per ulteriori informazioni, consulta la documentazione su Configurazione di base.

Segui questi passaggi per creare le credenziali e la schermata per il consenso:

  1. Dalla pagina Credenziali Nella console API, fai clic su Crea credenziali e seleziona "ID client OAuth" da dall'elenco a discesa.
  2. Seleziona il tipo di richiesta, 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 Termini di servizio e alle Norme sulla privacy.

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

L'immagine seguente mostra campi aggiuntivi che vengono visualizzati nella sezione Consenso OAuth schermata:

L'immagine seguente è un esempio di ciò che l'utente potrebbe vedere prima di fornire 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 ritirato ed è disponibile per la manutenzione per le implementazioni esistenti.

Librerie client

Gli esempi specifici per i vari linguaggi 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 la tua lingua.

Le librerie client sono disponibili per i seguenti linguaggi:

Accedi con Google

Accedi con Google è il modo più rapido per di 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 che utilizza per accedere altri servizi Google. Una volta eseguito l'accesso, l'utente può concedere il consenso per l'applicazione per chiamare le API di Profilo dell'attività e scambiare codice di autorizzazione usato per ottenere token di aggiornamento e accesso.

Accesso offline

Potrebbe essere utile chiamare le API di Profilo dell'attività per conto di un utente, anche quando l'utente è offline. È consigliabile che le piattaforme incorporano questo perché puoi modificare, visualizzare e gestire le schede in qualsiasi momento dopo il l'utente ha eseguito l'accesso e ha dato il consenso.

Google presuppone che l'utente abbia già effettuato l'accesso con il proprio Account Google e che abbia ha concesso il consenso per consentire alla tua applicazione di chiamare le API del profilo dell'attività e scambiato un codice di autorizzazione che viene poi utilizzato per ottenere un token di aggiornamento in seguito, un token di accesso. L'utente può archiviare il token di aggiornamento in modo sicuro in un secondo momento per ottenerne uno nuovo in qualsiasi momento. Per ulteriori informazioni, consulta Accedi con Google lato server Google Cloud.

Il seguente snippet di codice mostra come implementare l'accesso offline nel tuo un'applicazione. Per eseguire questo 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 facilità di implementazione, è possibile eseguire chiamate dalle API Profilo dell'attività senza memorizzazione nella cache dei token di aggiornamento dell'utente. Tuttavia, l'utente deve aver firmato affinché la piattaforma esegua chiamate API come utente.

Il seguente snippet di codice illustra l'implementazione di 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 concede il consenso alla tua applicazione, concesso. Questo token di accesso identifica l'utente e deve essere trasmesso come nella richiesta API del profilo dell'attività.

Per eseguire questo 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:

  1. Salva lo snippet di codice in un file denominato index.html. Assicurati di avere 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. Dalla pagina Credenziali nella console API, seleziona l'ID client utilizzato.

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

  5. Carica il seguente URL nel browser:

    http://localhost:8000/index.html