Perhatian: Postingan yang terkait dengan COVID-19 sekarang diizinkan sementara untuk jaringan gerai. Selain itu, Google Bisnisku saat ini beroperasi dengan fungsi terbatas. Pelajari perubahan produk sementara lebih lanjut.

Menerapkan OAuth dengan Google My Business API

Setiap permintaan yang dikirimkan aplikasi Anda ke Google My Business API harus menyertakan token otorisasi. Token otorisasi mengidentifikasi pengguna atau aplikasi untuk Google, yang memungkinkan akses ke Google My Business API. Aplikasi Anda harus menggunakan protokol OAuth 2.0 untuk mengizinkan permintaan.

Panduan ini menjelaskan berbagai metode yang dapat Anda gunakan untuk menerapkan OAuth 2.0 di platform Anda. Google Identity Platform memberikan fungsi Login dan OAuth Google yang digunakan di keseluruhan panduan ini.

Penerapan OAuth 2.0 memberikan manfaat berikut:

  • Melindungi akses ke data pemilik bisnis.
  • Menetapkan identitas pemilik bisnis saat mereka login ke Akun Google mereka.
  • Menetapkan bahwa platform atau aplikasi partner dapat mengakses dan mengubah data lokasi dengan izin eksplisit dari pemilik bisnis. Pemilik dapat mencabut akses ini nanti.
  • Menetapkan identitas platform partner.
  • Memungkinkan platform partner melakukan tindakan online atau offline atas nama pemilik bisnis. Tindakan ini mencakup respons terhadap ulasan, pembuatan postingan, dan pembaruan pada item menu.

Akses API dengan OAuth 2.0

Sebelum memulai, Anda perlu mengonfigurasi project Google Cloud dan mengaktifkan Google My Business API. Untuk mendapatkan informasi lebih lanjut, lihat dokumentasi untuk Penyiapan dasar.

Ikuti langkah berikut untuk membuat kredensial dan layar izin:

  1. Dari halaman Kredensial di Konsol API, klik Buat kredensial dan pilih "Client ID OAuth" dari menu drop-down.
  2. Pilih jenis aplikasi Anda, isi informasi yang relevan, dan klik Buat.
  3. Klik Simpan.
  4. Perbarui setelan layar izin OAuth. Dari sana, Anda dapat memperbarui nama dan logo aplikasi, serta mencantumkan link persyaratan layanan dan kebijakan privasi.

Gambar berikut menampilkan kolom nama dan logo aplikasi pada layar izin OAuth:

Gambar berikut menunjukkan kolom tambahan yang muncul pada layar izin OAuth:

Gambar berikut adalah contoh tampilan yang dilihat pengguna sebelum mereka memberikan izin:

Metode untuk menerapkan OAuth 2.0

Metode berikut dapat digunakan untuk menerapkan OAuth 2.0:

Konten berikut memberikan informasi tentang metode tersebut untuk menerapkan OAuth 2.0 ke aplikasi Anda.

Cakupan Otorisasi

Memerlukan salah satu cakupan OAuth berikut:

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

Cakupan plus.business.manage sudah tidak digunakan lagi dan tersedia untuk mempertahankan kompatibilitas dengan versi lama untuk implementasi yang ada.

Library klien

Contoh khusus bahasa pada halaman ini menggunakan Library Klien Google API untuk menerapkan otorisasi OAuth 2.0. Untuk menjalankan contoh kode, Anda terlebih dulu harus menginstal library klien untuk bahasa Anda.

Library klien tersedia untuk bahasa berikut:

Login dengan Google

Login dengan Google adalah cara tercepat untuk mengintegrasikan OAuth ke platform Anda. Metode ini tersedia untuk Android, iOS, Web, dan lainnya.

Login dengan Google adalah sistem autentikasi aman yang memungkinkan pengguna login dengan Akun Google mereka, yang merupakan akun yang sama seperti yang digunakan untuk login ke layanan Google lainnya. Setelah pengguna login, mereka dapat memberikan izin untuk aplikasi Anda agar dapat memanggil Google My Business API dan menukarkan kode otorisasi yang digunakan untuk mendapatkan token refresh dan akses.

Akses offline

Anda sebaiknya memanggil Google My Business API atas nama pengguna meskipun pengguna offline. Sebaiknya platform menerapkan fungsi ini karena Anda dapat mengedit, melihat, dan mengelola listingan kapan saja setelah pengguna login dan memberikan izin.

Diasumsikan bahwa pengguna sudah login dengan Akun Google mereka, memberikan izin untuk aplikasi Anda agar dapat memanggil Google My Business API, dan menukarkan kode otorisasi yang selanjutnya digunakan untuk mendapatkan token refresh, dan kemudian token akses. Token refresh dapat disimpan dengan aman dan digunakan nanti untuk mendapatkan token akses baru kapan saja. Untuk mendapatkan informasi lebih lanjut, baca Login dengan Google untuk aplikasi sisi server.

Cuplikan kode berikut menunjukkan cara menerapkan akses offline di aplikasi Anda. Untuk menjalankan kode ini, lihat Menjalankan contoh.

    <!-- 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>Google My Business Offline Access Demo</h1>

    <p> This demo demonstrates the use of using Google Identity Services and OAuth to gain authorization to call the Google My Business API 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 Google My Business 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://mybusiness.googleapis.com/v4/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>

    

Hanya akses online

Untuk kemudahan penerapan, panggilan Google My Business API dapat dilakukan tanpa melakukan caching token refresh pengguna. Namun, pengguna harus login agar platform dapat melakukan panggilan API sebagai pengguna.

Cuplikan kode berikut menunjukkan penerapan alur Login dengan Google dan cara membuat panggilan API khusus pengguna. Setelah pengguna login dengan Akun Google mereka dan memberikan izin ke aplikasi Anda, token akses diberikan. Token akses ini mengidentifikasi pengguna dan harus diteruskan sebagai header dalam permintaan Google My Business API.

Untuk menjalankan kode ini, lihat Menjalankan contoh.

    <!-- 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://mybusiness.googleapis.com/v4';
          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 Google My Business API 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>

    

Menjalankan contoh

Lakukan langkah berikut untuk menjalankan contoh kode yang diberikan:

  1. Simpan cuplikan kode ke dalam file bernama index.html. Pastikan Anda memiliki client ID yang ditetapkan dalam file.
  2. Jalankan server web dengan perintah berikut dari direktori kerja Anda:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  3. Dari halaman Kredensial di Konsol API, pilih client ID yang digunakan.

  4. Pada kolom Asal JavaScript yang sah, masukkan URL situs Anda. Untuk menjalankan contoh kode dalam panduan ini, Anda juga harus menambahkan .

  5. Muat URL berikut ke browser Anda:

        http://localhost:8000/index.html