Business Profile API की मदद से OAuth को लागू करना

आपका ऐप्लिकेशन, Business Profile के एपीआई को जो भी अनुरोध भेजता है उसमें ऑथराइज़ेशन टोकन शामिल होना चाहिए. ऑथराइज़ेशन टोकन, Google को उपयोगकर्ता या ऐप्लिकेशन की पहचान करता है. इससे, Business Profile API को ऐक्सेस किया जा सकता है. अनुरोधों को अनुमति देने के लिए, आपके ऐप्लिकेशन को OAuth 2.0 प्रोटोकॉल का इस्तेमाल करना चाहिए.

इस गाइड में उन अलग-अलग तरीकों के बारे में बताया गया है जिनका इस्तेमाल करके, अपने प्लैटफ़ॉर्म पर OAuth 2.0 को लागू किया जा सकता है. Google Identity प्लैटफ़ॉर्म Google साइन इन और OAuth की सुविधा देता है. इनका इस्तेमाल इस गाइड में किया गया है.

वेब सर्वर ऐप्लिकेशन के लिए, Oauth 2.0 को इस्तेमाल करने का तरीका समझने के लिए, कृपया यहां दी गई गाइड देखें.

OAuth 2.0 लागू करने से ये फ़ायदे मिलते हैं:

• कारोबार के मालिक के डेटा के ऐक्सेस की सुरक्षा करता है.
• जब वे अपने Google खाते में साइन इन करते हैं, तो कारोबार के मालिक की पहचान बनाई जा सकती है.
• यह कारोबार के मालिक की सहमति लेकर, यह तय करता है कि कोई पार्टनर प्लैटफ़ॉर्म या ऐप्लिकेशन, जगह की जानकारी का डेटा ऐक्सेस कर सकता है या उसमें बदलाव कर सकता है. स्वामी बाद में इस ऐक्सेस को रद्द कर सकता है.
• पार्टनर प्लैटफ़ॉर्म की पहचान तय करता है.
• पार्टनर प्लैटफ़ॉर्म को, कारोबार के मालिक की ओर से ऑनलाइन या ऑफ़लाइन कार्रवाइयां करने की सुविधा मिलती है. इसमें समीक्षाओं के जवाब, पोस्ट बनाना, और मेन्यू आइटम के अपडेट शामिल हैं.

OAuth 2.0 के साथ एपीआई ऐक्सेस

शुरू करने से पहले, आपको अपना Google Cloud प्रोजेक्ट कॉन्फ़िगर करना होगा और Business Profile API चालू करना होगा. ज़्यादा जानकारी के लिए, बुनियादी सेटअप का दस्तावेज़ देखें.

ऐसी स्क्रीन को कॉन्फ़िगर करना जहां OAuth के लिए सहमति दी जाती है

क्रेडेंशियल और सहमति वाली स्क्रीन बनाने के लिए यह तरीका अपनाएं:

1. API कंसोल में क्रेडेंशियल पेज से, क्रेडेंशियल बनाएं पर क्लिक करें और ड्रॉप-डाउन सूची से "OAuth क्लाइंट आईडी" चुनें.
2. अपने आवेदन का टाइप चुनें, ज़रूरी जानकारी भरें, और बनाएं पर क्लिक करें.
3. सेव करें पर क्लिक करें.
4. OAuth की सहमति वाली स्क्रीन की सेटिंग अपडेट करें. वहां से, आप ऐप्लिकेशन का नाम और लोगो अपडेट कर सकते हैं और साथ ही अपनी सेवा की शर्तों और निजता नीति का लिंक शामिल कर सकते हैं.

इस इमेज में OAuth सहमति स्क्रीन पर ऐप्लिकेशन का नाम और लोगो फ़ील्ड दिखाया गया है:

इस इमेज में और भी फ़ील्ड दिखाए गए हैं, जो OAuth के लिए सहमति वाली स्क्रीन पर दिखते हैं:

इस इमेज में उदाहरण के तौर पर बताया गया है कि सहमति देने से पहले लोगों को क्या दिखेगा:

OAuth 2.0 को शामिल करने के तरीके

OAuth 2.0 को लागू करने के लिए, इन तरीकों का इस्तेमाल किया जा सकता है:

• क्लाइंट लाइब्रेरी
• Google साइन इन
  • ऑफ़लाइन ऐक्सेस
  • सिर्फ़ ऑनलाइन ऐक्सेस के लिए

नीचे दिए गए कॉन्टेंट में, ऐप्लिकेशन में OAuth 2.0 को शामिल करने के इन तरीकों के बारे में जानकारी दी गई है.

अनुमति पाने के लिंक

इनमें से कोई एक OAuth स्कोप ज़रूरी है:

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

Plus.business.manage स्कोप को अब बंद कर दिया गया है और यह मौजूदा लागू करने के साथ, पुराने सिस्टम के साथ काम करने की सुविधा को बनाए रखने के लिए उपलब्ध है.

क्लाइंट लाइब्रेरी

इस पेज पर भाषा के हिसाब से दिए गए उदाहरणों में, OAuth 2.0 की अनुमति को लागू करने के लिए, Google API क्लाइंट लाइब्रेरी का इस्तेमाल किया गया है. कोड सैंपल चलाने के लिए, पहले आपको अपनी भाषा की क्लाइंट लाइब्रेरी इंस्टॉल करनी होगी.

