การใช้โมเดลโทเค็น

ไลบรารี JavaScript google.accounts.oauth2 ช่วยให้คุณแสดงข้อความแจ้งแก่ผู้ใช้ ยินยอมและรับโทเค็นเพื่อการเข้าถึงเพื่อทำงานกับข้อมูลผู้ใช้ โดยอิงตาม ขั้นตอนการให้สิทธิ์โดยนัย OAuth 2.0 และออกแบบมาเพื่อให้คุณสามารถเรียกใช้ Google API โดยตรงโดยใช้ REST และ CORS หรือเพื่อใช้ไลบรารีไคลเอ็นต์ Google APIs ของเราสำหรับ JavaScript (หรือที่เรียกว่า gapi.client) สำหรับการเข้าถึงที่ง่ายดายและยืดหยุ่น API ที่ซับซ้อนขึ้นอีก

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

ในรูปแบบการให้สิทธิ์ตามโทเค็น ไม่จำเป็นต้องจัดเก็บต่อผู้ใช้ รีเฟรชโทเค็นในเซิร์ฟเวอร์แบ็กเอนด์ของคุณ

เราขอแนะนำให้คุณทำตามวิธีที่ระบุไว้ที่นี่แทน เทคนิคที่ครอบคลุมโดย OAuth 2.0 เวอร์ชันเก่าสำหรับเว็บแอปพลิเคชันฝั่งไคลเอ็นต์

ตั้งค่า

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

เริ่มต้นไคลเอ็นต์โทเค็น

เรียกใช้ initTokenClient() เพื่อเริ่มต้นไคลเอ็นต์โทเค็นใหม่ด้วย รหัสไคลเอ็นต์ คุณอาจรวมรายการขอบเขตผู้ใช้อย่างน้อย 1 ขอบเขต ต้องการเข้าถึง:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

ทริกเกอร์ขั้นตอนโทเค็น OAuth 2.0

ใช้เมธอด requestAccessToken() เพื่อทริกเกอร์ขั้นตอน UX ของโทเค็นและรับ โทเค็นเพื่อการเข้าถึง Google จะแจ้งให้ผู้ใช้ดำเนินการดังนี้

  • เลือกบัญชี
  • ลงชื่อเข้าใช้บัญชี Google หากยังไม่ได้ลงชื่อเข้าใช้
  • ให้ความยินยอมแก่เว็บแอปของคุณในการเข้าถึงขอบเขตที่ขอแต่ละรายการ

ท่าทางสัมผัสของผู้ใช้จะเรียกใช้โฟลว์โทเค็น: <button onclick="client.requestAccessToken();">Authorize me</button>

จากนั้น Google จะส่งกลับ TokenResponse ที่มีโทเค็นเพื่อการเข้าถึงและลิสต์ของ ขอบเขตที่ผู้ใช้ให้สิทธิ์การเข้าถึงหรือข้อผิดพลาด แก่ตัวแฮนเดิล Callback ของคุณ

ผู้ใช้อาจปิดหน้าต่างตัวเลือกบัญชีหรือการลงชื่อเข้าใช้ได้ ซึ่งในกรณีนี้ ฟังก์ชัน Callback จะไม่ถูกเรียก

การออกแบบและประสบการณ์ของผู้ใช้สำหรับแอปของคุณควรใช้เฉพาะหลังจากที่ อ่านนโยบาย OAuth 2.0 ของ Google อย่างละเอียด นโยบายเหล่านี้ครอบคลุม การทำงานร่วมกับหลายขอบเขต ช่วงเวลาและวิธีจัดการความยินยอมของผู้ใช้ และอื่นๆ

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

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

การให้สิทธิ์ที่เพิ่มขึ้น

สำหรับเว็บแอป สถานการณ์ระดับสูง 2 แบบต่อไปนี้แสดงให้เห็นการเพิ่ม การให้สิทธิ์โดยใช้

  • แอป Ajax แบบหน้าเดียวที่มักใช้ XMLHttpRequest พร้อมการเข้าถึงแบบไดนามิก ที่ไม่ซับซ้อน
  • หน้าเว็บหลายหน้า ทรัพยากรต่างๆ ถูกแยกและจัดการในแต่ละหน้า

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

อาแจ๊กซ์

เพิ่มการรองรับการให้สิทธิ์ที่เพิ่มขึ้นในแอปด้วยการโทรหลายครั้ง ไปยัง requestAccessToken() และใช้ออบเจ็กต์ OverridableTokenClientConfig scope เพื่อขอขอบเขตแต่ละรายการในเวลาที่จำเป็นและ เมื่อจำเป็นเท่านั้น ในตัวอย่างนี้ ระบบจะขอและเปิดเผยทรัพยากร หลังจากที่ท่าทางสัมผัสของผู้ใช้ขยายส่วนเนื้อหาที่ยุบแล้วเท่านั้น

แอป Ajax
เริ่มต้นไคลเอ็นต์โทเค็นเมื่อโหลดหน้าเว็บ โดยทำดังนี้ 
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
ขอความยินยอมและรับโทเค็นเพื่อการเข้าถึงผ่านท่าทางสัมผัสของผู้ใช้ คลิก "+" เพื่อเปิด

เอกสารสำหรับอ่าน

แสดงเอกสารล่าสุด

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );

กิจกรรมที่กำลังจะมีขึ้น

แสดงข้อมูลปฏิทิน

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );

แสดงรูปภาพ

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
             })
           );

