Implémenter OAuth avec les API Fiche d'établissement

Chaque demande envoyée par votre application aux API Business Profile doit incluent un jeton d'autorisation. Le jeton d'autorisation identifie l'utilisateur l'application à Google, ce qui permet d'accéder aux API Fiche d'établissement. Votre application doit utiliser le protocole OAuth 2.0. pour autoriser les requêtes.

Ce guide décrit les différentes méthodes que vous pouvez utiliser pour implémenter OAuth 2.0 sur votre plate-forme. Google Identity Platform fournit les fonctionnalités Google Sign-In et OAuth utilisées tout au long de cette .

Afin de mieux comprendre comment utiliser OAuth 2.0 pour le serveur Web applications, consultez ce guide.

La mise en œuvre d'OAuth 2.0 offre les avantages suivants:

  • Protège l'accès aux données du propriétaire de l'établissement.
  • L'identité du propriétaire de l'établissement est confirmée lorsqu'il se connecte à son Compte Google.
  • Une plate-forme ou une application partenaire peut accéder aux éléments et les modifier les données de localisation avec le consentement explicite du propriétaire de l'établissement. Le propriétaire peut révoquer cet accès ultérieurement.
  • Détermine l'identité de la plate-forme partenaire.
  • Permet aux plates-formes partenaires d'effectuer des actions en ligne ou hors connexion pour le compte de le propriétaire de l'établissement. Cela inclut les réponses aux avis, la création de posts, des mises à jour des éléments du menu.

Accès à l'API avec OAuth 2.0

Avant de commencer, vous devez configurer votre projet Google Cloud et activer le API Fiche d'établissement. Pour en savoir plus, consultez la documentation Configuration de base :

Pour créer des identifiants et l'écran de consentement, procédez comme suit:

  1. Sur la page Identifiants Dans la console API, cliquez sur Créer des identifiants, puis sélectionnez "ID client OAuth". de la liste déroulante.
  2. Sélectionnez votre type d'inscription, fournissez les informations demandées, puis cliquez sur Créer :
  3. Cliquez sur Enregistrer.
  4. Mettez à jour les paramètres de l'écran de consentement OAuth. Vous pouvez alors mettre à jour le nom et le logo de l'application, ainsi que inclure un lien vers vos conditions d'utilisation et vos règles de confidentialité.

L'image suivante montre les champs du nom et du logo de l'application sur le protocole OAuth écran de consentement:

L'image suivante montre des champs supplémentaires qui apparaissent dans l'autorisation OAuth écran:

L'image suivante est un exemple de ce que l'utilisateur peut voir avant de fournir consentement:

Méthodes permettant d'intégrer OAuth 2.0

Vous pouvez utiliser les méthodes suivantes pour implémenter OAuth 2.0:

Le contenu suivant fournit des informations sur ces méthodes à intégrer OAuth 2.0 dans votre application.

Champs d'application des autorisations

Nécessite l'un des champs d'application OAuth suivants :

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

Le champ d'application plus.business.manage a été abandonné et peut être maintenu rétrocompatibilité pour les implémentations existantes.

Bibliothèques clientes

Les exemples propres au langage présentés sur cette page utilisent les bibliothèques clientes des API Google pour implémenter l'autorisation OAuth 2.0. Pour exécuter les exemples de code, vous devez d'abord installez la bibliothèque cliente pour votre langage.

Des bibliothèques clientes sont disponibles pour les langages suivants:

Google Sign-In

Google Sign-In est le moyen le plus rapide de pour intégrer OAuth à votre plate-forme. Elle est disponible pour Android, iOS, le Web, et plus encore.

Google Sign-In est un système d'authentification sécurisé qui permet aux utilisateurs avec leur compte Google, qui leur permet de se connecter dans d'autres services Google. Une fois l'utilisateur connecté, il peut donner son consentement pour votre application pour appeler les API Fiche d'établissement et échanger code d'autorisation utilisé pour obtenir des jetons d'actualisation et d'accès.

Accès hors connexion

Vous pouvez appeler les API Fiche d'établissement au nom d'un utilisateur, même si l'utilisateur est hors connexion. Nous recommandons aux plates-formes d'intégrer car vous pouvez modifier, consulter et gérer vos fiches à tout moment l'utilisateur s'est connecté et a donné son consentement.

Google suppose que l'utilisateur est déjà connecté à son compte Google, a a autorisé votre application à appeler les API Fiche d'établissement ; et a échangé un code d'autorisation qui est ensuite utilisé pour obtenir un jeton d'actualisation, et un jeton d'accès. L'utilisateur peut stocker le jeton d'actualisation de manière sécurisée plus tard pour obtenir un nouveau jeton d'accès à tout moment. Pour en savoir plus, consultez Google Sign-In pour côté serveur applications.

L'extrait de code suivant montre comment mettre en œuvre l'accès hors connexion dans votre application. Pour exécuter ce code, consultez la section Exécuter l'exemple.

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

Accès en ligne uniquement

Pour faciliter l'implémentation, des appels peuvent être effectués depuis les API Fiche d'établissement sans mettre en cache les jetons d'actualisation utilisateur. Toutefois, l'utilisateur doit être connecté pour que la plate-forme effectue des appels d'API en tant qu'utilisateur.

L'extrait de code suivant illustre l'implémentation de Google Sign-in et comment effectuer un appel d'API spécifique à un utilisateur. Une fois l'utilisateur connecté avec son compte Google et donne son consentement à votre application, un jeton d'accès est accordé. Ce jeton d'accès identifie l'utilisateur et doit être transmis en tant que dans la requête API Fiche d'établissement.

Pour exécuter ce code, consultez la section Exécuter l'exemple.

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

Exécuter l'exemple

Pour exécuter l'exemple de code fourni, procédez comme suit:

  1. Enregistrez l'extrait de code dans un fichier nommé index.html. Assurez-vous que votre ID client est défini dans le fichier.

  2. Démarrez le serveur Web à l'aide de la commande suivante depuis votre répertoire de travail:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000

  3. Dans l'onglet Identifiants de la console APIs, sélectionnez l'ID client utilisé.

  4. Sous le champ Origines JavaScript autorisées, saisissez l'URL de votre site Web. À exécutez l'exemple de code de ce guide, vous devez également ajouter http://localhost:8000.

  5. Chargez l'URL suivante dans votre navigateur: 

    http://localhost:8000/index.html