क्लाइंट लाइब्रेरी इन भाषाओं में उपलब्ध हैं:

• शुरू करें
• Java
• .NET
• Node.js
• PHP
• Python
• रूबी

Google साइन-इन

Google साइन-इन, OAuth को अपने प्लैटफ़ॉर्म में इंटिग्रेट करने का सबसे तेज़ तरीका है. यह Android, iOS, वेब वगैरह के लिए उपलब्ध है.

'Google साइन-इन' एक सुरक्षित पुष्टि करने वाला सिस्टम है. इसकी मदद से उपयोगकर्ता, अपने Google खाते से साइन इन कर सकते हैं. यह वही खाता है जिसका इस्तेमाल वे Google की दूसरी सेवाओं में साइन इन करने के लिए करते हैं. साइन इन करने के बाद, उपयोगकर्ता आपके ऐप्लिकेशन को Business Profile API को कॉल करने और उस ऑथराइज़ेशन कोड को एक्सचेंज करने की सहमति दे सकता है. इस कोड का इस्तेमाल रीफ़्रेश और ऐक्सेस टोकन पाने के लिए किया जाता है.

बिना इंटरनेट के इस्तेमाल

उपयोगकर्ता के ऑफ़लाइन होने पर भी, उसकी तरफ़ से Business Profile API को कॉल किया जा सकता है. हमारा सुझाव है कि प्लैटफ़ॉर्म पर इस सुविधा का इस्तेमाल करें. ऐसा इसलिए, क्योंकि उपयोगकर्ता के साइन इन करने और सहमति देने के बाद, लिस्टिंग में कभी भी बदलाव किया जा सकता है, उन्हें देखा जा सकता है, और मैनेज किया जा सकता है.

Google यह मानता है कि उपयोगकर्ता ने पहले ही अपने Google खाते से साइन इन कर लिया है. उसने आपके ऐप्लिकेशन को Business Profile API को कॉल करने की सहमति दी है. साथ ही, उसने एक ऑथराइज़ेशन कोड बदला है. इसका इस्तेमाल रीफ़्रेश टोकन पाने के लिए किया जाता है. बाद में, यह ऐक्सेस टोकन हासिल कर लेता है. उपयोगकर्ता इस रीफ़्रेश टोकन को सुरक्षित रूप से स्टोर कर सकता है और बाद में इसका इस्तेमाल करके किसी भी समय नया ऐक्सेस टोकन पा सकता है. ज़्यादा जानकारी के लिए, सर्वर-साइड ऐप्लिकेशन के लिए 'Google साइन-इन' पढ़ें.

नीचे दिया गया कोड स्निपेट, आपके ऐप्लिकेशन में ऑफ़लाइन ऐक्सेस लागू करने का तरीका दिखाता है. इस कोड को चलाने के लिए, सैंपल चलाएं देखें.

चेतावनी: यह कोड दिखाने के लिए है. अपनी एपीआई कुंजी को कभी भी क्लाइंट साइड पर न दिखाएं.

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

सिर्फ़ ऑनलाइन ऐक्सेस के लिए

आसानी से लागू करने के लिए, Business Profile API से कॉल, उपयोगकर्ता के रीफ़्रेश टोकन को कैश मेमोरी में सेव किए बिना किए जा सकते हैं. हालांकि, उपयोगकर्ता के तौर पर एपीआई कॉल करने के लिए, प्लैटफ़ॉर्म पर उपयोगकर्ता का साइन इन होना ज़रूरी है.

नीचे दिया गया कोड स्निपेट, 'Google साइन इन' फ़्लो को लागू करने और किसी खास उपयोगकर्ता के लिए एपीआई कॉल करने का तरीका बताता है. जब उपयोगकर्ता अपने Google खाते से साइन इन करके आपके ऐप्लिकेशन के लिए सहमति देता है, तब ऐक्सेस टोकन दिया जाता है. इस ऐक्सेस टोकन से उपयोगकर्ता की पहचान होती है. इसे Business Profile API अनुरोध में, हेडर के तौर पर पास करना ज़रूरी होता है.

इस कोड को चलाने के लिए, सैंपल चलाएं देखें.

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

ध्यान दें: इंटिग्रेशन के बारे में ज़्यादा जानकारी के लिए, Google से साइन इन करें देखें.

सैंपल चलाएं

दिए गए सैंपल कोड को चलाने के लिए, नीचे दिया गया तरीका अपनाएं:

1. कोड स्निपेट को index.html टाइटल वाली फ़ाइल में सेव करें. पक्का करें कि आपने फ़ाइल में अपना क्लाइंट आईडी सेट किया हुआ है.

2. अपनी वर्किंग डायरेक्ट्री से, नीचे दिए गए कमांड के साथ वेब सर्वर को शुरू करें:

   Python 2.X

   python -m SimpleHTTPServer 8000

   Python 3.X

   python -m http.server 8000

3. API कंसोल में क्रेडेंशियल पेज से, इस्तेमाल किया गया क्लाइंट आईडी चुनें.

4. अनुमति वाले JavaScript ऑरिजिन फ़ील्ड में, अपनी वेबसाइट का यूआरएल डालें. इस गाइड में दिए गए सैंपल कोड को चलाने के लिए, आपको http://localhost:8000 भी जोड़ना होगा.

5. अपने ब्राउज़र में यह यूआरएल लोड करें:

   http://localhost:8000/index.html