การออก Digital Credentials API จะพร้อมใช้งานใน Chrome 155

Natalia Markoborodova

เผยแพร่เมื่อ: 23 ตุลาคม 2569

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

ฉากหลัง

ระบบนิเวศของข้อมูลประจำตัวดิจิทัลประกอบด้วย 3 ฝ่าย ได้แก่ ผู้ออก ผู้ตรวจสอบ (หรือที่เรียกว่าฝ่ายที่เชื่อถือ) และผู้ถือ (แอป Wallet) ผู้ใช้มักจะเพิ่มบัตรประจำตัวดิจิทัลลงในแอป Wallet ผ่าน Push Provisioning ซึ่งผู้ใช้จะเริ่มการออกบัตรจากเว็บไซต์หรือแอปของผู้ออกบัตร ตัวอย่างเช่น นักศึกษาในเว็บไซต์ของมหาวิทยาลัย (ผู้ออกบัตร) สามารถบันทึกบัตรประจำตัวนักศึกษาแบบดิจิทัลลงในแอป Wallet ที่ต้องการ (ผู้ถือบัตร) ได้

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

วิธีการทำงานของการออกเอกสารรับรองดิจิทัล

Chrome รองรับการออกข้อมูลรับรองด้วย W3C Digital Credentials API เพื่อปรับปรุงกระบวนการนี้ให้มีประสิทธิภาพมากขึ้น ซึ่งจะเพิ่มความสามารถในการนำเสนอ (การแชร์ข้อมูลที่ขอและเลือกจากข้อมูลเข้าสู่ระบบดิจิทัลกับผู้ตรวจสอบ) ซึ่งเปิดตัวใน Chrome 141 เมื่อเว็บไซต์ของผู้ออกเรียกใช้ navigator.credentials.create() ด้วยสมาชิก digital ที่มีคำขอการออก Chrome จะส่งคำขอดังกล่าวไปยังระบบปฏิบัติการ (ใน Android คือ Credential Manager) จากนั้นระบบปฏิบัติการจะแสดงอินเทอร์เฟซของตนเองซึ่งผู้ใช้จะเลือกแอป Wallet โดย API จะทำงานร่วมกับโปรโตคอลมาตรฐานอุตสาหกรรม เช่น OpenID สำหรับการออกข้อมูลเข้าสู่ระบบที่ยืนยันได้ (OpenID4VCI) การออกบัตรจะรองรับ 2 ขั้นตอน ได้แก่ ขั้นตอนในอุปกรณ์เดียวกันบน Android และขั้นตอนข้ามอุปกรณ์ที่เริ่มต้นบนเดสก์ท็อปและเสร็จสิ้นในอุปกรณ์ Android

ขั้นตอนในอุปกรณ์เดียวกันบน Android

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

ขั้นตอนข้ามอุปกรณ์บนเดสก์ท็อป

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

ใช้การออกบัตรโดยใช้ API

หากต้องการเริ่มขั้นตอนการออกบัตร ให้เรียกใช้ navigator.credentials.create() และส่งคำขอออกบัตรภายในสมาชิก digital ทำการเรียกนี้จากเครื่องจัดการการคลิกหรือเครื่องจัดการท่าทางผู้ใช้อื่นๆ เนื่องจากต้องมีการเปิดใช้งานผู้ใช้ชั่วคราว ตัวอย่างต่อไปนี้ใช้ข้อเสนอข้อมูลเข้าสู่ระบบ OpenID4VCI กับขั้นตอนรหัสที่ได้รับสิทธิ์ล่วงหน้า

