การตรวจสอบสิทธิ์ของผู้ใช้

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

ใช้ Chrome Identity API เพื่อตรวจสอบสิทธิ์ผู้ใช้ นั่นคือ getAuthToken สำหรับผู้ใช้ที่ลงชื่อเข้าใช้บัญชี Google และ launchWebAuthFlow สำหรับผู้ใช้ที่ลงชื่อเข้าใช้บัญชีที่ไม่ใช่ของ Google หากแอปใช้เซิร์ฟเวอร์ในการตรวจสอบสิทธิ์ผู้ใช้ คุณจะต้องใช้เซิร์ฟเวอร์หลัง

วิธีการทำงาน

ผู้ใช้แอป Chrome จะมีบัญชี Google ที่เชื่อมโยงกับโปรไฟล์ของตน แอปรับโทเค็น OAuth2 สำหรับผู้ใช้เหล่านี้ได้โดยใช้ getAuthToken API

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

การตรวจสอบสิทธิ์บัญชี Google

ต่อไปนี้คือขั้นตอน 5 ขั้นตอนที่คุณต้องทำ

  1. เพิ่มสิทธิ์ลงในไฟล์ Manifest และอัปโหลดแอป
  2. คัดลอกคีย์ใน manifest.json ที่ติดตั้งไปยังไฟล์ Manifest ของต้นทางเพื่อให้รหัสแอปพลิเคชันคงที่ระหว่างการพัฒนา
  3. รับรหัสไคลเอ็นต์ OAuth2 สำหรับแอป Chrome ของคุณ
  4. อัปเดตไฟล์ Manifest ให้รวมรหัสไคลเอ็นต์และขอบเขต
  5. รับโทเค็นการตรวจสอบสิทธิ์

เพิ่มสิทธิ์และอัปโหลดแอป

คุณต้องตรวจสอบว่าสิทธิ์สำหรับข้อมูลประจำตัวอยู่ในไฟล์ Manifest จากนั้น คุณจะอัปโหลดแอปไปยังหน้าการจัดการแอปและส่วนขยายได้ (ดูเผยแพร่)

"permissions": [
  "identity"
]

คัดลอกคีย์ไปยังไฟล์ Manifest

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

คุณต้องคัดลอกคีย์ใน manifest.json ที่ติดตั้งไปยังไฟล์ Manifest ของแหล่งที่มาเพื่อให้รหัสแอปพลิเคชันคงที่ ซึ่งวิธีนี้อาจไม่ใช่สิ่งที่งดงามที่สุด แต่สิ่งที่จะเกิดขึ้นมีดังนี้

  1. ไปที่ไดเรกทอรีข้อมูลผู้ใช้ ตัวอย่างใน MacOs: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
  2. แสดงรายการแอปและส่วนขยายที่ติดตั้ง และจับคู่รหัสแอปในหน้าการจัดการแอปและส่วนขยายกับรหัสเดียวกันที่นี่
  3. ไปที่ไดเรกทอรีแอปที่ติดตั้ง (ซึ่งจะเป็นเวอร์ชันภายในรหัสแอป) เปิด manifest.json ที่ติดตั้งไว้ (pico เป็นวิธีที่รวดเร็วในการเปิดไฟล์)
  4. คัดลอก "คีย์" ใน manifest.json ที่ติดตั้งแล้ววางลงในไฟล์ Manifest ของแหล่งที่มาของแอป

รับรหัสไคลเอ็นต์ OAuth2

คุณต้องลงทะเบียนแอปในคอนโซล Google API เพื่อรับรหัสไคลเอ็นต์ ดังนี้

  1. เข้าสู่ระบบคอนโซล Google APIs โดยใช้บัญชี Google เดียวกันกับที่ใช้อัปโหลดแอปไปยัง Chrome เว็บสโตร์
  2. สร้างโปรเจ็กต์ใหม่โดยขยายเมนูแบบเลื่อนลงที่มุมซ้ายบน และเลือกรายการในเมนูสร้าง...
  3. เมื่อสร้างและตั้งชื่อแล้ว ให้ไปที่รายการเมนูการนำทาง "บริการ" และเปิดบริการ Google ที่แอปของคุณต้องการ
  4. ไปที่รายการเมนูการนำทาง "การเข้าถึง API" แล้วคลิกปุ่มสีฟ้า Create an OAuth 2.0 client ID...
  5. ป้อนข้อมูลแบรนด์ตามคำขอ เลือกประเภทแอปพลิเคชันที่ติดตั้ง
  6. เลือกแอปพลิเคชัน Chrome และป้อนรหัสแอปพลิเคชัน (รหัสเดียวกับที่แสดงในหน้าการจัดการแอปและส่วนขยาย)

