Registra una conferma di pagamento sicura

Eiji Kitamura

Per utilizzare la conferma di pagamento sicura (SPC) in una transazione, il cliente deve prima registrare un autenticatore. Questa procedura è molto simile a quella di WebAuthn, con l'aggiunta di un'estensione di pagamento.

In questo articolo, le banche emittenti che agiscono in qualità di parti indipendenti possono imparare a implementare la registrazione SPC. L'esperienza utente è ulteriormente spiegata nella panoramica della conferma di pagamento sicuro.

Come funziona la registrazione con la conferma di pagamento sicura?

SPC è creato come estensione dello standard WebAuthn.

A partire da aprile 2022, SPC supporta solo l'autenticazione utente della piattaforma di verifica degli utenti (UVPA) su computer. Ciò significa che il cliente deve utilizzare un computer o un laptop con un autenticatore incorporato, ad esempio:

  • Funzionalità di sblocco, incluso Touch ID, su un dispositivo macOS
  • Windows Hello su un dispositivo Windows

Registra il dispositivo

La registrazione di un dispositivo da parte della parte richiedente deve seguire una procedura di verifica dell'utente sufficientemente efficace. La parte soggetta a limitazioni deve assicurarsi che il cliente abbia eseguito l'accesso al sito web utilizzando un'autenticazione avanzata in modo che l'account non sia facilmente compromesso. Attenzione: la mancanza di sicurezza in questo processo mette a rischio anche le SPC.

Una volta che la parte soggetta a limitazioni ha autenticato correttamente il cliente, il cliente può ora registrare un dispositivo.

Flusso di lavoro tipico della registrazione sul sito web del richiedente

Rilevamento delle funzionalità

Prima di chiedere al cliente di registrare il dispositivo, la parte soggetta a limitazioni deve verificare che il browser supporti 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.
  }
});

Registra un autenticatore

Per registrare un dispositivo per SPC, segui la procedura di registrazione WebAuthn con i seguenti requisiti:

  • L'autenticatore della piattaforma è obbligatorio: authenticatorSelection.authenticatorAttachment è platform.
  • La verifica dell'utente è obbligatoria: authenticatorSelection.userVerification è required.
  • Sono necessarie le credenziali rilevabili (chiavi residenti): authenticatorSelection.residentKey è required.

Inoltre, specifica un'estensione "pagamento" con isPayment: true. Se specifichi questa estensione senza soddisfare i requisiti precedenti, verrà generata un'eccezione

Altre avvertenze:

  • rp.id: il nome host della parte soggetta a limitazioni. La parte eTLD+1 del dominio deve corrispondere a dove viene registrato. Può essere usato per l'autenticazione su domini che corrispondono a eTLD+1.
  • user.id: un'espressione binaria dell'identificatore utente. Lo stesso identificatore verrà restituito dopo l'autenticazione riuscita, quindi la parte soggetta a limitazioni deve fornire un identificatore utente coerente del titolare della carta.
  • excludeCredentials: un array di credenziali in modo che la parte soggetta a limitazioni possa evitare di registrare lo stesso autenticatore.

Per saperne di più sulla procedura di registrazione di WebAuthn, consulta webauthn.guide.

Esempio di codice di registrazione:

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

Dopo una registrazione riuscita, la parte soggetta a limitazioni riceve una credenziale da inviare al server per la verifica.

Verifica la registrazione

Sul server, la parte soggetta a limitazioni deve verificare la credenziale e conservare la chiave pubblica per utilizzarla in seguito. Il processo di registrazione lato server è uguale a una registrazione WebAuthn normale. Non è richiesto nulla di aggiuntivo per rispettare le norme SPC.

Registrazione dall'interno di un iframe

Se il pagatore non ha registrato il proprio dispositivo presso la RP (emittente dei pagamenti), può registrarsi sul sito web del commerciante. Dopo una corretta autenticazione durante un acquisto, la parte soggetta a limitazioni può richiedere al pagatore di registrare il proprio dispositivo indirettamente, dall'interno di un iframe.

Flusso di lavoro della registrazione sul sito web di un commerciante durante il pagamento.

Per farlo, il commerciante o il genitore deve consentire esplicitamente questa azione all'interno di un iframe utilizzando le norme sulle autorizzazioni. L'emittente segue gli stessi passaggi per registrare un autenticatore all'interno di un iframe.

Per consentire la registrazione, i commercianti possono scegliere tra due approcci:

  1. Il tag iframe nel codice HTML pubblicato dal dominio del commerciante aggiunge un attributo allow:

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

    Assicurati che l'attributo allow contenga payment e l'origine RP che richiama la registrazione WebAuthn.

  2. Il documento frame principale (pubblicato dal dominio del commerciante) viene inviato con un'intestazione HTTP Permissions-Policy:

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

Passaggi successivi

Una volta registrato un dispositivo a nome del richiedente, il cliente può confermare i pagamenti sul sito web del commerciante utilizzando la conferma di pagamento sicura.