註冊安全付款確認

Eiji Kitamura

如要在交易中使用安全付款確認 (SPC)，客戶必須先註冊驗證器。這項程序與 WebAuthn 註冊程序非常類似，並新增了付款擴充功能。

在本文中，做為依賴方 (RP) 的發卡銀行可以瞭解如何執行 SPC 註冊。如要進一步瞭解使用者體驗，請參閱安全付款確認總覽。

安全付款確認註冊如何運作？

SPC 是 WebAuthn 標準的擴充功能。

自 2022 年 4 月起，SPC 只支援電腦使用者驗證平台 Authenticator (UVPA)。也就是說，客戶必須使用已嵌入驗證器的桌上型電腦或筆記型電腦，例如：

  • 解鎖功能，包括 macOS 裝置的 Touch ID
  • Windows 裝置上的 Windows Hello

註冊裝置

依賴方 (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：使用者 ID 的二進位運算式。成功驗證後，系統會傳回相同的 ID，因此 RP 應提供一致的持卡人 ID。
  • 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 中註冊驗證器的相同步驟。

商家可採用以下兩種方式允許註冊：

  1. 商家網域所放送的 HTML 中的 iframe 標記會新增 allow 屬性：

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

    請確認 allow 屬性包含 payment 和叫用 WebAuthn 註冊的 RP 來源。

  2. 系統會一併傳送上層頁框文件 (從商家網域提供) 和 Permissions-Policy HTTP 標頭：

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

後續步驟

裝置向依賴方註冊後，客戶就能使用「安全付款確認」在商家網站上確認付款。