Xác thực bằng xác nhận thanh toán an toàn

Người bán có thể sử dụng quy trình Xác nhận thanh toán an toàn (SPC) trong quy trình xác thực khách hàng nghiêm ngặt (SCA) cho một thẻ tín dụng hoặc tài khoản ngân hàng nhất định. WebAuthn thực hiện xác thực (thường là thông qua hệ thống nhận dạng sinh trắc học). WebAuthn phải được đăng ký trước. Bạn có thể tìm hiểu về điều này trong phần Đăng ký xác nhận thanh toán an toàn.

Cách hoạt động của quy trình triển khai thông thường

Cách sử dụng SPC phổ biến nhất là khi khách hàng mua hàng trên trang web của người bán và ngân hàng hoặc công ty phát hành thẻ tín dụng yêu cầu xác thực người thanh toán.

Hãy cùng tìm hiểu quy trình xác thực:

1. Khách hàng cung cấp thông tin thanh toán của họ (chẳng hạn như thông tin thẻ tín dụng) cho người bán.
2. Người bán sẽ hỏi nhà phát hành hoặc ngân hàng tương ứng của thông tin thanh toán (bên xác thực hoặc RP) xem người thanh toán có cần quy trình xác thực riêng hay không. Chẳng hạn như quá trình trao đổi này có thể xảy ra với EMV® 3-D Secure.
   • Nếu RP muốn người bán sử dụng SPC và nếu người dùng đã đăng ký trước đó, thì RP sẽ phản hồi bằng danh sách mã xác thực do người thanh toán đăng ký và một thử thách xác thực.
   • Nếu không cần xác thực, người bán có thể tiếp tục hoàn tất giao dịch.
3. Nếu cần xác thực, người bán xác định xem trình duyệt có hỗ trợ SPC hay không.
   • Nếu trình duyệt không hỗ trợ SPC, hãy tiếp tục quy trình xác thực hiện có.
4. Người bán gọi SPC. Trình duyệt sẽ hiển thị hộp thoại xác nhận.
   • Nếu không có mã thông tin xác thực nào được truyền từ RP, hãy quay lại quy trình xác thực hiện có. Sau khi xác thực thành công, hãy cân nhắc sử dụng tính năng đăng ký SPC để đơn giản hoá các quy trình xác thực trong tương lai.
5. Người dùng xác nhận và xác thực số tiền cũng như đích đến của khoản thanh toán bằng cách mở khoá thiết bị.
6. Người bán sẽ nhận được thông tin xác thực từ quá trình xác thực.
7. Bên bị hạn chế nhận được thông tin xác thực từ người bán và xác minh tính xác thực của họ.
8. Bên bị hạn chế gửi kết quả xác minh cho người bán.
9. Người bán sẽ hiển thị cho người dùng một thông báo cho biết giao dịch thanh toán đã thành công hay không.

Phát hiện tính năng

Để phát hiện xem trình duyệt có hỗ trợ SPC hay không, bạn có thể gửi một lệnh gọi giả đến canMakePayment().

Sao chép và dán mã sau đây để phát hiện SPC trên trang web của người bán.

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.
  }
});

Xác thực người dùng

Để xác thực người dùng, hãy gọi phương thức PaymentRequest.show() bằng các tham số secure-payment-confirmation và WebAuthn:

• PublicKeyCredentialRequestOptions
• Các thông số thanh toán cụ thể khác trên nền tảng của người bán.

Dưới đây là các thông số bạn cần cung cấp cho thuộc tính data của phương thức thanh toán, SecurePaymentConfirmationRequest.

Hãy xem mã ví dụ sau:

// After confirming SPC is available on this browser via a feature detection,
// fetch the request options cross-origin from the RP server.
const options = fetchFromServer('https://rp.example/spc-auth-request');
const { credentialIds, challenge } = options;

