Zarejestruj potwierdzenie bezpiecznej płatności

Eiji Kitamura

Aby korzystać z Bezpiecznego potwierdzenia płatności (SPC) w ramach transakcji, klient musi najpierw zarejestrować uwierzytelniacz. Ten proces jest bardzo podobny do procesu rejestracji WebAuthn, z dodatkiem rozszerzenia płatności.

Z tego artykułu banki pełniące rolę stron ufających (RP) mogą dowiedzieć się, jak wdrożyć rejestrację SPC. Więcej informacji o wrażeniach użytkownika znajdziesz w omówieniu potwierdzenia bezpiecznej płatności.

Jak działa rejestracja potwierdzenia bezpiecznej płatności?

SPC to rozszerzenie standardu WebAuthn.

Od kwietnia 2022 r. usługa SPC obsługuje na komputerach tylko platformy uwierzytelniające użytkownika (UVPA). Oznacza to, że klient musi korzystać z komputera stacjonarnego lub laptopa z wbudowanym uwierzytelniającym urządzeniem, takim jak:

  • Funkcja odblokowywania, w tym Touch ID na urządzeniu z macOS
  • Windows Hello na urządzeniu z systemem Windows

Rejestrowanie urządzenia

Rejestracja urządzenia przez stronę trzecią powinna być poprzedzona wystarczająco silnym procesem weryfikacji użytkownika. RP musi się upewnić, że klient zalogował się w witrynie przy użyciu silnego uwierzytelniania, aby nie można było łatwo przejąć konta. Uwaga: brak zabezpieczeń w tym procesie stwarza też ryzyko dla SPC.

Gdy RP uwierzytelni klienta, ten może zarejestrować urządzenie.

Typowy proces rejestracji na stronie podmiotu uwierzytelniającego

Wykrywanie cech

Zanim poprosi klienta o zarejestrowanie urządzenia, RP musi sprawdzić, czy przeglądarka obsługuje 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.
  }
});

Rejestrowanie mechanizmu uwierzytelniania

Aby zarejestrować urządzenie w usługach SPC, wykonaj proces rejestracji WebAuthn, spełniając te wymagania:

  • Wymagane jest uwierzytelnianie na platformie: authenticatorSelection.authenticatorAttachment to platform.
  • Wymagana jest weryfikacja użytkownika: authenticatorSelection.userVerification to required.
  • Wymagane są rozpoznawalne dane logowania (klucze na urządzeniu):authenticatorSelection.residentKey jest required.

Dodatkowo określ rozszerzenie „płatność” za pomocą isPayment: true. Podanie tego rozszerzenia bez spełnienia powyższych wymagań spowoduje wyjątek.

Inne zastrzeżenia:

  • rp.id: nazwa hosta RP. Część domeny eTLD+1 musi być zgodna z miejscem, w którym jest zarejestrowana. Można go używać do uwierzytelniania w domenach pasujących do eTLD+1.
  • user.id: binarne wyrażenie identyfikatora użytkownika. Ten sam identyfikator zostanie zwrócony po pomyślnym uwierzytelnieniu, dlatego RP powinien podać spójny identyfikator użytkownika posiadacza karty.
  • excludeCredentials: tablica danych uwierzytelniających, dzięki której RP może uniknąć rejestrowania tego samego uwierzytelniania.

Więcej informacji o procesie rejestracji WebAuthn znajdziesz na stronie webauthn.guide.

Przykładowy kod rejestracji:

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

Po zakończeniu rejestracji RP otrzymuje dane logowania, które należy wysłać na serwer w celu weryfikacji.

Weryfikacja rejestracji

Na serwerze RP musi zweryfikować poświadczenie i zatrzymać klucz publiczny do późniejszego użycia. Proces rejestracji po stronie serwera jest taki sam jak zwykła rejestracja WebAuthn. Aby spełnić wymagania SPC, nie musisz robić nic dodatkowego.

Rejestracja z poziomu elementu iframe

Jeśli płatnik nie zarejestrował urządzenia u RP (wydawcy płatności), może zarejestrować je na stronie sprzedawcy. Po pomyślnym uwierzytelnieniu podczas zakupu RP może pośrednio poprosić płatnika o zarejestrowanie urządzenia za pomocą ramki iframe.

Proces rejestracji w witrynie sprzedawcy podczas płatności.

W tym celu sprzedawca lub firma nadrzędna musi wyraźnie zezwolić na to działanie w ramce iframe za pomocą zasad dotyczących uprawnień. Wydawca wykonuje te same czynności, aby zarejestrować uwierzytelniacz w ramce iframe.

Sprzedawca może zezwolić na rejestrację na 2 sposoby:

  1. Tag iframe w kodzie HTML z domeny sprzedawcy dodaje atrybut allow:

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

    Upewnij się, że atrybut allow zawiera payment i źródło RP, które wywołuje rejestrację WebAuthn.

  2. Dokument nadrzędnego elementu ramki (wyświetlany z domeny sprzedawcy) jest wysyłany z nagłówkiem HTTP Permissions-Policy:

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

Dalsze kroki

Gdy urządzenie zostanie zarejestrowane przez stronę ufającą, klient może potwierdzać płatności w witrynie sprzedawcy za pomocą bezpiecznego potwierdzenia płatności.