Zarejestruj potwierdzenie bezpiecznej płatności

Eiji Kitamura

Aby użyć potwierdzenia bezpiecznej płatności (SPC) w transakcji, klient musi najpierw zarejestruj aplikację uwierzytelniającą. Ten proces jest bardzo podobny do WebAuthn procesu rejestracji z wydłużeniem okresu obowiązywania płatności.

Z tego artykułu dowiesz się, jak banki wystawiające w celu wdrożenia rejestracji SPC. Wrażenia użytkowników zostały szczegółowo wyjaśnione w potwierdzeniu bezpiecznych płatności.

Jak działa rejestracja w celu potwierdzenia bezpiecznych płatności?

SPC to rozszerzenie standardu WebAuthn.

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

  • Odblokowywanie funkcji, 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ć zgodna z odpowiednio rozbudowany proces weryfikacji użytkowników. Deweloper musi zadbać o to, aby zalogował się w witrynie za pomocą silnego uwierzytelniania, nie jest łatwe do przejęcia. Uwaga: ten proces nie zapewnia bezpieczeństwa również naraża SPC na ryzyko.

Po udanym uwierzytelnieniu klienta przez grupę docelową będzie on mógł zarejestrować urządzenie.

Typowy proces rejestracji w witrynie podmiotu uzależnionego

Wykrywanie cech

Zanim poprosisz klienta o zarejestrowanie urządzenia, RP musi sprawdzić, czy 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 aplikację uwierzytelniającą

Aby zarejestrować urządzenie w usłudze SPC, postępuj zgodnie z procesem rejestracji WebAuthn, wykonując te czynności: wymagania:

  • Mechanizm uwierzytelniający platformy jest wymagany: Obecny stan „authenticatorSelection.authenticatorAttachment”: platform.
  • Weryfikacja użytkownika jest wymagana: Obecny stan „authenticatorSelection.userVerification”: required.
  • Dane logowania możliwe do znalezienia (klucze rezydentne) są wymagane: Obecny stan „authenticatorSelection.residentKey”: required.
.

Dodatkowo określ „płatność”, z rozszerzeniem isPayment: true. Określanie to rozszerzenie bez spełnienia powyższych wymagań spowoduje zgłoszenie wyjątku

Inne zastrzeżenia:

  • rp.id: nazwa hosta grupy objętej ograniczeniami. Część eTLD+1 musi odpowiadać domenie, w której jest zarejestrowana. Może być wykorzystywane do tych celów w domenach zgodnych z eTLD+1.
  • user.id: wyrażenie binarne identyfikatora użytkownika. ten sam identyfikator, będzie zwracana po pomyślnym uwierzytelnieniu, tak więc sieć RP powinna dostarczać spójny identyfikator posiadacza karty.
  • excludeCredentials: tablica danych logowania, której można użyć w grupie objętej ograniczeniami; rejestrując ten sam mechanizm uwierzytelniający.

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

Po udanej rejestracji grupa z ograniczonym dostępem otrzyma dane logowania, które zostaną wysłane do serwera w celu weryfikacji.

Potwierdź rejestrację

Na serwerze RP musi zweryfikować dane logowania i zachować klucz publiczny przez do późniejszego użycia. Proces rejestracji po stronie serwera jest taki sam jak zwykła rejestracja WebAuthn. Brak dodatkowe wymagane informacje.

Rejestracja z poziomu elementu iframe

Jeśli płatnik nie zarejestrował swojego urządzenia w RP (wydawcy płatności), płatnik może zarejestrować się na stronie sprzedawcy. Po udanym uwierzytelnieniu podczas zakupu może poprosić płatnika o zarejestrowanie urządzenia pośrednio, z 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 Element iframe z zasadami uprawnień. Wydawca wykonuje te same czynności, aby zarejestrować uwierzytelnianie w elemencie iframe.

Sprzedawca może umożliwić 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

Po zarejestrowaniu urządzenia u uzależnionego klient może potwierdzać płatności na stronie sprzedawcy za pomocą potwierdzenia bezpiecznych płatności.