MDN项目指南：深入理解Secure Payment Confirmation支付认证技术

什么是Secure Payment Confirmation

Secure Payment Confirmation（SPC）是一项基于Payment Request API和Web Authentication API构建的支付安全技术，它通过在支付流程中实施强客户认证（Strong Customer Authentication, SCA）来有效防范在线支付欺诈。这项技术特别适用于需要高安全级别的支付场景，如大额交易或受监管要求的支付操作。

技术核心原理

SPC的核心创新在于将三个关键要素有机结合：

1. 强认证机制：基于Web Authentication标准，支持生物识别（指纹/面部识别）、安全密钥等现代认证方式
2. 交易确认可视化：浏览器原生界面展示交易关键信息（金额、收款方等），防止中间人篡改
3. 可验证的支付授权：生成包含交易详情的加密签名，作为用户明确授权的法律证据

典型应用场景

SPC特别适合以下支付场景：

• 高价值商品交易
• 受PSD2等法规要求的强认证场景
• 需要降低购物车放弃率的电商平台
• 银行和支付服务提供商的认证流程

技术实现详解

1. 支付凭证注册流程

在用户首次使用时，需要通过Web Authentication API注册支付凭证：

const publicKey = {
  // 服务器生成的随机挑战值
  challenge: new Uint8Array([...]), 
  // 依赖方(银行/支付机构)信息
  rp: { name: "示例银行" },
  // 用户信息
  user: {
    id: new Uint8Array([...]),
    name: "user@example.com",
    displayName: "王小明"
  },
  // 支持的加密算法
  pubKeyCredParams: [{ type: "public-key", alg: -7 }],
  // 认证器要求
  authenticatorSelection: {
    userVerification: "required",
    residentKey: "required"
  },
  // 支付扩展标识
  extensions: { payment: { isPayment: true } }
};

navigator.credentials.create({ publicKey })
  .then(handleSuccess)
  .catch(handleError);

2. 跨域iframe中的凭证创建

SPC允许在跨域iframe中创建凭证，这对支付生态中的多方协作特别重要：

<!-- 商户网站嵌入支付服务商的iframe -->
<iframe src="https://payment-provider.com" allow="payment"></iframe>

3. 支付认证流程

实际支付时的认证流程示例：

const request = new PaymentRequest([{
  supportedMethods: "secure-payment-confirmation",
  data: {
    credentialIds: [/* 已注册的凭证ID数组 */],
    challenge: new Uint8Array([/* 服务器挑战值 */]),
    instrument: {
      displayName: "信用卡 ****5678",
      icon: "https://bank.com/card.png"
    },
    payeeOrigin: "https://merchant.com",
    timeout: 60000
  }
}], {
  total: {
    label: "总计",
    amount: { currency: "CNY", value: "599.00" }
  }
});

try {
  const canPay = await request.canMakePayment();
  const response = await request.show();
  // 处理支付结果
  await response.complete("success");
  // 将认证结果发送至银行验证
} catch (error) {
  // 处理错误或回退到传统支付流程
}

安全特性解析

SPC通过以下机制确保支付安全：

1. 防篡改交易信息：浏览器直接渲染交易详情，JavaScript无法修改
2. 端到端加密：使用公钥加密技术保护认证数据
3. 认证器绑定：支付凭证与特定设备绑定
4. 用户明确授权：每次支付都需要用户主动确认

浏览器兼容性考虑

目前主流现代浏览器均已支持SPC技术，但在实际开发中仍需注意：

• 检测API可用性
• 提供传统支付方式的回退方案
• 不同浏览器可能在UI展现上有细微差异

最佳实践建议

1. 渐进式增强：先检测SPC可用性，不可用时回退传统流程
2. 用户体验优化：合理设置超时时间（建议30-120秒）
3. 错误处理：妥善处理各种错误场景（用户取消、超时等）
4. 性能监控：记录SPC流程各阶段耗时，持续优化

总结

Secure Payment Confirmation为在线支付提供了一种既安全又便捷的认证解决方案。通过结合Web Authentication的强大安全特性和Payment Request API的标准化支付流程，SPC能够有效平衡安全性与用户体验的需求。对于需要符合强客户认证要求的支付场景，SPC无疑是一个值得考虑的技术选择。