Registreer een veilige betalingsbevestiging

Eiji Kitamura

Om Secure Payment Confirmation (SPC) in een transactie te gebruiken, moet de klant eerst een authenticator registreren. Dit proces lijkt sterk op het WebAuthn-registratieproces, met de toevoeging van een betalingsextensie.

In dit artikel kunnen uitgevende banken die optreden als vertrouwende partijen (RP's) leren hoe ze SPC-registratie kunnen implementeren. De gebruikerservaring wordt verder toegelicht in het overzicht van Veilige Betaalbevestiging .

Hoe werkt de registratie via Veilige Betalingsbevestiging?

SPC is gebouwd als een uitbreiding op de WebAuthn-standaard.

Vanaf april 2022 ondersteunt SPC alleen User Verifying Platform Authenticators (UVPA) op desktop. Dit betekent dat de klant een desktop of laptop nodig heeft met een ingebouwde authenticator zoals:

  • Ontgrendelingsfunctie inclusief Touch ID op een macOS-apparaat
  • Windows Hello op een Windows-apparaat

Registreer het apparaat

De registratie van een apparaat door de Relying Party (RP's) moet een voldoende sterk gebruikersverificatieproces volgen. De RP moet ervoor zorgen dat de klant zich met sterke authenticatie op de website heeft aangemeld, zodat het account niet gemakkelijk kan worden gekaapt. Wees voorzichtig: een gebrek aan veiligheid in dit proces brengt ook SPC in gevaar.

Zodra de RP de klant succesvol heeft geverifieerd, kan de klant nu een apparaat registreren.

Typische registratieworkflow op de website van de vertrouwende partij

Functiedetectie

Voordat de klant wordt gevraagd het apparaat te registreren, moet de RP controleren of de browser SPC ondersteunt.

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

Registreer een authenticator

Om een ​​apparaat voor SPC te registreren, volgt u het WebAuthn-registratieproces met de volgende vereisten:

  • De platformauthenticator is vereist: authenticatorSelection.authenticatorAttachment is platform .
  • De gebruikersverificatie is vereist: authenticatorSelection.userVerification is required .
  • Er zijn detecteerbare inloggegevens (residente sleutels) vereist: authenticatorSelection.residentKey is required .

Geef bovendien een "betalingsextensie" op met isPayment: true . Als u deze extensie opgeeft zonder aan de bovenstaande vereisten te voldoen, wordt er een uitzondering gegenereerd

Enkele andere kanttekeningen:

  • rp.id : de hostnaam van de RP. Het eTLD+1- gedeelte van het domein moet overeenkomen met waar het wordt geregistreerd. Het kan worden gebruikt voor authenticatie op domeinen die overeenkomen met eTLD+1.
  • user.id : een binaire uitdrukking van de gebruikers-ID. Bij succesvolle authenticatie wordt dezelfde identificatie geretourneerd, dus de RP moet een consistente gebruikersidentificatie van de kaarthouder verstrekken.
  • excludeCredentials : een reeks referenties zodat de RP kan voorkomen dat dezelfde authenticator wordt geregistreerd.

Voor meer informatie over het WebAuthn-registratieproces raadpleegt u webauthn.guide .

Voorbeeld registratiecode:

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

Na een succesvolle registratie ontvangt de RP een inloggegevens die ter verificatie naar de server moet worden gestuurd.

Controleer de registratie

Op de server moet de RP de inloggegevens verifiëren en de openbare sleutel bewaren voor later gebruik. Het registratieproces op de server is hetzelfde als bij een gewone WebAuthn-registratie . Er is niets extra's vereist om aan de SPC te voldoen.

Registratie vanuit een iframe

Als de betaler zijn apparaat niet heeft geregistreerd bij de RP (betalingsverstrekker), kan de betaler zich registreren op de website van de verkoper. Na een succesvolle authenticatie tijdens een aankoop kan de RP de betaler verzoeken zijn apparaat indirect, vanuit een iframe, te registreren.

Workflow van registratie op een verkoperswebsite tijdens betaling.

Om dit te doen, moet de verkoper of ouder deze actie expliciet toestaan ​​binnen een iframe met behulp van het Permissiebeleid . De uitgever volgt dezelfde stappen om een ​​authenticator binnen een iframe te registreren .

Er zijn twee manieren waarop de verkoper registratie kan toestaan:

  1. De iframe-tag in de HTML die wordt weergegeven vanuit het verkopersdomein voegt een allow attribuut toe:

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

    Zorg ervoor dat het allow kenmerk payment bevat en de RP-oorsprong die WebAuthn-registratie aanroept.

  2. Het bovenliggende framedocument (geleverd vanuit het verkopersdomein) wordt verzonden met een Permissions-Policy HTTP-header:

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

Volgende stappen

Zodra een apparaat bij de vertrouwende partij is geregistreerd, kan de klant betalingen op de website van de verkoper bevestigen met behulp van Veilige betalingsbevestiging.