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'app di autenticazione. Questa procedura è molto simile alla procedura di registrazione di WebAuthn, con l'aggiunta di un'estensione di pagamento.

In questo articolo, le banche emittenti che agiscono come parti attendibili (RP) possono scoprire come implementare la registrazione SPC. L'esperienza utente è spiegata ulteriormente nella panoramica di Conferma di pagamento sicura.

Come funziona la registrazione alla conferma di pagamento sicura?

SPC è stato creato come estensione dello standard WebAuthn.

A partire da aprile 2022, SPC supporta solo gli autenticatori di piattaforme di verifica dell'utente (UVPA) su computer. Ciò significa che il cliente deve utilizzare un computer desktop o un laptop con un'app di autenticazione integrata, ad esempio:

  • Sbloccare il dispositivo con Touch ID su un dispositivo macOS
  • Windows Hello su un dispositivo Windows

Registra il dispositivo

La registrazione di un dispositivo da parte della terza parte attendibile (RP) deve seguire una procedura di verifica dell'utente sufficientemente efficace. L'RP deve assicurarsi che il cliente abbia eseguito l'accesso al sito web utilizzando un'autenticazione avanzata in modo che l'account non venga facilmente compromesso. Fai attenzione: la mancanza di sicurezza in questo processo mette a rischio anche la pubblicità adattabile agli scenari.

Una volta che l'RP ha autenticato il cliente, quest'ultimo può registrare un dispositivo.

Flusso di lavoro di registrazione tipico sul sito web della terza parte attendibile

Rilevamento di funzionalità

Prima di chiedere al cliente di registrare il dispositivo, l'RP deve verificare che il browser supporti la funzionalità 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'app di autenticazione

Per registrare un dispositivo per la piattaforma di condivisione sicura, 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.
  • Le credenziali rilevabili (chiavi residenti) sono obbligatorie: authenticatorSelection.residentKey è required.

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

Altri aspetti da considerare:

  • rp.id: il nome host della RP. La parte eTLD+1 del dominio deve corrispondere al luogo in cui viene registrato. Può essere utilizzato per l'autenticazione sui domini corrispondenti a eTLD+1.
  • user.id: un'espressione binaria dell'identificatore utente. Lo stesso identificatore verrà restituito al termine dell'autenticazione, pertanto l'RP deve fornire un identificatore utente coerente del titolare della carta.
  • excludeCredentials: un array di credenziali per consentire all'RP di evitare di registrare lo stesso authenticator.

Per saperne di più sulla procedura di registrazione 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, l'RP riceve una credenziale da inviare al server per la verifica.

Verifica la registrazione

Sul server, l'RP deve verificare la credenziale e conservare la chiave pubblica per un uso successivo. La procedura di registrazione lato server è la stessa di una normale registrazione WebAuthn. Non è richiesto altro per rispettare lo SPC.

Registrazione da un iframe

Se l'utente che effettua il pagamento non ha registrato il proprio dispositivo presso l'RP (emittente del pagamento), può registrarsi sul sito web del commerciante. Dopo un'autenticazione riuscita durante un acquisto, l'RP può richiedere al pagatore di registrare il proprio dispositivo indirettamente, all'interno di un iframe.

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

A tal fine, il commerciante o il genitore deve consentire esplicitamente questa azione all'interno di un frame utilizzando le Norme relative alle autorizzazioni. L'emittente segue gli stessa procedura per registrare un'app di autenticazione 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 registrato un dispositivo presso la terza parte attendibile, il cliente può confermare i pagamenti sul sito web del commerciante utilizzando la conferma del pagamento sicuro.