ลงทะเบียนการยืนยันการชำระเงินที่ปลอดภัย

Eiji Kitamura

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

บทความนี้จะอธิบายวิธีใช้การจดทะเบียน SPC สำหรับธนาคารผู้ออกบัตรที่ทำหน้าที่เป็นบุคคลที่เชื่อถือ (RP) ประสบการณ์ของผู้ใช้จะอธิบายเพิ่มเติมในภาพรวมเกี่ยวกับการยืนยันการชำระเงินที่ปลอดภัย

การลงทะเบียนการยืนยันการชำระเงินที่ปลอดภัยทำงานอย่างไร

SPC สร้างขึ้นเพื่อขยายมาตรฐาน WebAuthn

ตั้งแต่เดือนเมษายน 2022 เป็นต้นไป SPC รองรับเฉพาะโปรแกรมตรวจสอบสิทธิ์แพลตฟอร์มที่ยืนยันตัวตนผู้ใช้ (UVPA) ในเดสก์ท็อปเท่านั้น ซึ่งหมายความว่าลูกค้าต้องใช้เดสก์ท็อปหรือแล็ปท็อปที่มีโปรแกรมตรวจสอบสิทธิ์แบบฝัง เช่น

  • ฟีเจอร์ปลดล็อก รวมถึง 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.
  }
});

ลงทะเบียนเครื่องมือตรวจสอบสิทธิ์

หากต้องการลงทะเบียนอุปกรณ์สำหรับ SPC ให้ทำตามขั้นตอนการลงทะเบียน WebAuthn โดยมีคุณสมบัติตามข้อกำหนดต่อไปนี้

  • ต้องใช้โปรแกรมตรวจสอบสิทธิ์ของแพลตฟอร์ม โดย authenticatorSelection.authenticatorAttachment คือ platform
  • ต้องมีการยืนยันผู้ใช้ โดย authenticatorSelection.userVerification คือ required
  • ต้องมีข้อมูลเข้าสู่ระบบที่ค้นพบได้ (คีย์ที่ใช้ประจำ) ดังนี้ authenticatorSelection.residentKey คือ required

นอกจากนี้ ให้ระบุชิ้นงาน "การชำระเงิน" ด้วย isPayment: true การระบุส่วนขยายนี้โดยไม่เป็นไปตามข้อกำหนดข้างต้นจะทำให้เกิดข้อยกเว้น

ข้อควรระวังอื่นๆ

  • rp.id: ชื่อโฮสต์ของ RP ส่วน eTLD+1 ของโดเมนต้องตรงกับที่จดทะเบียน ซึ่งสามารถใช้สำหรับการตรวจสอบสิทธิ์ในโดเมนที่ตรงกับ eTLD+1
  • user.id: นิพจน์ไบนารีของตัวระบุผู้ใช้ ระบบจะแสดงตัวระบุเดียวกันเมื่อการตรวจสอบสิทธิ์สําเร็จ ดังนั้น RP ควรระบุตัวระบุผู้ใช้ที่สอดคล้องกับผู้ถือบัตร
  • excludeCredentials: อาร์เรย์ของข้อมูลเข้าสู่ระบบเพื่อให้ RP หลีกเลี่ยงการลงทะเบียนโปรแกรมตรวจสอบสิทธิ์เดียวกัน

ดูข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนการลงทะเบียน 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 โดยใช้นโยบายสิทธิ์ ผู้ออกบัตรทำตามขั้นตอนเดียวกันในการลงทะเบียนโปรแกรมตรวจสอบสิทธิ์ภายใน iframe

ผู้ขายอนุญาตให้ลงทะเบียนได้ 2 วิธีดังนี้

  1. แท็ก iframe ใน HTML ที่แสดงจากโดเมนของผู้ขายจะเพิ่มแอตทริบิวต์ allow ดังนี้

    <iframe name="iframe" allow="payment https://spc-rp.glitch.me"></iframe>

    ตรวจสอบว่าแอตทริบิวต์ allow มี payment และต้นทาง RP ที่เรียกใช้การลงทะเบียน WebAuthn

  2. ระบบจะส่งเอกสารเฟรมหลัก (แสดงจากโดเมนของผู้ขาย) พร้อมส่วนหัว HTTP Permissions-Policy ดังนี้

    Permissions-Policy: payment=(self "https://spc-rp.glitch.me")

ขั้นตอนถัดไป

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