// Call this function from a user gesture handler, for example, a button's
// click handler. The pre-authorized code is a short-lived, single-use code
// that your server generates for the signed-in user.
async function issueDigitalCredential(preAuthorizedCode) {
  // Check for Digital Credentials API and protocol support.
  if (!window.DigitalCredential ||
      !DigitalCredential.userAgentAllowsProtocol('openid4vci-v1')) {
    // Provide an alternative issuance method.
    showAlternativeIssuanceFlow();
    return;
  }

  // Construct a credential offer according to the OpenID4VCI
  // specification. This example uses the format that the
  // demo CMWallet supports.
  const credentialOffer = {
    credential_issuer: 'https://issuer.example',
    credential_configuration_ids: ['org.iso.18013.5.1.mDL'],
    grants: {
      'urn:ietf:params:oauth:grant-type:pre-authorized_code': {
        'pre-authorized_code': preAuthorizedCode
      }
    },
    // Metadata that the wallet uses to request and display the credential.
    credential_issuer_metadata: {
      credential_issuer: 'https://issuer.example',
      credential_endpoint: 'https://issuer.example/openid4vci/credential',
      nonce_endpoint: 'https://issuer.example/openid4vci/nonce',
      credential_configurations_supported: {
        'org.iso.18013.5.1.mDL': {
          format: 'mso_mdoc',
          doctype: 'org.iso.18013.5.1.mDL',
          // Bind the credential to a key that the wallet generates.
          cryptographic_binding_methods_supported: ['cose_key'],
          proof_types_supported: {
            jwt: { proof_signing_alg_values_supported: ['ES256'] }
          },
          credential_metadata: {
            display: [{ name: 'Mobile driving license', locale: 'en-US' }],
            // The claims that this credential contains. For a full list of
            // standard mDL claims, see the ISO/IEC 18013-5 specification.
            claims: [{
              path: ['org.iso.18013.5.1', 'family_name'],
              display: [{ name: 'Family name', locale: 'en-US' }]
            }
            // ... Add any other claims for your credential here.
            ]
          }
        }
      }
    },
    // Metadata of the authorization server that issues access tokens.
    authorization_server_metadata: {
      issuer: 'https://issuer.example',
      token_endpoint: 'https://issuer.example/openid4vci/token'
    }
  };

  try {
    const credential = await navigator.credentials.create({
      digital: {
        requests: [{
          // The protocol identifier for OpenID4VCI 1.0.
          protocol: 'openid4vci-v1',
          // Pass the offer as an object, not as a JSON string.
          data: credentialOffer
        }]
      }
    });

    // The wallet handled the request. credential.data is an object that
    // contains the wallet's protocol-specific response. It is not the issued
    // credential, and it does not necessarily mean that issuance is complete.
    // Your server knows when the wallet retrieves the credential from your
    // credential endpoint.
    // Implement your custom logic here as needed.
    showIssuanceStatus(credential);
  } catch (error) {
    switch (error.name) {
      case 'NotAllowedError':
        // The user canceled the flow, no wallet can handle the request, or
        // the call does not have transient user activation.
        break;
      case 'NotSupportedError':
        // The browser does not support Digital Credentials API issuance.
        // Fall back to your custom alternative flow logic.
        showAlternativeIssuanceFlow();
        break;
      case 'TypeError':
        // The request is malformed, for example, data is not an object.
        console.error('Invalid issuance request:', error);
        break;
      default:
        // For example, AbortError or NetworkError.
        console.error('Credential issuance failed:', error);
    }
  }
}

const addButton = document.querySelector('#add-to-wallet');
addButton.addEventListener('click', () => {
  // Your server adds a pre-authorized code for the signed-in user
  // to the button's data-pre-authorized-code attribute.
  issueDigitalCredential(addButton.dataset.preAuthorizedCode);
});

ในตัวอย่างนี้ showAlternativeIssuanceFlow() และ showIssuanceStatus() จะแทนตรรกะของแอปของคุณเอง

หากต้องการเรียกใช้ create() จาก iframe แบบข้ามต้นทาง หน้าที่ฝังต้องอนุญาตฟีเจอร์นโยบายสิทธิ์ digital-credentials-create มิเช่นนั้น ระบบจะปฏิเสธการโทรด้วย NotAllowedError:

<iframe src="https://issuer.example" allow="digital-credentials-create">
</iframe>

การเปลี่ยนแปลงนับตั้งแต่ช่วงทดลองใช้จากต้นทาง

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