อัปเดตไฟล์ Manifest ด้วยรหัสไคลเอ็นต์ OAuth2 และขอบเขต

คุณต้องอัปเดตไฟล์ Manifest เพื่อรวมรหัสไคลเอ็นต์และขอบเขต ต่อไปนี้คือตัวอย่าง "oauth2" สำหรับตัวอย่าง gdrive

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  }

รับโทเค็นเพื่อการเข้าถึง

ขณะนี้คุณพร้อมที่จะรับโทเค็นการตรวจสอบสิทธิ์แล้วโดยเรียกใช้ identity.getAuthToken

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
  // Use the token.
});

การโต้ตอบของผู้ใช้

เมื่อเรียกใช้ getAuthToken คุณสามารถส่งแฟล็ก ('interactive': true ในตัวอย่างด้านบน) ซึ่งระบุว่าคุณต้องการให้เรียกใช้ API ในโหมดอินเทอร์แอกทีฟหรือโหมดปิดเสียง หากคุณเรียกใช้ API ในโหมดอินเทอร์แอกทีฟ ผู้ใช้จะเห็น UI การลงชื่อเข้าใช้และ/หรือการอนุมัติเมื่อจำเป็น ดังที่แสดงในภาพหน้าจอด้านล่าง

ภาพหน้าจอแสดง UI เมื่อแอปใช้ Identity API ในการตรวจสอบสิทธิ์บัญชี Google

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

แนวทางปฏิบัติแนะนำที่เราแนะนำคือใช้โหมดปิดเสียงเมื่อไม่ได้ใช้ท่าทางสัมผัสของผู้ใช้ และใช้โหมดอินเทอร์แอกทีฟหากมีท่าทางสัมผัสของผู้ใช้ (เช่น ผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ในแอป) โปรดทราบว่าเราไม่ได้บังคับใช้ข้อกำหนดเกี่ยวกับท่าทางสัมผัสใดๆ

การแคช

Chrome มีแคชในหน่วยความจำของโทเค็นเพื่อการเข้าถึง คุณจึงเรียกใช้ getAuthToken ได้ทุกเมื่อที่ต้องการใช้โทเค็น แคชจะจัดการกับวันหมดอายุของโทเค็นโดยอัตโนมัติ

คุณดูสถานะปัจจุบันของแคชโทเค็นได้บน chrome://identity-internals

ในบางกรณี เช่น เมื่อผู้ใช้เปลี่ยนรหัสผ่าน โทเค็นเพื่อการเข้าถึงที่ไม่มีวันหมดอายุจะหยุดทำงาน การเรียก API ที่ใช้โทเค็นจะเริ่มแสดงผลพร้อมรหัสสถานะ HTTP 401 หากตรวจพบว่าเกิดปัญหานี้ขึ้น คุณสามารถนำโทเค็นที่ไม่ถูกต้องออกจากแคชของ Chrome ได้โดยเรียกใช้ identity.removeCachedAuthToken

ตัวอย่างการใช้ removeCachedAuthToken:

// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
  var retry = true;
  function getTokenAndXhr() {
    chrome.identity.getAuthToken({/* details */},
                                 function (access_token) {
      if (chrome.runtime.lastError) {
        callback(chrome.runtime.lastError);
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Authorization',
                           'Bearer ' + access_token);

      xhr.onload = function () {
        if (this.status === 401 && retry) {
          // This status may indicate that the cached
          // access token was invalid. Retry once with
          // a fresh token.
          retry = false;
          chrome.identity.removeCachedAuthToken(
              { 'token': access_token },
              getTokenAndXhr);
          return;
        }

        callback(null, this.status, this.responseText);
      }
    });
  }
}

