Autenticazione con conferma di pagamento sicura

I commercianti possono utilizzare la conferma di pagamento sicura (SPC, Secure Payment Confirmation) nell'ambito di un processo di autenticazione forte del cliente (SCA) per una determinata carta di credito o conto bancario. WebAuthn esegue l'autenticazione (spesso tramite la biometria). WebAuthn deve essere registrato in anticipo, come spiegato nella sezione Registrare una conferma di pagamento sicura.

Come funziona una tipica implementazione

L'SPC viene utilizzato più di frequente quando un cliente effettua un acquisto sul e l'emittente della carta di credito o la banca richiedono l'autenticazione del pagatore.

Flusso di lavoro di autenticazione.

Esaminiamo il flusso di autenticazione:

  1. Un cliente fornisce le proprie credenziali di pagamento, ad esempio la carta di credito informazioni) al commerciante.
  2. Il commerciante chiede l'emittente o la banca corrispondenti delle credenziali di pagamento (parte proprietaria o parte soggetta a limitazioni) se il pagatore ha bisogno di un'autenticazione separata. Questo può avvenire, ad esempio, con EMV® 3-D Secure.
    • Se la parte soggetta a limitazioni desidera che il commerciante utilizzi l'SPC e se l'utente ha precedentemente registrati, la parte soggetta a limitazioni risponde con un elenco di ID credenziali registrati chi paga e una sfida.
    • Se non è necessaria l'autenticazione, il commerciante può continuare completare la transazione.
  3. Se è necessaria un'autenticazione, il commerciante stabilisce se il browser supporta SPC.
    • Se il browser non supporta SPC, procedi con lo script esistente non è un flusso di autenticazione.
  4. Il commerciante richiama l'SPC. Il browser mostra una finestra di dialogo di conferma.
    • Se non sono presenti ID credenziali trasmessi dalla parte soggetta a limitazioni, utilizza il flusso di autenticazione esistente. Dopo un'autenticazione riuscita, valuta la possibilità di utilizzare la registrazione SPC per semplificare le autenticazioni future.
  5. L'utente conferma e autentica l'importo e la destinazione del sbloccando il dispositivo.
  6. Il commerciante riceve una credenziale dall'autenticazione.
  7. La parte soggetta a limitazioni riceve la qualifica dal commerciante e verifica la sua autenticità.
  8. La parte soggetta a limitazioni invia i risultati della verifica al commerciante.
  9. Il commerciante mostra all'utente un messaggio per indicare se il pagamento è stato effettuato hanno successo o meno.
di Gemini Advanced.

Rilevamento delle caratteristiche

Per rilevare se il servizio SPC è supportato nel browser, puoi inviare una chiamata falsa a canMakePayment()

Copia e incolla il codice seguente per rilevare l'SPC sul sito web di un commerciante.

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

Autentica l'utente

Per autenticare l'utente, richiama il metodo PaymentRequest.show() con Parametri secure-payment-confirmation e WebAuthn:

Ecco i parametri da fornire alla proprietà data del metodo di pagamento, SecurePaymentConfirmationRequest.

Parametro Descrizione
rpId Il nome host dell'origine RP come ID RP.
challenge Una verifica casuale che impedisce agli attacchi di ripetizione.
credentialIds Un array di ID credenziali. Nell'autenticazione di WebAuthn, la proprietà allowCredentials accetta un array di oggetti PublicKeyCredentialDescriptor, ma in SPC passi solo un elenco di ID credenziali.
payeeName (facoltativo) Nome del beneficiario.
payeeOrigin L'origine del beneficiario. Nello scenario sopra menzionato, si tratta dell'origine del commerciante.
instrument Una stringa per displayName e un URL per icon che punta a una risorsa immagine. Un valore booleano facoltativo (valore predefinito è true) per iconMustBeShown che specifica un'icona che deve essere recuperato e mostrato correttamente affinché la richiesta vada a buon fine.
timeout Timeout per firmare la transazione in millisecondi
extensions Estensioni aggiunte alla chiamata WebAuthn. Non è necessario specificare il "pagamento" tu stesso.

Dai un'occhiata a questo codice di esempio:

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

La funzione .show() genera un PaymentResponse ad eccezione del fatto che details contiene una credenziale di chiave pubblica con un clientDataJSON che contiene i dati delle transazioni (payment) per la verifica da parte della parte soggetta a limitazioni.

La credenziale risultante deve essere trasferita multiorigine alla parte soggetta a limitazioni e verificati.

In che modo la parte soggetta a limitazioni verifica la transazione

La verifica dei dati delle transazioni sul server RP è il passaggio più importante la procedura di pagamento.

Per verificare i dati della transazione, la parte soggetta a limitazioni può seguire la procedura di verifica dell'asserzione di autenticazione di WebAuthn. Inoltre, devono verifica il payment.

Un esempio di payload di 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 corrisponde all'origine della parte soggetta a limitazioni.
  • Il valore topOrigin corrisponde all'origine di primo livello prevista dalla parte soggetta a limitazioni (il valore dell'origine del commerciante nell'esempio precedente).
  • Il payeeOrigin corrisponde all'origine del beneficiario che avrebbe dovuto essere mostrati all'utente.
  • Il total corrisponde all'importo della transazione che avrebbe dovuto essere visualizzato all'utente.
  • Il instrument corrisponde ai dettagli dello strumento di pagamento che dovrebbero essere mostrati all'utente.
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.';
}

Una volta superati tutti i criteri di verifica, la parte soggetta a limitazioni può indicare al commerciante che la transazione è andata a buon fine.

Passaggi successivi