Registra una conferma di pagamento sicura

Eiji Kitamura

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

In questo articolo, le banche emittenti che agiscono in qualità di parti vincolanti (RP) possono scoprire come per implementare la registrazione SPC. L'esperienza utente è spiegata ulteriormente nel panoramica della Conferma di pagamento sicura.

Come funziona la registrazione alla conferma del pagamento sicuro?

SPC è realizzato come estensione dello standard WebAuthn.

A partire da aprile 2022, SPC supporta solo gli utenti che eseguono la verifica della piattaforma Authenticator (UVPA) da computer. Ciò significa che il cliente deve utilizzare un computer desktop 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 coinvolta deve seguire una una procedura di verifica dell'utente sufficientemente efficace. La parte soggetta a limitazioni deve assicurarsi che il cliente ha eseguito l'accesso al sito web utilizzando l'autenticazione avanzata, in modo che non sia facilmente compromesso. Attenzione: mancanza di sicurezza in questo processo mette a rischio anche SPC.

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

Flusso di lavoro di registrazione tipico sul sito web della parte coinvolta

Rilevamento delle caratteristiche

Prima di chiedere al cliente di registrare il dispositivo, la parte soggetta a limitazioni deve verificare che le supporta 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 quanto segue requisiti:

  • L'autenticatore della piattaforma è obbligatorio: authenticatorSelection.authenticatorAttachment è platform.
  • La verifica dell'utente è obbligatoria: authenticatorSelection.userVerification è required.
  • Le credenziali rilevabili (chiavi residenti) sono obbligatorie: authenticatorSelection.residentKey è required.
di Gemini Advanced.

Inoltre, specifica un "pagamento" con isPayment: true. Specificare per questa estensione senza soddisfare i requisiti sopra indicati verrà generata un'eccezione

Altre avvertenze:

  • rp.id: il nome host della parte soggetta a limitazioni. L'eTLD+1 della sezione il dominio deve corrispondere a quello in cui è stato registrato. Può essere usata per nei domini corrispondenti a eTLD+1.
  • user.id: un'espressione binaria dell'identificatore utente. Lo stesso identificatore verrà restituito dopo l'autenticazione riuscita, pertanto la parte soggetta a limitazioni dovrebbe fornire una dell'utente coerente del titolare della carta.
  • excludeCredentials: un array di credenziali che la parte soggetta a limitazioni può evitare la registrazione dello stesso autenticatore.

Per ulteriori informazioni sul processo 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 per usarlo in un secondo momento. La procedura di registrazione lato server è la stessa di una normale registrazione WebAuthn. Niente per la conformità con SPC.

Registrazione dall'interno di un iframe

Se il pagatore non ha registrato il proprio dispositivo presso la parte soggetta a limitazioni (emittente del pagamento), il pagatore può registrarsi sul sito web del commerciante. Dopo un'autenticazione riuscita durante un acquisto, la parte soggetta a limitazioni può chiedere 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 l'account principale devono autorizzare esplicitamente questa azione all'interno di un utilizzando le norme relative alle autorizzazioni. L'emittente segue gli stessi passaggi per registrare un autenticatore all'interno di un iframe.

Il commerciante può consentire la registrazione in due modi:

  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 del 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 che il dispositivo è stato registrato per il partner, il cliente può confermare i pagamenti sul sito web del commerciante utilizzando la conferma di pagamento sicura.