ใช้งาน OAuth กับ API ของ Business Profile

ทุกคำขอที่แอปพลิเคชันส่งไปยัง Business Profile API จะต้อง รวมโทเค็นการให้สิทธิ์ โทเค็นการให้สิทธิ์จะระบุผู้ใช้หรือ กับ Google ซึ่งอนุญาตให้เข้าถึง Business Profile API แอปพลิเคชันต้องใช้ OAuth 2.0 เพื่อให้สิทธิ์คำขอ

คู่มือนี้จะอธิบายวิธีต่างๆ ที่คุณนำไปใช้ได้ OAuth 2.0 บนแพลตฟอร์ม Google Identity Platform มีฟังก์ชัน Google Sign-In และ OAuth ที่ใช้กันมานาน

เพื่อให้เข้าใจวิธีใช้ Oauth 2.0 สำหรับเว็บเซิร์ฟเวอร์ได้ดียิ่งขึ้น แอปพลิเคชัน โปรดดูคำแนะนำที่นี่

การใช้ OAuth 2.0 มีข้อดีดังนี้

  • ปกป้องสิทธิ์การเข้าถึงข้อมูลของเจ้าของธุรกิจ
  • สร้างข้อมูลประจำตัวของเจ้าของธุรกิจเมื่อลงชื่อเข้าใช้ บัญชี Google
  • ระบุว่าแพลตฟอร์มหรือแอปพลิเคชันของพาร์ทเนอร์เข้าถึงและแก้ไขได้ ข้อมูลตำแหน่งโดยได้รับความยินยอมที่ชัดแจ้งจากเจ้าของธุรกิจ เจ้าของสามารถ เพิกถอนการเข้าถึงนี้ในภายหลัง
  • สร้างเอกลักษณ์ของแพลตฟอร์มพาร์ทเนอร์
  • อนุญาตให้แพลตฟอร์มพาร์ทเนอร์ดำเนินการทางออนไลน์หรือออฟไลน์ในนามของ เจ้าของธุรกิจ ซึ่งรวมถึงการตอบรีวิว การสร้างโพสต์ และ อัปเดตรายการในเมนู

การเข้าถึง API ด้วย OAuth 2.0

ก่อนเริ่มต้น คุณต้องกำหนดค่าโปรเจ็กต์ Google Cloud และเปิดใช้ Business Profile API สำหรับข้อมูลเพิ่มเติม โปรดดูเอกสารประกอบสำหรับ การตั้งค่าพื้นฐาน

ทําตามขั้นตอนต่อไปนี้เพื่อสร้างข้อมูลเข้าสู่ระบบและหน้าจอขอความยินยอม

  1. จากหน้าข้อมูลเข้าสู่ระบบ ในคอนโซล API ให้คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือก "รหัสไคลเอ็นต์ OAuth" จาก รายการแบบเลื่อนลง
  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 Sign-In

Google Sign-In เป็นวิธีที่รวดเร็วที่สุดในการ ผสานรวม OAuth เข้ากับแพลตฟอร์มของคุณ พร้อมให้ใช้งานสำหรับ Android, iOS, เว็บ และอื่นๆ

Google Sign-In เป็นระบบการตรวจสอบสิทธิ์ที่ปลอดภัยซึ่งช่วยให้ผู้ใช้ลงชื่อเข้าใช้ได้ ด้วยบัญชี Google ซึ่งเป็นบัญชีเดียวกับที่ใช้ลงชื่อเข้าใช้ บริการอื่นๆ ของ Google เมื่อลงชื่อเข้าใช้แล้ว ผู้ใช้สามารถให้ความยินยอม แอปพลิเคชันของคุณเพื่อเรียกใช้ Business Profile API และแลกเปลี่ยน รหัสการให้สิทธิ์ที่ใช้เพื่อรับโทเค็นการรีเฟรชและเข้าถึง

การเข้าถึงแบบออฟไลน์

คุณอาจต้องเรียกใช้ Business Profile API ในนามของผู้ใช้ แม้ว่า ผู้ใช้ออฟไลน์อยู่ เราขอแนะนำให้แพลตฟอร์มใช้ เพราะคุณสามารถแก้ไข ดู และจัดการรายชื่อได้ตลอดเวลาหลังจาก ผู้ใช้ ได้ลงชื่อเข้าใช้และให้ความยินยอม

Google จะถือว่าผู้ใช้ได้ลงชื่อเข้าใช้ด้วยบัญชี Google แล้ว ยินยอมให้แอปพลิเคชันเรียกใช้ Business Profile API และ แลกเปลี่ยนรหัสการให้สิทธิ์ที่จะใช้เพื่อรับโทเค็นการรีเฟรชแล้ว เป็นโทเค็นเพื่อการเข้าถึงในภายหลัง ผู้ใช้สามารถจัดเก็บโทเค็นการรีเฟรชได้อย่างปลอดภัยและใช้ เพื่อรับโทเค็นเพื่อการเข้าถึงใหม่ได้ทุกเมื่อในภายหลัง สำหรับข้อมูลเพิ่มเติม โปรดอ่าน Google Sign-In สำหรับฝั่งเซิร์ฟเวอร์ แอป

ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีใช้การเข้าถึงแบบออฟไลน์ใน แอปพลิเคชัน หากต้องการเรียกใช้โค้ดนี้ โปรดดูเรียกใช้ตัวอย่าง

<!-- 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 โดยไม่ต้องแคชโทเค็นการรีเฟรชของผู้ใช้ อย่างไรก็ตาม ผู้ใช้จะต้องลงชื่อ สำหรับแพลตฟอร์มเพื่อทำการเรียก API ในฐานะผู้ใช้

ข้อมูลโค้ดต่อไปนี้แสดงการใช้งาน Google Sign-In และวิธีเรียก 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. ป้อน URL ของเว็บไซต์ในช่องต้นทาง JavaScript ที่ได้รับอนุญาต ถึง เรียกใช้โค้ดตัวอย่างในคู่มือนี้ คุณต้องเพิ่ม http://localhost:8000 ด้วย

  5. โหลด URL ต่อไปนี้ในเบราว์เซอร์ของคุณ:

    http://localhost:8000/index.html