Wdrażanie protokołu OAuth za pomocą interfejsów Business Profile API

Każde żądanie wysyłane przez aplikację do interfejsów Business Profile API musi zawierać token autoryzacji. Token autoryzacji identyfikuje użytkownika lub aplikację w Google, co umożliwia dostęp do interfejsów Business Profile API. Twoja aplikacja musi używać protokołu OAuth 2.0 do autoryzowania żądań.

W tym przewodniku opisujemy różne metody implementacji protokołu OAuth 2.0 na swojej platformie. Google Identity Platform udostępnia funkcje logowania przez Google i OAuth używane w tym przewodniku.

Aby dowiedzieć się więcej o korzystaniu z OAuth 2.0 w aplikacjach serwera WWW, zapoznaj się z tym przewodnikiem.

Wdrożenie protokołu OAuth 2.0 przynosi takie korzyści:

  • Chroni dostęp do danych właściciela firmy.
  • Ustala tożsamość właściciela firmy, gdy loguje się on na swoje konto Google.
  • Określa, że platforma lub aplikacja partnera może uzyskiwać dostęp do danych o lokalizacji i je modyfikować za wyraźną zgodą właściciela firmy. Właściciel może później odebrać te uprawnienia dostępu.
  • Określa tożsamość platformy partnerskiej.
  • Umożliwia platformom partnerów wykonywanie działań online lub offline w imieniu właściciela firmy. Dotyczy to odpowiedzi na opinie, tworzenia postów i aktualizacji pozycji menu.

Dostęp API za pomocą protokołu OAuth 2.0

Zanim zaczniesz, musisz skonfigurować projekt Google Cloud i włączyć interfejsy Business Profile API. Więcej informacji znajdziesz w dokumentacji konfiguracji podstawowej.

Aby utworzyć dane logowania i ekran zgody, wykonaj te czynności:

  1. Na stronie Dane logowania w konsoli API kliknij Utwórz dane logowania i wybierz z listy „Identyfikator klienta OAuth”.
  2. Wybierz typ aplikacji, wpisz odpowiednie informacje i kliknij Utwórz.
  3. Kliknij Zapisz.
  4. Zaktualizuj ustawienia ekranu akceptacji OAuth. Możesz tam zaktualizować nazwę i logo aplikacji, a także dodać link do warunków korzystania z usługi i polityki prywatności.

Poniższy obraz przedstawia pola nazwy i logo aplikacji na ekranie zgody OAuth:

Poniższy obraz przedstawia dodatkowe pola wyświetlane na ekranie zgody OAuth:

Ten obraz przedstawia przykładowy widok użytkownika, który nie wyrazi zgody:

Metody stosowania protokołu OAuth 2.0

OAuth 2.0 możesz wdrożyć za pomocą tych metod:

Poniżej znajdziesz informacje o metodach wdrażania OAuth 2.0 w aplikacjach.

Zakresy autoryzacji

Wymaga jednego z tych zakresów OAuth:

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

Zakres plus.business.manage został wycofany i jest dostępny, aby zachować zgodność wsteczną istniejących implementacji.

Biblioteki klienta

Przykłady w poszczególnych językach na tej stronie korzystają z Google API Client Libraries do implementacji autoryzacji OAuth 2.0. Aby uruchomić przykładowy kod, musisz najpierw zainstalować bibliotekę klienta w swoim języku.

Biblioteki klientów są dostępne w tych językach:

Logowanie przez Google

Logowanie przez Google to najszybszy sposób na integrację protokołu OAuth na platformie. Aplikacja jest dostępna na Androida, iOS, Internet i nie tylko.

Logowanie przez Google to bezpieczny system uwierzytelniania, który umożliwia użytkownikom logowanie się za pomocą kont Google, czyli tego samego konta, którego używają do logowania się w innych usługach Google. Po zalogowaniu się użytkownik może wyrazić zgodę na wywoływanie przez aplikację interfejsów Business Profile API i wymianę kodu autoryzacji służącego do uzyskania tokenów odświeżania i dostępu do danych.

Dostęp offline

Interfejsy Business Profile API możesz wywoływać w imieniu użytkownika, nawet jeśli jest on offline. Zalecamy, aby platformy uwzględniały tę funkcję, ponieważ gdy użytkownik się zaloguje i wyrazisz zgodę, możesz w każdej chwili edytować i wyświetlać wizytówki oraz nimi zarządzać.

Zakładamy, że użytkownik jest już zalogowany na swoje konto Google, wyraził zgodę na wywoływanie przez Twoją aplikację interfejsów Business Profile API i wymieniał kod autoryzacji, który następnie służy do uzyskania tokena odświeżania, a później – token dostępu. Użytkownik może bezpiecznie przechowywać token odświeżania i użyć go później do uzyskania nowego tokena dostępu w dowolnym momencie. Więcej informacji znajdziesz w artykule Logowanie przez Google w aplikacjach po stronie serwera.

Poniższy fragment kodu pokazuje, jak wdrożyć dostęp offline w aplikacji. Instrukcje uruchamiania tego kodu znajdziesz w artykule Uruchamianie przykładowego kodu.

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

Dostęp tylko online

Aby ułatwić implementację, wywołania interfejsów Business Profile API mogą być wykonywane bez zapisywania tokenów odświeżania użytkowników w pamięci podręcznej. Jednak użytkownik musi być zalogowany, aby platforma mogła wykonywać wywołania interfejsu API jako użytkownik.

Poniższy fragment kodu ilustruje implementację procesu logowania się przez Google i sposób wywoływania interfejsu API specyficznego dla użytkownika. Gdy użytkownik zaloguje się na swoje konto Google i wyrazi zgodę na aplikację, zostanie przyznany token dostępu. Ten token dostępu identyfikuje użytkownika i jest wymagany jako nagłówek w żądaniu do interfejsu Business Profile API.

Instrukcje uruchamiania tego kodu znajdziesz w artykule Uruchamianie przykładowego kodu.

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

Uruchamianie przykładu

Aby uruchomić przykładowy kod, wykonaj te czynności:

  1. Zapisz fragment kodu w pliku index.html. Upewnij się, że w pliku jest ustawiony identyfikator klienta.
  2. Uruchom serwer WWW za pomocą tego polecenia z katalogu roboczego:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  3. Na stronie Dane logowania w konsoli API wybierz użyty identyfikator klienta.

  4. W polu Autoryzowane źródła JavaScript wpisz adres URL witryny. Aby uruchomić przykładowy kod z tego przewodnika, musisz też dodać http://localhost:8000.

  5. Wczytaj ten URL w przeglądarce:

    http://localhost:8000/index.html