การตรวจสอบสิทธิ์บัญชีที่ไม่ใช่ของ Google

ต่อไปนี้คือ 3 ขั้นตอนที่คุณต้องทำ

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

ลงทะเบียนกับผู้ให้บริการ

คุณต้องลงทะเบียนรหัสไคลเอ็นต์ OAuth2 กับผู้ให้บริการและกำหนดค่ารหัสไคลเอ็นต์เป็นเว็บไซต์ หากต้องการป้อน URI การเปลี่ยนเส้นทางระหว่างการลงทะเบียน ให้ใช้ URL ของแบบฟอร์ม ดังนี้ https://<extension-id>.chromiumapp.org/<anything-here>

เช่น หากรหัสแอปคือ abcdefghijklmnopqrstuvwxyzabcdef และคุณต้องการให้ provider_cb เป็นเส้นทาง เพื่อแยกความแตกต่างระหว่างรหัสกับ URI การเปลี่ยนเส้นทางจากผู้ให้บริการรายอื่น คุณควรใช้โค้ดต่อไปนี้ https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

เพิ่มสิทธิ์สำหรับผู้ให้บริการ

หากต้องการสร้าง XHR แบบข้ามต้นทางไปยังปลายทาง API ของผู้ให้บริการ คุณต้องอนุญาตรูปแบบที่เหมาะสมในสิทธิ์ดังนี้

"permissions": [
  ...
  "https://www.website-of-provider-with-user-photos.com/photos/*"
]

รับโทเค็น

วิธีรับโทเค็น

chrome.identity.launchWebAuthFlow(
  {'url': '<url-to-do-auth>', 'interactive': true},
  function(redirect_url) { /* Extract token from redirect_url */ });

<url-to-do-auth> คือ URL ใดก็ตามที่มีไว้เพื่อตรวจสอบสิทธิ์ผู้ให้บริการจากเว็บไซต์ เช่น สมมติว่าคุณกำลังดำเนินการตามขั้นตอน OAuth2 กับผู้ให้บริการและได้ลงทะเบียนแอปด้วยรหัสไคลเอ็นต์ 123456789012345 และต้องการเข้าถึงรูปภาพของผู้ใช้ในเว็บไซต์ของผู้ให้บริการนี้ https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

ผู้ให้บริการจะตรวจสอบสิทธิ์ และจะแสดง UI การเข้าสู่ระบบและ/หรือการอนุมัติให้ผู้ใช้เห็นตามความเหมาะสม จากนั้นระบบจะเปลี่ยนเส้นทางไปยัง https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome จะบันทึก URL ดังกล่าวและเรียกใช้ Callback ของแอปด้วย URL การเปลี่ยนเส้นทางแบบเต็ม แอปควรแยกโทเค็นออกจาก URL

อินเทอร์แอกทีฟกับโหมดเงียบ

เมื่อเรียกใช้ launchWebAuthFlow คุณสามารถส่งแฟล็ก ('interactive': true ในตัวอย่างด้านบน) ซึ่งระบุว่าคุณต้องการให้เรียกใช้ API ในโหมดอินเทอร์แอกทีฟหรือไม่ (หรือที่เรียกว่าโหมดปิดเสียง) หากคุณเรียกใช้ API ในโหมดอินเทอร์แอกทีฟ หากจำเป็น ผู้ใช้จะเห็น UI เพื่อรับโทเค็น (UI ลงชื่อเข้าใช้และ/หรือ UI การอนุมัติ หรือสำหรับ UI เฉพาะของผู้ให้บริการใดๆ)

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

แนวทางปฏิบัติแนะนำที่เราแนะนำคือใช้โหมดปิดเสียงเมื่อไม่ได้ใช้ท่าทางสัมผัสของผู้ใช้ และใช้โหมดอินเทอร์แอกทีฟหากมีท่าทางสัมผัสของผู้ใช้ (เช่น ผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ในแอป) โปรดทราบว่าเราไม่ได้บังคับใช้ข้อกำหนดเกี่ยวกับท่าทางสัมผัส