การโทรมาที่ requestAccessToken แต่ละครั้งจะทำให้เกิดช่วงเวลาที่ผู้ใช้ให้ความยินยอม แอปของคุณจะ มีสิทธิ์เข้าถึงเฉพาะทรัพยากรที่จำเป็นในส่วนที่ผู้ใช้เลือก ซึ่งเป็นการจำกัดการแชร์ทรัพยากรผ่านตัวเลือกของผู้ใช้

หลายหน้าเว็บ

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

แอปที่มีหลายหน้า
หน้าเว็บ รหัส
หน้า 1 เอกสารสำหรับอ่าน 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
หน้า 2 กิจกรรมที่กำลังจะจัดขึ้น 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
หน้า 3 ภาพสไลด์ 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

แต่ละหน้าจะขอขอบเขตที่จำเป็นและรับโทเค็นเพื่อการเข้าถึงโดยการเรียกใช้ initTokenClient() และ requestAccessToken() เมื่อโหลด ในสถานการณ์นี้ หน้าเว็บแต่ละหน้าใช้แยกฟังก์ชันการทำงานของผู้ใช้ และ ทรัพยากรตามขอบเขต ในสถานการณ์จริง หน้าเว็บแต่ละหน้าอาจส่งคำขอ ขอบเขตที่เกี่ยวข้องหลายรายการ

สิทธิ์แบบละเอียด

สิทธิ์แบบละเอียดจะได้รับการจัดการในลักษณะเดียวกันในทุกสถานการณ์ หลังจาก requestAccessToken() เรียกใช้ฟังก์ชัน Callback และโทเค็นเพื่อการเข้าถึง โปรดตรวจสอบว่าผู้ใช้ได้อนุมัติขอบเขตที่ขอแล้วโดยใช้ hasGrantedAllScopes()หรือhasGrantedAnyScope() เช่น

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly \
          https://www.googleapis.com/auth/documents.readonly \
          https://www.googleapis.com/auth/photoslibrary.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
          'https://www.googleapis.com/auth/photoslibrary.readonly')) {
        // Look at pictures
        ...
      }
      if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
          'https://www.googleapis.com/auth/calendar.readonly',
          'https://www.googleapis.com/auth/documents.readonly')) {
        // Meeting planning and review documents
        ...
      }
    }
  },
});

การให้สิทธิ์ที่ยอมรับก่อนหน้านี้จากเซสชันหรือคำขอก่อนหน้าก็จะ ที่รวมอยู่ในคำตอบ ระบบจะเก็บบันทึกความยินยอมของผู้ใช้ไว้ต่อผู้ใช้ 1 รายและ รหัสไคลเอ็นต์ และคงอยู่ในการเรียกไปยัง initTokenClient() หลายครั้ง หรือ requestAccessToken() โดยค่าเริ่มต้น ความยินยอมของผู้ใช้จำเป็นเฉพาะ เมื่อผู้ใช้เข้าชมเว็บไซต์ของคุณ และขอขอบเขตใหม่ แต่อาจได้รับการร้องขอเมื่อ การโหลดหน้าเว็บโดยใช้ prompt=consent ในออบเจ็กต์การกำหนดค่าไคลเอ็นต์โทเค็น

การใช้งานโทเค็น

ในรูปแบบโทเค็น ระบบปฏิบัติการหรือเบราว์เซอร์จะไม่จัดเก็บโทเค็นเพื่อการเข้าถึง แต่ ระบบจะได้รับโทเค็นใหม่ก่อนเมื่อโหลดหน้าเว็บ หรือหลังจากนั้นก็ทริกเกอร์ โทรหา requestAccessToken() ผ่านท่าทางสัมผัสของผู้ใช้ เช่น การกดปุ่ม

การใช้ REST และ CORS กับ Google APIs

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

ในตัวอย่างนี้ ให้ดูกิจกรรมในปฏิทินที่กำลังจะมาถึงของผู้ใช้ที่ลงชื่อเข้าใช้โดยใช้ โทเค็นเพื่อการเข้าถึงที่ tokenRequest() แสดงผล:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();

ดูข้อมูลเพิ่มเติมได้ที่วิธีใช้ CORS เพื่อเข้าถึง Google API

ส่วนถัดไปจะพูดถึงวิธีผสานรวมกับ API ที่ซับซ้อนมากขึ้นได้อย่างง่ายดาย

การทำงานกับไลบรารี JavaScript ของ Google APIs

ไคลเอ็นต์โทเค็นทำงานร่วมกับไลบรารีของไคลเอ็นต์ Google API สำหรับ JavaScript ดูข้อมูลโค้ดด้านล่าง

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      gapi.client.setApiKey('YOUR_API_KEY');
      gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }
  },
});

function listUpcomingEvents() {
  gapi.client.calendar.events.list(...);
}

การหมดอายุของโทเค็น

โทเค็นเพื่อการเข้าถึงมีอายุการใช้งานที่สั้น หากโทเค็นเพื่อการเข้าถึงหมดอายุ ก่อนเซสชันของผู้ใช้จะสิ้นสุดลง ให้รับโทเค็นใหม่โดยการเรียกใช้ requestAccessToken() จากเหตุการณ์ที่เกิดจากผู้ใช้ เช่น การกดปุ่ม

เรียกใช้เมธอด google.accounts.oauth2.revoke เพื่อนำความยินยอมของผู้ใช้ออก และ สิทธิ์เข้าถึงทรัพยากรสำหรับขอบเขตทั้งหมดที่มอบให้แก่แอปของคุณ สิทธิ์เข้าถึงที่ถูกต้อง ต้องระบุโทเค็นเพื่อเพิกถอนสิทธิ์นี้

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });