OAuth mit den Google Unternehmensprofil-APIs implementieren

Jede Anfrage, die Ihre Anwendung an die Business Profile APIs sendet, muss ein Autorisierungstoken enthalten. Über das Autorisierungstoken wird der Nutzer oder die Anwendung für Google identifiziert und so der Zugriff auf die Business Profile APIs ermöglicht. Ihre Anwendung muss das OAuth 2.0-Protokoll verwenden, um Anfragen zu autorisieren.

In diesem Leitfaden werden die verschiedenen Methoden erläutert, mit denen Sie OAuth 2.0 auf Ihrer Plattform implementieren können. Die Google Identity Platform bietet die Funktionen von Google Log-in und OAuth, die in diesem Leitfaden verwendet werden.

Weitere Informationen zum Verwenden von OAuth 2.0 für Webserveranwendungen finden Sie hier.

Die Implementierung von OAuth 2.0 bietet folgende Vorteile:

  • Schützt den Zugriff auf die Daten des Geschäftsinhabers.
  • Ermittelt die Identität des Geschäftsinhabers, wenn er sich in seinem Google-Konto anmeldet.
  • Legt fest, dass eine Partnerplattform oder -anwendung mit ausdrücklicher Zustimmung des Geschäftsinhabers auf Standortdaten zugreifen und diese ändern kann. Der Inhaber kann diesen Zugriff später widerrufen.
  • Ermittelt die Identität der Partnerplattform.
  • Ermöglicht Partnerplattformen, Online- und Offlineaktionen im Namen des Geschäftsinhabers auszuführen. Dazu gehören Antworten auf Rezensionen, das Erstellen von Beiträgen und die Aktualisierung von Menüpunkten.

API-Zugriff mit OAuth 2.0

Bevor Sie beginnen, müssen Sie Ihr Google Cloud-Projekt konfigurieren und die Business Profile APIs aktivieren. Weitere Informationen finden Sie in der Dokumentation zur grundlegenden Einrichtung.

So erstellen Sie Anmeldedaten und den Zustimmungsbildschirm:

  1. Klicken Sie in der API Console auf der Seite „Anmeldedaten“ auf Anmeldedaten erstellen und wählen Sie in der Drop-down-Liste „OAuth-Client-ID“ aus.
  2. Wählen Sie den Anwendungstyp aus, geben Sie alle relevanten Informationen ein und klicken Sie auf Erstellen.
  3. Klicken Sie auf Speichern.
  4. Aktualisieren Sie die Einstellungen des OAuth-Zustimmungsbildschirms. Dort können Sie den Namen und das Logo der Anwendung aktualisieren und einen Link zu Ihren Nutzungsbedingungen und Ihrer Datenschutzerklärung hinzufügen.

In der folgenden Abbildung sehen Sie die Felder für den Namen und das Logo der Anwendung auf dem OAuth-Zustimmungsbildschirm:

In der folgenden Abbildung sind zusätzliche Felder auf dem OAuth-Zustimmungsbildschirm zu sehen:

Die folgende Abbildung zeigt ein Beispiel dafür, was der Nutzer sehen könnte, bevor er seine Einwilligung erteilt:

Methoden zur Implementierung von OAuth 2.0

Mit den folgenden Methoden können Sie OAuth 2.0 implementieren:

Im Folgenden finden Sie Informationen zu diesen Methoden, mit denen Sie OAuth 2.0 in Ihre Anwendung einbinden können.

Autorisierungsbereiche

Erfordert einen der folgenden OAuth-Bereiche:

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

Der Bereich „plus.business.manage“ wurde verworfen und steht zur Aufrechterhaltung der Abwärtskompatibilität für vorhandene Implementierungen zur Verfügung.

Clientbibliotheken

In den sprachspezifischen Beispielen auf dieser Seite werden Google API-Clientbibliotheken verwendet, um die OAuth 2.0-Autorisierung zu implementieren. Zum Ausführen der Codebeispiele müssen Sie zuerst die Clientbibliothek für Ihre Sprache installieren.

Clientbibliotheken sind für die folgenden Sprachen verfügbar:

Google Log-in

Google Log-in ist die schnellste Möglichkeit, OAuth in Ihre Plattform zu integrieren. Es ist für Android, iOS, Web und mehr verfügbar.

Google Log-in ist ein sicheres Authentifizierungssystem, mit dem sich Nutzer mit ihrem Google-Konto anmelden können. Dabei handelt es sich um dasselbe Konto, mit dem sie sich auch in anderen Google-Diensten anmelden. Sobald der Nutzer angemeldet ist, kann er zustimmen, dass Ihre Anwendung die Business Profile APIs aufruft und den Autorisierungscode austauscht, mit dem Aktualisierungs- und Zugriffstokens abgerufen werden.

Offlinezugriff

Sie können die Business Profile APIs auch dann im Namen eines Nutzers aufrufen, wenn dieser offline ist. Es wird empfohlen, diese Funktion auf Plattformen zu implementieren, da Sie Einträge jederzeit bearbeiten, aufrufen und verwalten können, nachdem sich der Nutzer angemeldet und seine Einwilligung erteilt hat.

Google geht davon aus, dass der Nutzer bereits mit seinem Google-Konto angemeldet ist, die Einwilligung zum Aufrufen der Business Profile APIs durch Ihre Anwendung erteilt und einen Autorisierungscode ausgetauscht hat, mit dem ein Aktualisierungs- und später ein Zugriffstoken abgerufen wird. Der Nutzer kann das Aktualisierungstoken sicher speichern und später jederzeit ein neues Zugriffstoken verwenden. Weitere Informationen finden Sie unter Google Log-in für serverseitige Anwendungen.

Das folgende Code-Snippet zeigt, wie Sie den Offlinezugriff in Ihrer Anwendung implementieren. Informationen zum Ausführen dieses Codes finden Sie unter Beispiel ausführen.

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

Nur Onlinezugriff

Zur Vereinfachung der Implementierung können Business Profile APIs-Aufrufe ausgeführt werden, ohne dass Aktualisierungstokens im Cache gespeichert werden müssen. Der Nutzer muss jedoch angemeldet sein, damit API-Aufrufe als Nutzer auf der Plattform ausgeführt werden können.

Das folgende Code-Snippet veranschaulicht die Implementierung des Google Log-in-Vorgangs und die Durchführung eines nutzerspezifischen API-Aufrufs. Nachdem sich der Nutzer mit seinem Google-Konto angemeldet und der Anwendung seine Einwilligung erteilt hat, wird ein Zugriffstoken generiert. Dieses Zugriffstoken identifiziert den Nutzer und muss als Header in der Business Profile APIs-Anfrage übergeben werden.

Informationen zum Ausführen dieses Codes finden Sie unter Beispiel ausführen.

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

Beispiel ausführen

Führen Sie die folgenden Schritte aus, um den bereitgestellten Beispielcode auszuführen:

  1. Speichern Sie das Code-Snippet in einer Datei mit dem Namen index.html. Achten Sie darauf, dass Ihre Client-ID in der Datei festgelegt ist.
  2. Starten Sie den Webserver mit dem folgenden Befehl aus Ihrem Arbeitsverzeichnis:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  3. Wähle in der API Console auf der Seite Anmeldedaten die verwendete Client-ID aus.

  4. Geben Sie im Feld Autorisierte JavaScript-Quellen Ihre Website-URL ein. Zum Ausführen des Beispielcodes in dieser Anleitung müssen Sie auch http://localhost:8000 hinzufügen.

  5. Laden Sie die folgende URL in Ihren Browser:

    http://localhost:8000/index.html