Zarejestruj potwierdzenie bezpiecznej płatności

Eiji Kitamura

Aby użyć potwierdzenia bezpiecznej płatności (SPC) w ramach transakcji, klient musi najpierw zarejestrować narzędzie uwierzytelniające. Ten proces jest bardzo podobny do procesu rejestracji w WebAuthn, z tym że jest dostępne rozszerzenie płatności.

Z tego artykułu dowiesz się, jak wdrożyć rejestrację SPC dla banków wydających karty działające jako strony uzależnione. Wrażenia użytkowników zostały szczegółowo wyjaśnione w omówieniu Potwierdzenia bezpiecznej płatności.

Jak działa potwierdzenie rejestracji bezpiecznej płatności?

SPC to rozszerzenie standardu WebAuthn.

Od kwietnia 2022 r. SPC obsługuje tylko aplikacje uwierzytelniające platformy do weryfikacji użytkowników (UVPA) na komputerach. Oznacza to, że klient musi korzystać z komputera lub laptopa z wbudowanym narzędziem uwierzytelniającym, takim jak:

  • Odblokuj funkcję, w tym Touch ID na urządzeniu z macOS
  • Windows Hello na urządzeniu z systemem Windows

Zarejestruj urządzenie

Rejestracja urządzenia przez stronę uzależnioną powinna być przeprowadzana przez wystarczająco szczegółowy proces weryfikacji użytkownika. W grupie objętej ograniczeniami należy sprawdzić, czy klient zalogował się w witrynie za pomocą silnego uwierzytelniania, aby konto nie zostało łatwo przejęte. Uważaj: brak zabezpieczeń w tym procesie naraża również SPC.

Gdy klient z grupy objętej ograniczeniami zostanie uwierzytelniony, będzie on mógł zarejestrować urządzenie.

Typowy proces rejestracji w witrynie podmiotu uzależnionego

Wykrywanie funkcji

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

Zarejestruj uwierzytelnianie

Aby zarejestrować urządzenie w usłudze SPC, wykonaj proces rejestracji WebAuthn pod kątem tych wymagań:

  • Uwierzytelnianie platformy jest wymagane: authenticatorSelection.authenticatorAttachment to platform.
  • Wymagana jest weryfikacja użytkownika: authenticatorSelection.userVerification ma wartość required.
  • Wymagane są możliwe do znalezienia dane logowania (klucze rezydentne): authenticatorSelection.residentKey ma wartość required.

Dodatkowo określ rozszerzenie „płatności” za pomocą parametru isPayment: true. Określenie rozszerzenia tego typu bez spełnienia powyższych wymagań

Inne uwagi:

  • rp.id: nazwa hosta grupy objętej ograniczeniami. Część eTLD+1 musi odpowiadać miejscu rejestracji. Może służyć do uwierzytelniania w domenach, które pasują do eTLD + 1.
  • user.id: wyrażenie binarne identyfikatora użytkownika. Po pomyślnym uwierzytelnieniu zostanie zwrócony ten sam identyfikator, więc kontroler objętej ograniczeniami powinien zawierać spójny identyfikator posiadacza karty.
  • excludeCredentials: tablica danych logowania, by grupa z ograniczonym dostępem nie mogła zarejestrować tego samego mechanizmu uwierzytelniania.

Więcej informacji o procesie rejestracji WebAuthn znajdziesz tutaj: 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.
}

Gdy rejestracja się uda, grupa z ograniczonym dostępem otrzyma dane logowania, które mogą wysłać na serwer w celu weryfikacji.

Potwierdź rejestrację

Na serwerze sieć objętościowa musi zweryfikować dane uwierzytelniające i zachować klucz publiczny do późniejszego użycia. Proces rejestracji po stronie serwera przebiega tak samo jak zwykła rejestracja WebAuthn. Do uzyskania zgodności z SPC nie trzeba niczego więcej.

Rejestracja z poziomu elementu iframe

Jeśli płatnik nie zarejestrował swojego urządzenia w RP (wydawcy płatności), może on zarejestrować się na stronie sprzedawcy. Po pomyślnym uwierzytelnieniu podczas zakupu witryna z grupy objętej ograniczeniami może poprosić płatnika o zarejestrowanie urządzenia pośrednio, z poziomu elementu iframe.

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

W tym celu sprzedawca lub wydawca nadrzędny musi wyraźnie zezwolić na to działanie w elemencie iframe, używając zasad dotyczących uprawnień. Wydawca wykonuje te same czynności, aby zarejestrować moduł uwierzytelniający w elemencie 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 u kontrolera, klient może potwierdzić płatności na stronie sprzedawcy za pomocą potwierdzenia bezpiecznej płatności.