Mendaftarkan Konfirmasi Pembayaran Aman

Eiji Kitamura

Untuk menggunakan Konfirmasi Pembayaran Aman (SPC) dalam transaksi, pelanggan harus mendaftarkan pengautentikasi terlebih dahulu. Proses ini sangat mirip dengan proses pendaftaran WebAuthn, dengan penambahan perpanjangan pembayaran.

Dalam artikel ini, bank penerbit yang bertindak sebagai pihak tepercaya (RP) dapat mempelajari cara menerapkan pendaftaran SPC. Pengalaman pengguna dijelaskan lebih lanjut dalam ringkasan Konfirmasi Pembayaran yang Aman.

Bagaimana cara kerja pendaftaran Konfirmasi Pembayaran Aman?

SPC dibuat sebagai ekstensi untuk standar WebAuthn.

Mulai April 2022, SPC hanya mendukung Pengautentikasi Platform Verifikasi Pengguna (UVPA) di desktop. Artinya, pelanggan harus menggunakan desktop atau laptop dengan pengautentikasi tersemat seperti:

  • Fitur buka kunci termasuk Touch ID di perangkat macOS
  • Windows Hello di perangkat Windows

Daftarkan perangkat

Pendaftaran perangkat oleh pihak tepercaya (RP) harus mengikuti proses verifikasi pengguna yang cukup kuat. RP harus memastikan bahwa pelanggan telah login ke situs menggunakan autentikasi yang kuat sehingga akun tidak mudah dibajak. Hati-hati: kurangnya keamanan dalam proses ini juga akan membahayakan SPC.

Setelah RP berhasil mengautentikasi pelanggan, pelanggan kini dapat mendaftarkan perangkat.

Alur kerja pendaftaran standar di situs pihak tepercaya

Deteksi fitur

Sebelum meminta pelanggan untuk mendaftarkan perangkat, RP harus memeriksa apakah browser mendukung 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.
  }
});

Mendaftarkan pengautentikasi

Untuk mendaftarkan perangkat ke SPC, ikuti proses pendaftaran WebAuthn dengan persyaratan berikut:

  • Pengautentikasi platform diperlukan: authenticatorSelection.authenticatorAttachment adalah platform.
  • Verifikasi pengguna diperlukan: authenticatorSelection.userVerification adalah required.
  • Kredensial yang dapat ditemukan (kunci penduduk) diperlukan: authenticatorSelection.residentKey adalah required.

Selain itu, tentukan ekstensi "pembayaran" dengan isPayment: true. Menentukan ekstensi ini tanpa memenuhi persyaratan di atas akan menampilkan pengecualian

Beberapa peringatan lainnya:

  • rp.id: nama host RP. Bagian eTLD+1 dari domain harus cocok dengan tempat domain ini didaftarkan. Ini dapat digunakan untuk autentikasi di domain yang cocok dengan eTLD+1.
  • user.id: ekspresi biner dari ID pengguna. ID yang sama akan ditampilkan jika autentikasi berhasil, sehingga RP harus memberikan ID pengguna pemegang kartu yang konsisten.
  • excludeCredentials: array kredensial sehingga RP dapat menghindari pendaftaran pengautentikasi yang sama.

Untuk mengetahui informasi selengkapnya tentang proses pendaftaran WebAuthn, lihat webauthn.guide.

Contoh kode pendaftaran:

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

Setelah pendaftaran berhasil, RP akan menerima kredensial untuk dikirim ke server guna diverifikasi.

Memverifikasi pendaftaran

Di server, RP harus memverifikasi kredensial dan menyimpan kunci publik untuk digunakan nanti. Proses pendaftaran sisi server sama dengan pendaftaran WebAuthn biasa. Tidak ada tambahan yang diperlukan untuk mematuhi SPC.

Pendaftaran dari dalam iframe

Jika pembayar belum mendaftarkan perangkatnya ke RP (penerbit pembayaran), pembayar dapat mendaftar di situs penjual. Setelah autentikasi berhasil selama pembelian, RP dapat meminta pembayar mendaftarkan perangkatnya secara tidak langsung, dari dalam iframe.

Alur kerja pendaftaran di situs penjual selama pembayaran.

Untuk melakukannya, penjual atau orang tua harus mengizinkan tindakan ini secara eksplisit dalam iframe menggunakan Kebijakan Izin. Penerbit mengikuti langkah yang sama untuk mendaftarkan pengautentikasi dalam iframe.

Ada dua cara yang dapat digunakan penjual untuk mengizinkan pendaftaran:

  1. Tag iframe di HTML yang ditayangkan dari domain penjual menambahkan atribut allow:

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

    Pastikan atribut allow berisi payment dan origin RP yang memanggil pendaftaran WebAuthn.

  2. Dokumen frame induk (ditayangkan dari domain penjual) dikirim dengan header HTTP Permissions-Policy:

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

Langkah berikutnya

Setelah perangkat didaftarkan ke pihak tepercaya, pelanggan dapat mengonfirmasi pembayaran di situs penjual menggunakan Konfirmasi Pembayaran Aman.