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

โปรโตคอลการตรวจสอบสิทธิ์บนเว็บใช้ฟีเจอร์ 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

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

หากต้องการให้รหัสแอปพลิเคชันคงที่ คุณต้องคัดลอกคีย์ใน 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 API โดยใช้บัญชี Google เดียวกันกับที่ใช้อัปโหลดแอปไปยัง Chrome เว็บสโตร์
  2. สร้างโปรเจ็กต์ใหม่โดยขยายเมนูแบบเลื่อนลงที่มุมซ้ายบน แล้วเลือกรายการเมนูสร้าง...
  3. เมื่อสร้างและตั้งชื่อแล้ว ให้ไปที่รายการเมนูการนำทาง "บริการ" แล้วเปิดบริการใดๆ ของ Google ที่แอปต้องการ
  4. ไปที่รายการในเมนูการนำทาง "การเข้าถึง API" แล้วคลิกปุ่มสีน้ำเงินสร้างรหัสไคลเอ็นต์ OAuth 2.0
  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 คุณสามารถส่ง Flag ('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 จะบันทึกข้อมูลดังกล่าวและเรียกใช้ Callback ของแอปที่มี URL การเปลี่ยนเส้นทางแบบเต็ม แอปควรแยกโทเค็นออกจาก URL

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

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

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

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