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

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

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

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

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

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

גישה ל-API באמצעות OAuth 2.0

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

כדי ליצור פרטי כניסה ואת מסך ההסכמה:

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

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

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

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

שיטות לשילוב 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 של 'פרופיל העסק ב-Google' ולהחליף את קוד הרשאה המשמש לקבלת אסימוני רענון וגישה.

גישה אופליין

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

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

הרצת הדוגמה

כדי להריץ את הקוד לדוגמה שקיבלתם:

  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. טוענים את כתובת ה-URL הבאה בדפדפן:

    http://localhost:8000/index.html