const request = new PaymentRequest([{
  // Specify `secure-payment-confirmation` as payment method.
  supportedMethods: "secure-payment-confirmation",
  data: {
    // The RP ID
    rpId: 'rp.example',

    // List of credential IDs obtained from the RP server.
    credentialIds,

    // The challenge is also obtained from the RP server.
    challenge,

    // A display name and an icon that represent the payment instrument.
    instrument: {
      displayName: "Fancy Card ****1234",
      icon: "https://rp.example/card-art.png",
      iconMustBeShown: false
    },

    // The origin of the payee (merchant)
    payeeOrigin: "https://merchant.example",

    // The number of milliseconds to timeout.
    timeout: 360000,  // 6 minutes
  }
}], {
  // Payment details.
  total: {
    label: "Total",
    amount: {
      currency: "USD",
      value: "5.00",
    },
  },
});

try {
  const response = await request.show();

  // response.details is a PublicKeyCredential, with a clientDataJSON that
  // contains the transaction data for verification by the issuing bank.
  // Make sure to serialize the binary part of the credential before
  // transferring to the server.
  const result = fetchFromServer('https://rp.example/spc-auth-response', response.details);
  if (result.success) {
    await response.complete('success');
  } else {
    await response.complete('fail');
  }
} catch (err) {
  // SPC cannot be used; merchant should fallback to traditional flows
  console.error(err);
}

Hàm .show() dẫn đến một đối tượng PaymentResponse ngoại trừ details chứa thông tin xác thực khoá công khai với clientDataJSON chứa dữ liệu giao dịch (payment) để xác minh bởi RP.

Thông tin đăng nhập thu được phải được chuyển từ nhiều nguồn gốc sang bên bị hạn chế và được xác minh.

Cách bên bị hạn chế xác minh giao dịch

Xác minh dữ liệu giao dịch tại máy chủ RP là bước quan trọng nhất trong quy trình thanh toán.

Để xác minh dữ liệu giao dịch, RP có thể tuân theo quy trình xác minh xác nhận xác thực của WebAuthn. Ngoài ra, họ cần xác minh payment.

Ví dụ về tải trọng của clientDataJSON:

{
  "type":"payment.get",
  "challenge":"SAxYy64IvwWpoqpr8JV1CVLHDNLKXlxbtPv4Xg3cnoc",
  "origin":"https://spc-merchant.glitch.me",
  "crossOrigin":false,
  "payment":{
    "rp":"spc-rp.glitch.me",
    "topOrigin":"https://spc-merchant.glitch.me",
    "payeeOrigin":"https://spc-merchant.glitch.me",
    "total":{
      "value":"15.00",
      "currency":"USD"
    },
    "instrument":{
      "icon":"https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422",
      "displayName":"Fancy Card 825809751248"
    }
  }
}

• rp khớp với nguồn gốc của RP.
• topOrigin khớp với nguồn gốc cấp cao nhất mà RP dự kiến (nguồn gốc của người bán trong ví dụ trên).
• payeeOrigin khớp với nguồn gốc của người nhận thanh toán và đáng lẽ đã được hiển thị cho người dùng.
• total khớp với số tiền giao dịch đáng lẽ sẽ hiển thị cho người dùng.
• instrument khớp với thông tin về phương thức thanh toán mà người dùng sẽ thấy.

const clientData = base64url.decode(response.clientDataJSON);
const clientDataJSON = JSON.parse(clientData);

if (!clientDataJSON.payment) {
  throw 'The credential does not contain payment payload.';
}

const payment = clientDataJSON.payment;
if (payment.rp !== expectedRPID ||
    payment.topOrigin !== expectedOrigin ||
    payment.payeeOrigin !== expectedOrigin ||
    payment.total.value !== '15.00' ||
    payment.total.currency !== 'USD') {
  throw 'Malformed payment information.';
}

Sau khi vượt qua mọi tiêu chí xác minh, RP có thể cho người bán biết rằng giao dịch thành công.

Các bước tiếp theo

• Đọc tổng quan về Xác nhận thanh toán an toàn
• Tìm hiểu về đăng ký bằng Xác nhận thanh toán an toàn