Sichere Zahlungsbestätigung einrichten

Eiji Kitamura

Wenn der Kunde die sichere Zahlungsbestätigung (Secure Payment Confirmation, SPC) bei einer Transaktion verwenden möchte, muss er zuerst einen Authenticator registrieren. Dieser Vorgang ähnelt dem WebAuthn-Registrierungsprozess, verfügt jedoch über eine Zahlungserweiterung.

In diesem Artikel erfahren ausstellende Banken, die als vertrauende Seiten (RPs) fungieren, wie sie die Registrierung von SPCs implementieren. Weitere Informationen zur Nutzerfreundlichkeit finden Sie in der Übersicht über die Bestätigung sicherer Zahlungen.

Wie funktioniert die Registrierung für die Bestätigung sicherer Zahlungen?

SPC ist eine Erweiterung des WebAuthn-Standards.

Seit April 2022 werden von SPC nur noch UVPAs (User Verifying Platform Authenticators) auf dem Computer unterstützt. Der Kunde muss also einen Desktop- oder Laptop mit einem integrierten Authenticator verwenden, z. B.:

  • Entsperrfunktion mit Touch ID auf einem macOS-Gerät
  • Windows Hello auf einem Windows-Gerät

Gerät registrieren

Die Registrierung eines Geräts durch die vertrauende Partei sollte einem ausreichend starken Nutzerverifizierungsprozess folgen. Der RP muss dafür sorgen, dass sich der Kunde mit einer starken Authentifizierung auf der Website angemeldet hat, damit das Konto nicht leicht gehackt werden kann. Achtung: Ein Mangel an Sicherheit bei diesem Prozess gefährdet auch die SPC.

Sobald der RP den Kunden erfolgreich authentifiziert hat, kann der Kunde ein Gerät registrieren.

Typischer Registrierungsablauf auf der Website der vertrauenden Partei

Funktionserkennung

Bevor der Kundenservicemitarbeiter den Kunden bittet, das Gerät zu registrieren, muss er prüfen, ob der Browser SPC unterstützt.

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

Authenticator registrieren

Wenn Sie ein Gerät für die sichere Passwörterstellung registrieren möchten, folgen Sie dem Registrierungsprozess für WebAuthn. Beachten Sie dabei die folgenden Anforderungen:

  • Der Plattform-Authenticator ist erforderlich: authenticatorSelection.authenticatorAttachment ist platform.
  • Die Nutzerbestätigung ist erforderlich: authenticatorSelection.userVerification ist required.
  • Erkannte Anmeldedaten (residente Schlüssel) sind erforderlich: authenticatorSelection.residentKey ist required.

Geben Sie außerdem mit isPayment: true eine „Zahlung“-Erweiterung an. Wenn Sie diese Erweiterung angeben, ohne die oben genannten Anforderungen zu erfüllen, wird eine Ausnahme ausgelöst.

Weitere Hinweise:

  • rp.id: der Hostname des RP. Der Teil eTLD+1 der Domain muss mit dem Land übereinstimmen, in dem sie registriert wird. Sie kann für die Authentifizierung in Domains verwendet werden, die mit eTLD+1 übereinstimmen.
  • user.id: ein Binärausdruck der Nutzer-ID. Nach erfolgreicher Authentifizierung wird dieselbe Kennung zurückgegeben. Daher sollte der RP eine einheitliche Nutzerkennung des Karteninhabers angeben.
  • excludeCredentials: ein Array von Anmeldedaten, damit die RP die Registrierung desselben Authenticators vermeiden kann.

Weitere Informationen zur WebAuthn-Registrierung finden Sie unter webauthn.guide.

Beispiel für einen Registrierungscode:

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

Nach einer erfolgreichen Registrierung erhält der RP Anmeldedaten, die zur Überprüfung an den Server gesendet werden.

Registrierung bestätigen

Auf dem Server muss der RP die Anmeldedaten überprüfen und den öffentlichen Schlüssel zur späteren Verwendung aufbewahren. Die serverseitige Registrierung entspricht der üblichen WebAuthn-Registrierung. Für die Einhaltung der SPC-Anforderungen ist nichts weiter erforderlich.

Registrierung von innerhalb eines iFrames

Wenn der Zahlungspflichtige sein Gerät nicht beim RP (Zahlungsaussteller) registriert hat, kann er sich auf der Händlerwebsite registrieren. Nach einer erfolgreichen Authentifizierung während eines Kaufs kann der RP den Zahlungspflichtigen auffordern, sein Gerät indirekt über einen iFrame zu registrieren.

Registrierungsablauf auf der Website eines Händlers während der Zahlung

Dazu muss der Händler oder übergeordnete Publisher diese Aktion in einem iFrame mithilfe der Berechtigungsrichtlinie explizit zulassen. Der Aussteller führt die gleichen Schritte aus, um einen Authenticator in einem Iframe zu registrieren.

Der Händler hat zwei Möglichkeiten, die Registrierung zuzulassen:

  1. Dem iFrame-Tag im HTML-Code, der von der Händlerdomain gesendet wird, wird das Attribut allow hinzugefügt:

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

    Das Attribut allow muss payment und die RP-Quelle enthalten, die die WebAuthn-Registrierung aufruft.

  2. Das übergeordnete Frame-Dokument (das von der Händlerdomain bereitgestellt wird) wird mit einem Permissions-Policy-HTTP-Header gesendet:

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

Nächste Schritte

Sobald ein Gerät bei der vertrauenden Partei registriert ist, kann der Kunde Zahlungen auf der Website des Händlers mit der sicheren Zahlungsbestätigung bestätigen.