Sichere Zahlungsbestätigung einrichten

Eiji Kitamura

Um die sichere Zahlungsbestätigung (Secure Payment Confirmation, SPC) in einer Transaktion zu verwenden, muss der Kunde müssen Sie zuerst einen Authenticator registrieren. Dieser Prozess ähnelt stark dem von WebAuthn Registrierungsprozess, wobei eine Zahlungserweiterung hinzugefügt wird.

In diesem Artikel erfahren Sie, wie ausstellende Banken, die als vertrauende Seite agieren, um die SPC-Registrierung zu implementieren. Die User Experience wird in der Übersicht über die sichere Zahlungsbestätigung

Wie funktioniert die Registrierung für die sichere Zahlungsbestätigung?

SPC ist eine Erweiterung des WebAuthn-Standards.

Seit April 2022 unterstützt SPC nur noch Plattform-Authenticators zur Nutzerbestätigung auf Desktop-Computern. Das bedeutet, dass der Kunde einen Desktop-Computer oder Laptop nutzen muss. mit einem eingebetteten Authenticator wie z. B.:

  • Entsperrungsfunktion einschließlich 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 (RPs) sollte einer einen ausreichend hohen Bestätigungsprozess für Nutzer erforderlich ist. Der RP muss sicherstellen, Kunde hat sich mit einer starken Authentifizierung auf der Website angemeldet, -Konto nicht einfach zu hacken. Achtung: Mangelnde Sicherheit bei diesem Prozess gefährdet SPC ebenfalls.

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

Typischer Registrierungsablauf auf der Website der vertrauenden Partei

Funktionserkennung

Bevor der Kunde das Gerät registrieren muss, muss der RP prüfen, ob die Browser unterstützt 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.
  }
});

Authenticator registrieren

Um ein Gerät für SPC zu registrieren, führen Sie den WebAuthn-Registrierungsprozess so aus: Anforderungen:

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

Geben Sie außerdem eine „Zahlung“ mit isPayment: true. Angabe Wenn diese Erweiterung die oben genannten Anforderungen nicht erfüllt, wird eine Ausnahme ausgelöst.

Weitere Einschränkungen:

  • rp.id: der Hostname des RP. Der Teil eTLD+1 des Domain muss mit dem Ort bei der Registrierung übereinstimmen. Sie kann verwendet werden für Authentifizierung für Domains, die mit eTLD+1 übereinstimmen.
  • user.id: ein binärer Ausdruck der Nutzer-ID Dieselbe Kennung bei erfolgreicher Authentifizierung zurückgegeben, sodass das RP ein einheitliche Nutzer-ID des Karteninhabers.
  • excludeCredentials: Array von Anmeldedaten, das vom RP vermieden werden kann Authenticator registrieren.

Weitere Informationen zum WebAuthn-Registrierungsprozess 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 ein Ausweisdokument, das zur Überprüfung an den Server gesendet werden muss.

Registrierung bestätigen

Auf dem Server muss der RP die Anmeldedaten verifizieren und den öffentlichen Schlüssel für die Sie später verwenden können. Der serverseitige Registrierungsprozess entspricht der herkömmlichen WebAuthn-Registrierung. Nichts zur Einhaltung von SPC erforderlich.

Registrierung von innerhalb eines iFrames

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

Workflow der Registrierung auf der Website eines Händlers während der Zahlung

Dazu muss der Händler oder übergeordnete Publisher diese Aktion ausdrücklich in einem iFrame mit der Berechtigungsrichtlinie an. Der Aussteller führt dieselben Schritte aus, um einen Authenticator innerhalb eines iFrames zu registrieren.

Der Händler hat zwei Möglichkeiten, die Registrierung zu ermöglichen:

  1. Das iFrame-Tag im HTML-Code, der von der Händlerdomain bereitgestellt wird, fügt ein allow-Attribut hinzu:

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

    Achten Sie darauf, dass das allow-Attribut payment und den RP-Ursprung enthält, der 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 mithilfe der sicheren Zahlungsbestätigung bestätigen.