İşletme Profili API'leriyle OAuth'u uygulama

Uygulamanızın İşletme Profili API'lerine gönderdiği her istek bir yetkilendirme jetonu içermelidir. Yetkilendirme jetonu, kullanıcıyı veya uygulamayı Google'a tanıtarak İşletme Profili API'lerine erişim sağlar. Uygulamanızın, istekleri yetkilendirmek için OAuth 2.0 protokolünü kullanması gerekir.

Bu kılavuzda, OAuth 2.0'ı platformunuzda uygulamak için kullanabileceğiniz farklı yöntemler açıklanmaktadır. Google Kimlik Platformu, bu kılavuzda kullanılan Google ile Oturum Açma ve OAuth işlevlerini sağlar.

Web sunucusu uygulamaları için Oauth 2.0'ı nasıl kullanacağınızı daha iyi anlamak için lütfen buradaki kılavuza bakın.

OAuth 2.0'ın uygulanması aşağıdaki avantajları sağlar:

  • İşletme sahibinin verilerine erişimi korur.
  • Google Hesabı'nda oturum açan işletme sahibinin kimliğini oluşturur.
  • Bir iş ortağı platformunun veya uygulamanın, işletme sahibinin açık izniyle konum verilerine erişip bunları değiştirebileceğini belirtir. Sahip, daha sonra bu erişimi iptal edebilir.
  • İş ortağı platformunun kimliğini oluşturur.
  • İş ortağı platformlarının işletme sahibi adına çevrimiçi veya çevrimdışı işlemler gerçekleştirmesini sağlar. Buna yorumlara verilen yanıtlar, yayın oluşturma ve menü öğelerine yapılan güncellemeler dahildir.

OAuth 2.0 ile API Erişimi

Başlamadan önce Google Cloud projenizi yapılandırmanız ve Business Profile API'lerini etkinleştirmeniz gerekir. Daha fazla bilgi için Temel kurulum belgelerine göz atın.

Kimlik bilgilerini ve izin ekranını oluşturmak için şu adımları uygulayın:

  1. API Konsolu'ndaki Kimlik Bilgileri sayfasında, Kimlik bilgileri oluştur'u tıklayın ve açılır listeden "OAuth İstemci Kimliği"ni seçin.
  2. Uygulama türünüzü seçin, ilgili bilgileri doldurun ve Oluştur'u tıklayın.
  3. Kaydet'i tıklayın.
  4. OAuth izin ekranı ayarlarını güncelleyin. Buradan uygulama adını ve logosunu güncelleyebilir, hizmet şartlarınız ve gizlilik politikanızın bağlantısını ekleyebilirsiniz.

Aşağıdaki resimde, OAuth izin ekranındaki uygulama adı ve logo alanları gösterilmektedir:

Aşağıdaki resimde, OAuth izin ekranında görünen ek alanlar gösterilmektedir:

Aşağıdaki resimde, kullanıcının izin vermeden önce görebileceklerine dair bir örnek verilmiştir:

OAuth 2.0'ı dahil etme yöntemleri

OAuth 2.0'ı uygulamak için aşağıdaki yöntemleri kullanabilirsiniz:

Aşağıdaki içerikte OAuth 2.0'ı uygulamanıza dahil etmek için bu yöntemler hakkında bilgi verilmektedir.

Yetkilendirme Kapsamları

Aşağıdaki OAuth kapsamlarından birini gerektirir:

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

plus.business.manage kapsamı kullanımdan kaldırılmıştır ve mevcut uygulamalarda geriye dönük uyumluluk sağlanması için kullanılabilir.

İstemci kitaplıkları

Bu sayfadaki dile özgü örnekler, OAuth 2.0 yetkilendirmesini uygulamak için Google API İstemci Kitaplıkları'nı kullanmaktadır. Kod örneklerini çalıştırmak için önce dilinize ait istemci kitaplığını yüklemeniz gerekir.

İstemci kitaplıkları aşağıdaki dillerde kullanılabilir:

Google ile Oturum Açma

Google ile Oturum Açma, OAuth'u platformunuza entegre etmenin en hızlı yoludur. Android, iOS, Web ve daha fazlası için kullanılabilir.

Google ile Oturum Açma, kullanıcıların diğer Google hizmetlerinde oturum açmak için kullandıkları hesap olan Google Hesapları ile oturum açmalarına olanak tanıyan güvenli bir kimlik doğrulama sistemidir. Kullanıcı oturum açtıktan sonra uygulamanız, İşletme Profili API'lerini çağırması ve yenileme ve erişim jetonlarını almak için kullanılan yetkilendirme kodunu değiştirmesi için izin verebilir.

Çevrimdışı erişim

Kullanıcı çevrimdışıyken bile İşletme Profili API'lerini kullanıcı adına çağırmak isteyebilirsiniz. Kullanıcı oturum açıp izin verdikten sonra girişleri dilediğiniz zaman düzenleyebileceğiniz, görüntüleyebileceğiniz ve yönetebileceğiniz için platformların bu işlevi kullanması önerilir.

Google, kullanıcının Google Hesabı ile zaten oturum açtığını, uygulamanızın İşletme Profili API'lerini çağırması için izin verdiğini ve yetkilendirme kodunu takas ettiğini varsayar. Bu kod daha sonra yenileme jetonu ve daha sonra erişim jetonu almak için kullanılır. Kullanıcı, yenileme jetonunu güvenli bir şekilde saklayabilir ve istediği zaman yeni bir erişim jetonu almak için bu jetonu kullanabilir. Daha fazla bilgi edinmek için Sunucu tarafı uygulamalar için Google ile Oturum Açma sayfasını okuyun.

Aşağıdaki kod snippet'i, uygulamanıza çevrimdışı erişimi nasıl uygulayacağınızı gösterir. Bu kodu çalıştırmak için Örneği çalıştırma bölümüne bakın.

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

Yalnızca çevrimiçi erişim

Uygulama kolaylığı açısından, İşletme Profili API'lerinden yapılan çağrılar kullanıcı yenileme jetonları önbelleğe alınmadan gerçekleştirilebilir. Ancak, kullanıcı olarak API çağrıları gerçekleştirmek için kullanıcının platformda oturum açmış olması gerekir.

Aşağıdaki kod snippet'inde, Google ile Oturum Açma akışının nasıl uygulandığı ve kullanıcıya özel bir API çağrısının nasıl yapılacağı gösterilmektedir. Kullanıcı, Google Hesabı ile oturum açıp uygulamanıza izin verdikten sonra erişim jetonu verilir. Bu erişim jetonu, kullanıcıyı tanımlar ve Business Profile API isteğinde başlık olarak iletilmelidir.

Bu kodu çalıştırmak için Örneği çalıştırma bölümüne bakın.

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

Örneği çalıştır

Verilen örnek kodu çalıştırmak için aşağıdaki adımları uygulayın:

  1. Kod snippet'ini index.html başlıklı bir dosyaya kaydedin. Dosyada istemci kimliğinizin ayarlanmış olduğundan emin olun.
  2. Çalışma dizininizden aşağıdaki komutu kullanarak web sunucusunu başlatın:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  3. API Konsolu'ndaki Kimlik Bilgileri sayfasında, kullanılan istemci kimliğini seçin.

  4. Yetkilendirilmiş JavaScript kaynakları alanının altında web sitenizin URL'sini girin. Bu kılavuzdaki örnek kodu çalıştırmak için http://localhost:8000 kodunu da eklemeniz gerekir.

  5. Şu URL'yi tarayıcınıza yükleyin:

    http://localhost:8000/index.html