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 polegają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. 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 poprosisz 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 z tymi wymaganiami:

  • Wymagany jest uwierzytelnianie platformy: authenticatorSelection.authenticatorAttachment ma wartość platform.
  • Wymagana jest weryfikacja użytkownika: authenticatorSelection.userVerification ma wartość required.
  • Wymagane są możliwe do znalezienia dane logowania (klucze rezydentne): authenticatorSelection.residentKey to 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ęść eTLD+1 domeny musi być zgodna z miejscem rejestracji. Można go używać do uwierzytelniania w domenach pasujących do eTLD+1.
  • user.id: wyrażenie binarne identyfikatora użytkownika. Ten sam identyfikator zostanie zwrócony po udanym uwierzytelnieniu, więc w RPA powinien być dostępny spójny identyfikator użytkownika posiadacza karty.
  • excludeCredentials: tablica danych logowania, dzięki której w RPA nie zostanie zarejestrowany ten sam moduł uwierzytelniający.

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.

Potwierdź rejestrację

Na serwerze RP musi zweryfikować poświadczenie i zatrzymać klucz publiczny na później. Proces rejestracji po stronie serwera jest taki sam jak zwykła rejestracja WebAuthn. Aby zachować zgodność z SPC, nie musisz niczego więcej robić.

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ą elementu iframe.

Przebieg rejestracji na stronie sprzedawcy podczas płatności.

Aby to zrobić, sprzedawca lub wydawca nadrzędny musi wyraźnie zezwolić na to działanie w elemencie 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 wyświetlanym z domeny sprzedawcy dodaje atrybut allow:

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

    Sprawdź, czy atrybut allow zawiera payment i źródło RP, które wywołuje rejestrację WebAuthn.

  2. Dokument ramki nadrzędnej (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.