พื้นที่ ช่วงทดลองใช้จากต้นทาง (Chrome 143) Chrome 155
ความพร้อมใช้งาน โทเค็นช่วงทดลองใช้จากต้นทางหรือแฟล็ก chrome://flags/#web-identity-digital-credentials-creation เปิดใช้โดยค่าเริ่มต้นแล้ว
การเปิดใช้งานของผู้ใช้ จำเป็น แต่ไม่ได้ใช้ ต้องระบุและใช้โดยการเรียก create() แต่ละครั้ง (Chrome 146)
ข้อผิดพลาดในการยกเลิก NetworkError NotAllowedError (Chrome 148)
ตัวระบุโปรโตคอล Chrome จะส่งตัวระบุไปยังระบบปฏิบัติการ ตัวระบุที่ไม่รู้จักจะทริกเกอร์คำเตือนการเลิกใช้งาน (Chrome 151)
ต้นทางที่ไม่เปิดเผย อนุญาต บล็อกด้วย NotAllowedError (Chrome 151)
การทดสอบอัตโนมัติ ไม่มีการสนับสนุนในตัว กระเป๋าเงินเสมือนในโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (Chrome 152)

มีการใช้การเปิดใช้งานผู้ใช้

ตั้งแต่ Chrome 146 เป็นต้นไป การเรียก create() ที่มีสมาชิก digital จะใช้การเปิดใช้งานผู้ใช้ชั่วคราวตามที่ข้อกำหนดระบุไว้ ในระหว่างช่วงทดลองใช้จากต้นทาง Chrome จะตรวจสอบการเปิดใช้งานของผู้ใช้แต่จะไม่ใช้การเปิดใช้งานนั้น

ด้วยเหตุนี้ การเรียก create() แต่ละครั้งจึงต้องมีท่าทางผู้ใช้ของตัวเอง เช่น การคลิกปุ่ม หากไม่มีการเปิดใช้งานของผู้ใช้ ระบบจะปฏิเสธ Promise ด้วย NotAllowedError หลังจากเรียกใช้ window.open() และ API อื่นๆ ที่ต้องมีการเปิดใช้งานของผู้ใช้จะไม่สามารถใช้ท่าทางสัมผัสเดียวกันได้

การปฏิเสธการยกเลิกด้วย NotAllowedError

ตั้งแต่ Chrome 148 เป็นต้นไป สัญญาที่ create() แสดงผลจะปฏิเสธด้วย NotAllowedError เมื่อผู้ใช้ยกเลิกขั้นตอน เช่น โดยการปิดตัวเลือกกระเป๋าเงินใน Android หรือปิดกล่องโต้ตอบคิวอาร์โค้ดในเดสก์ท็อป นอกจากนี้ Promise ยังปฏิเสธด้วย NotAllowedError เมื่อไม่มีแอป Wallet ที่จัดการคำขอได้ ในระหว่างช่วงทดลองใช้จากต้นทาง กรณีเหล่านี้ถูกปฏิเสธด้วย NetworkError

หากโค้ดของคุณตรวจสอบ NetworkError เพื่อตรวจหาการยกเลิก ให้อัปเดตโค้ดเพื่อตรวจสอบ NotAllowedError แทน

ตัวระบุโปรโตคอลที่ไม่รู้จักจะทริกเกอร์คำเตือน

ข้อกำหนดนี้จะกำหนดตัวระบุโปรโตคอลการออกใบรับรองรายการเดียว ซึ่งก็คือ openid4vci-v1 สำหรับ OpenID4VCI 1.0 Chrome 155 รู้จัก openid4vci-v1 และ openid4vci ด้วย เนื่องจาก openid4vci ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด เราขอแนะนำให้คุณใช้ openid4vci-v1

Chrome จะส่งคำขอที่มีตัวระบุโปรโตคอลไปยังแพลตฟอร์ม อย่างไรก็ตาม ตั้งแต่ Chrome 151 เป็นต้นไป เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงคำเตือนการเลิกใช้งานเมื่อหน้าเว็บเรียกใช้ create() ด้วยตัวระบุโปรโตคอลที่ไม่รู้จัก Chrome ตั้งใจที่จะบล็อกคำขอที่มีตัวระบุโปรโตคอลที่ไม่รู้จัก ดูสถานะได้ที่รายการการกรองโปรโตคอลที่เฉพาะเจาะจงมากขึ้นใน Digital Credential API

