הטמעת OAuth באמצעות ממשקי Business Profile API

כל בקשה שהאפליקציה שולחת לממשקי ה-API של פרופיל העסק חייבת לכלול אסימון הרשאה. אסימון ההרשאה מזהה את המשתמש או את האפליקציה ב-Google, ומאפשר גישה לממשקי ה-API של פרופיל העסק. כדי לאשר בקשות, האפליקציה חייבת להשתמש בפרוטוקול OAuth 2.0.

במדריך הזה מוסברות השיטות השונות להטמעת OAuth 2.0 בפלטפורמה. ב-Google Identity Platform אפשר להשתמש בפונקציות של OAuth וכניסה באמצעות חשבון Google, שבהן משתמשים לאורך המדריך.

כדי להבין טוב יותר איך להשתמש ב-OAuth 2.0 לאפליקציות של שרתי אינטרנט, אפשר לעיין במדריך הזה.

ההטמעה של OAuth 2.0 מספקת את היתרונות הבאים:

  • הגנה על הגישה לנתונים של בעל העסק.
  • ההגדרה הזו קובעת את הזהות של בעל העסק כשהוא נכנס לחשבון Google.
  • המדיניות הזו קובעת שפלטפורמה או אפליקציה של שותף יוכלו לגשת לנתוני מיקום ולשנות אותם, תוך קבלת הסכמה מפורשת מבעל העסק. מאוחר יותר הבעלים של הקובץ יוכלו לבטל את הגישה.
  • הגדרת הזהות של הפלטפורמה של השותף.
  • פלטפורמות של שותפים מאפשרות לבצע פעולות אונליין או אופליין בשם בעל העסק. זה כולל תגובות לביקורות, יצירת פוסטים ועדכונים לגבי אפשרויות בתפריט.

גישה ל-API עם OAuth 2.0

לפני שמתחילים, צריך להגדיר את הפרויקט ב-Google Cloud ולהפעיל את ממשקי Business Profile API. למידע נוסף, קראו את המאמר הגדרה בסיסית.

כך יוצרים פרטי כניסה ומסך ההסכמה:

  1. מתוך הדף Credentials ב-API Console, לוחצים על Create credentials ובוחרים באפשרות "OAuth Client ID" מתוך הרשימה הנפתחת.
  2. בוחרים את סוג הבקשה, ממלאים את הפרטים הרלוונטיים ולוחצים על יצירה.
  3. לוחצים על שמירה.
  4. מעדכנים את ההגדרות של מסך ההסכמה ל-OAuth. משם תוכלו לעדכן את שם האפליקציה ואת הלוגו, וכן להוסיף קישור לתנאים ולהגבלות ולמדיניות הפרטיות שלכם.

בתמונה הבאה מוצגים השדות של השם והלוגו של האפליקציה במסך ההסכמה של OAuth:

בתמונה הבאה מוצגים שדות נוספים שמופיעים במסך ההסכמה של OAuth:

בתמונה הבאה מוצגת דוגמה למה שהמשתמש עשוי לראות לפני שהוא מביע הסכמה:

שיטות לשילוב OAuth 2.0

אפשר להשתמש בשיטות הבאות להטמעת OAuth 2.0:

בהמשך מופיע מידע על השיטות האלה לשילוב OAuth 2.0 באפליקציה שלכם.

היקפי הרשאות

כדי להשתמש בתכונה הזו יש צורך באחד מההיקפים הבאים של OAuth:

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

ההיקף של plus.business.manage הוצא משימוש, והוא זמין לשמירה על תאימות לאחור להטמעות קיימות.

ספריות לקוח

בדוגמאות הספציפיות לשפה שבדף הזה נעשה שימוש בספריות לקוח של Google API כדי להטמיע הרשאת OAuth 2.0. כדי להריץ את דוגמאות הקוד, קודם צריך להתקין את ספריית הלקוח לשפה שלכם.

ספריות לקוח זמינות בשפות הבאות:

כניסה באמצעות חשבון Google

כניסה באמצעות חשבון Google היא הדרך המהירה ביותר לשלב את OAuth בפלטפורמה. ניתן להוריד אותה ל-Android, ל-iOS, לאינטרנט ועוד.

'כניסה באמצעות חשבון Google' היא מערכת אימות מאובטחת שמאפשרת למשתמשים להיכנס באמצעות חשבון Google שלהם. זהו אותו חשבון שבו הם משתמשים כדי להיכנס לשירותים אחרים של Google. אחרי שהמשתמש מחובר לחשבון, הוא יכול לאשר לאפליקציה לקרוא לממשקי ה-API של פרופיל העסק ולהמיר את קוד ההרשאה המשמש לקבלת אסימוני רענון ואסימוני גישה.

גישה אופליין

כדאי להפעיל את ממשקי ה-API של פרופיל העסק בשם המשתמש גם כשהוא במצב אופליין. מומלץ לשלב את הפונקציונליות הזו בפלטפורמות כי תוכלו לערוך, להציג ולנהל כרטיסי מוצר בכל שלב אחרי שהמשתמשים נכנסו לחשבון והביעו הסכמה.

ההנחה של Google היא שהמשתמש כבר מחובר לחשבון Google שלו, נתן לאפליקציה אישור לקרוא לממשקי ה-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>

גישה אונליין בלבד

כדי להקל על ההטמעה, אפשר לבצע קריאות מממשקי ה-API של פרופיל העסק ב-Google בלי לשמור במטמון את אסימוני הרענון של המשתמשים. עם זאת, המשתמשים חייבים להיות מחוברים לחשבון כדי שהפלטפורמה תוכל לבצע קריאות ל-API בשם המשתמש.

קטע הקוד הבא מדגים את ההטמעה של תהליך הכניסה באמצעות חשבון Google ומדגים איך לבצע קריאה ל-API ספציפית למשתמש. אחרי שהמשתמש נכנס באמצעות חשבון Google ומאשר את הבקשה, מוענק אסימון גישה. אסימון הגישה הזה מזהה את המשתמש, וצריך להעביר אותו ככותרת בבקשת ממשקי ה-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>

הפעלת הדוגמה

כדי להריץ את הקוד לדוגמה שסופק:

  1. שומרים את קטע הקוד בקובץ בשם index.html. חשוב לוודא שמזהה הלקוח שלכם מוגדר בקובץ.
  2. מפעילים את שרת האינטרנט באמצעות הפקודה הבאה מספריית העבודה:

    Python

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  3. בדף Credentials ב-API Console, בוחרים את מזהה הלקוח שבשימוש.

  4. בשדה מקורות JavaScript מורשים, מזינים את כתובת האתר. כדי להריץ את הקוד לדוגמה במדריך הזה, צריך גם להוסיף http://localhost:8000.

  5. טוענים את כתובת ה-URL הבאה בדפדפן:

    http://localhost:8000/index.html