หากต้องการใช้การยืนยันการชำระเงินที่ปลอดภัย (SPC) ในธุรกรรม ลูกค้าต้องลงทะเบียน Authenticator ก่อน กระบวนการนี้คล้ายกับขั้นตอนการลงทะเบียน WebAuthn อย่างมาก โดยจะเพิ่มส่วนขยายการชำระเงินมาด้วย
ในบทความนี้ ธนาคารที่ออกที่ทำหน้าที่เป็นฝ่ายที่ต้องพึ่งพา (RP) สามารถเรียนรู้วิธีนำการจดทะเบียน SPC ไปใช้ได้ คุณสามารถดูคำอธิบายเกี่ยวกับประสบการณ์ของผู้ใช้ได้ในภาพรวมของการยืนยันการชำระเงินที่ปลอดภัย
การลงทะเบียนการยืนยันการชำระเงินที่ปลอดภัยทำงานอย่างไร
SPC สร้างมาเพื่อเป็นส่วนขยายของมาตรฐาน WebAuthn
ในเดือนเมษายน 2022 SPC รองรับเฉพาะ Authenticator สำหรับแพลตฟอร์มที่มีการยืนยันผู้ใช้ (UVPA) บนเดสก์ท็อปเท่านั้น ซึ่งหมายความว่าลูกค้าต้องใช้เดสก์ท็อปหรือแล็ปท็อปที่มี Authenticator แบบฝัง เช่น
- ปลดล็อกฟีเจอร์รวมถึง Touch ID ในอุปกรณ์ macOS
- Windows Hello ในอุปกรณ์ Windows
ลงทะเบียนอุปกรณ์
การลงทะเบียนอุปกรณ์ของฝ่ายที่เกี่ยวข้อง (RP) ควรเป็นไปตามกระบวนการยืนยันผู้ใช้ที่เข้มงวดเพียงพอ RP ต้องตรวจสอบว่าลูกค้าได้ลงชื่อเข้าใช้เว็บไซต์โดยใช้การตรวจสอบสิทธิ์ที่รัดกุม เพื่อไม่ให้บัญชีถูกลักลอบใช้ได้อย่างง่ายดาย แต่โปรดระวัง: การขาดความปลอดภัยในกระบวนการนี้จะทำให้ SPC มีความเสี่ยงด้วยเช่นกัน
เมื่อ RP ตรวจสอบสิทธิ์ลูกค้าเรียบร้อยแล้ว ลูกค้าจึงจะลงทะเบียนอุปกรณ์ได้
การตรวจหาฟีเจอร์
ก่อนที่จะขอให้ลูกค้าลงทะเบียนอุปกรณ์ RP ต้องตรวจสอบว่าเบราว์เซอร์รองรับ SPC หรือไม่
const isSecurePaymentConfirmationSupported = async () => {
if (!'PaymentRequest' in window) {
return [false, 'Payment Request API is not supported'];
}
try {
// The data below is the minimum required to create the request and
// check if a payment can be made.
const supportedInstruments = [
{
supportedMethods: "secure-payment-confirmation",
data: {
// RP's hostname as its ID
rpId: 'rp.example',
// A dummy credential ID
credentialIds: [new Uint8Array(1)],
// A dummy challenge
challenge: new Uint8Array(1),
instrument: {
// Non-empty display name string
displayName: ' ',
// Transparent-black pixel.
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==',
},
// A dummy merchant origin
payeeOrigin: 'https://non-existent.example',
}
}
];
const details = {
// Dummy shopping details
total: {label: 'Total', amount: {currency: 'USD', value: '0'}},
};
const request = new PaymentRequest(supportedInstruments, details);
const canMakePayment = await request.canMakePayment();
return [canMakePayment, canMakePayment ? '' : 'SPC is not available'];
} catch (error) {
console.error(error);
return [false, error.message];
}
};
isSecurePaymentConfirmationSupported().then(result => {
const [isSecurePaymentConfirmationSupported, reason] = result;
if (isSecurePaymentConfirmationSupported) {
// Display the payment button that invokes SPC.
} else {
// Fallback to the legacy authentication method.
}
});
ลงทะเบียน Authenticator
หากต้องการลงทะเบียนอุปกรณ์สำหรับ SPC ให้ทำตามขั้นตอนการลงทะเบียน WebAuthn ด้วยข้อกําหนดต่อไปนี้
- ต้องใช้ Authenticator ของแพลตฟอร์ม:
authenticatorSelection.authenticatorAttachment
คือplatform
- ต้องมีการยืนยันผู้ใช้:
authenticatorSelection.userVerification
คือrequired
- ต้องระบุข้อมูลเข้าสู่ระบบที่ค้นพบได้ (คีย์ประจำอยู่):
authenticatorSelection.residentKey
คือrequired
นอกจากนี้ ให้ระบุส่วนขยาย "การชำระเงิน" ด้วย isPayment: true
การระบุส่วนขยายนี้โดยไม่เป็นไปตามข้อกำหนดข้างต้นจะทำให้มีข้อยกเว้น
ข้อควรระวังอื่นๆ มีดังนี้
rp.id
: ชื่อโฮสต์ของ RP ส่วน eTLD+1 ของโดเมนต้องตรงกับที่จดทะเบียน ซึ่งสามารถใช้ในการตรวจสอบสิทธิ์ในโดเมนที่ตรงกับ eTLD+1user.id
: นิพจน์ไบนารีของตัวระบุผู้ใช้ ตัวระบุเดียวกันนี้จะถูกส่งคืนเมื่อการตรวจสอบสิทธิ์สำเร็จ ดังนั้น RP จึงควรให้ตัวระบุผู้ใช้ที่สอดคล้องกันของผู้ถือบัตรexcludeCredentials
: อาร์เรย์ของข้อมูลเข้าสู่ระบบเพื่อให้ RP หลีกเลี่ยงการลงทะเบียน Authenticator เดียวกันได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนการลงทะเบียน WebAuthn ได้ที่ webauthn.guide
ตัวอย่างรหัสลงทะเบียน
const options = {
challenge: new Uint8Array([21...]),
rp: {
id: "rp.example",
name: "Fancy Bank",
},
user: {
id: new Uint8Array([21...]),
name: "jane.doe@example.com",
displayName: "Jane Doe",
},
excludeCredentials: [{
id: new Uint8Array([21...]),
type: 'public-key',
transports: ['internal'],
}, ...],
pubKeyCredParams: [{
type: "public-key",
alg: -7 // "ES256"
}, {
type: "public-key",
alg: -257 // "RS256"
}],
authenticatorSelection: {
userVerification: "required",
residentKey: "required",
authenticatorAttachment: "platform",
},
timeout: 360000, // 6 minutes
// Indicate that this is an SPC credential. This is currently required to
// allow credential creation in an iframe, and so that the browser knows this
// credential relates to SPC.
extensions: {
"payment": {
isPayment: true,
}
}
};
try {
const credential = await navigator.credentials.create({ publicKey: options });
// Send new credential info to server for verification and registration.
} catch (e) {
// No acceptable authenticator or user refused consent. Handle appropriately.
}
หลังจากลงทะเบียนสำเร็จแล้ว RP จะได้รับข้อมูลเข้าสู่ระบบเพื่อส่งไปยังเซิร์ฟเวอร์สำหรับการยืนยัน
ยืนยันการลงทะเบียน
เซิร์ฟเวอร์ RP ต้องยืนยันข้อมูลเข้าสู่ระบบและเก็บคีย์สาธารณะไว้ใช้ในภายหลัง ขั้นตอนการลงทะเบียนฝั่งเซิร์ฟเวอร์จะเหมือนกับการลงทะเบียน WebAuthn ทั่วไป คุณไม่จำเป็นต้องดำเนินการเพิ่มเติมเพื่อให้เป็นไปตาม SPC
การลงทะเบียนจากภายใน iframe
หากผู้ชำระเงินไม่ได้ลงทะเบียนอุปกรณ์กับ RP (ผู้ชำระเงิน) ผู้ชำระเงินสามารถลงทะเบียนในเว็บไซต์ของผู้ขาย หลังจากตรวจสอบสิทธิ์เรียบร้อยแล้วในระหว่างการซื้อ RP สามารถขอให้ผู้ชำระเงินลงทะเบียนอุปกรณ์โดยอ้อมจากภายใน iframe
ผู้ขายหรือผู้เผยแพร่โฆษณาหลักจะต้องอนุญาตการดำเนินการนี้ภายใน iframe อย่างชัดเจนโดยใช้นโยบายสิทธิ์ ผู้ออกใบรับรองทำตามขั้นตอนเดียวกันในการลงทะเบียน Authenticator ภายใน iframe
ผู้ขายสามารถลงทะเบียนได้ 2 วิธี ดังนี้
แท็ก iframe ใน HTML ที่แสดงจากโดเมนผู้ขายจะเพิ่มแอตทริบิวต์
allow
ดังนี้<iframe name="iframe" allow="payment https://spc-rp.glitch.me"></iframe>
ตรวจสอบว่าแอตทริบิวต์
allow
มีpayment
และต้นทาง RP ที่เรียกใช้การลงทะเบียน WebAuthnเอกสารเฟรมหลัก (แสดงจากโดเมนผู้ขาย) จะส่งโดยมีส่วนหัว HTTP ของ
Permissions-Policy
ดังนี้Permissions-Policy: payment=(self "https://spc-rp.glitch.me")
ขั้นตอนถัดไป
เมื่อลงทะเบียนอุปกรณ์กับฝ่ายที่เกี่ยวข้องแล้ว ลูกค้าจะยืนยันการชำระเงินในเว็บไซต์ของผู้ขายได้โดยใช้การยืนยันการชำระเงินที่ปลอดภัย
- ดูวิธีตรวจสอบสิทธิ์ด้วยการยืนยันการชำระเงินที่ปลอดภัย
- อ่านภาพรวมของการยืนยันการชำระเงินที่ปลอดภัย