หากต้องการทดสอบลักษณะการทำงานนี้ ให้เปิดใช้ chrome://flags/#enable-experimental-web-platform-features เมื่อเปิดใช้แฟล็กนี้ create() จะละเว้นคำขอที่มีตัวระบุโปรโตคอลที่ไม่รู้จักและปฏิเสธด้วย TypeError หากไม่มีคำขอเหลืออยู่ นอกจากนี้ DigitalCredential.userAgentAllowsProtocol() จะแสดงผล true สำหรับโปรโตคอลที่รู้จักเท่านั้น หากไม่มีแฟล็ก ระบบจะตรวจสอบเฉพาะว่าตัวระบุมีรูปแบบที่ถูกต้องหรือไม่ ดังนั้น อย่าใช้ userAgentAllowsProtocol() เพียงอย่างเดียวในการตรวจหาฟีเจอร์ จัดการ NotSupportedError ดังที่แสดงในตัวอย่าง

ต้นทางแบบไม่เปิดเผยถูกบล็อก

ตั้งแต่ Chrome 151 เป็นต้นไป create() จะปฏิเสธด้วย NotAllowedError เมื่อเอกสารที่มีต้นทางทึบแสงเรียกใช้ เช่น iframe ที่ทำแซนด์บ็อกซ์โดยไม่มีโทเค็น allow-same-origin ในระหว่างช่วงทดลองใช้จากต้นทาง Chrome ไม่ได้บล็อกการเรียกใช้เหล่านี้

ทดสอบด้วยกระเป๋าเงินเสมือน

ตั้งแต่ Chrome 152 เป็นต้นไป คุณจะทดสอบขั้นตอนการออกได้โดยไม่ต้องใช้อุปกรณ์ Android หรือแอป Wallet คำสั่ง DigitalCredentials.setVirtualWalletBehavior เวอร์ชันทดลองในโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) จะใช้ Wallet เสมือนที่ข้อกำหนดระบุไว้สำหรับการทดสอบอัตโนมัติ กระเป๋าเงินเสมือนสามารถตอบกลับด้วยข้อมูลที่คุณระบุ ปฏิเสธคำขอเสมือนว่าผู้ใช้ยกเลิกขั้นตอน หรือปล่อยให้คำขอรอดำเนินการเพื่อทดสอบการหมดเวลาและการยกเลิก

การทดสอบ Puppeteer ต่อไปนี้จะตั้งค่าวอลเล็ตเสมือนให้ตอบสนองต่อคำขอ openid4vci-v1 จากนั้นคลิกปุ่มที่เริ่มการออกบัตร

const client = await page.createCDPSession();
await client.send('DigitalCredentials.setVirtualWalletBehavior', {
  action: 'respond',
  protocol: 'openid4vci-v1',
  response: {}
});

// Clicking the button provides the user activation that create() requires.
await page.click('#add-to-wallet');

การนำไปใช้ในอุตสาหกรรม

เราเห็นการนำ Digital Credentials API ไปใช้ในการออกข้อมูลเข้าสู่ระบบ ตัวอย่างเช่น สถาบันการเงิน Sparkasse ของเยอรมนีใช้ Digital Credentials API เพื่ออนุญาตให้เจ้าของบัญชีบันทึกข้อมูลเข้าสู่ระบบที่ยืนยันอายุแล้วลงใน Google Wallet จากนั้นเจ้าของบัญชีจะใช้ข้อมูลเข้าสู่ระบบเหล่านี้เพื่อยืนยันอายุทางออนไลน์และด้วยตนเองได้

ลองเลย

ก่อนทดสอบการออก Digital Credentials API โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้

  • อัปเดตเป็น Chrome 155 ขึ้นไป
  • ติดตั้งแอปกระเป๋าเงินที่รองรับในอุปกรณ์ Android เช่น CMWallet เวอร์ชันสาธิต
  • เปิดบลูทูธในอุปกรณ์ทั้ง 2 เครื่อง (ขั้นตอนข้ามอุปกรณ์เท่านั้น)

วิธีทดสอบขั้นตอนข้ามอุปกรณ์

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

หากต้องการทดสอบขั้นตอนในอุปกรณ์เดียวกัน ให้เปิดเว็บไซต์สาธิตของผู้ออกบัตรใน Chrome บนอุปกรณ์ Android

แหล่งข้อมูลสำหรับนักพัฒนาแอป

หากต้องการเริ่มผสานรวมการออก Digital Credentials API ลงในเว็บไซต์ ให้ใช้แหล่งข้อมูลต่อไปนี้

แชร์ความคิดเห็น

หากต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ ให้ยื่นเรื่องปัญหาในเครื่องมือติดตามข้อบกพร่องของ Chromium