Güvenli Ödeme Onayı Kaydet

Eiji Kitamura

Bir işlemde Güvenli Ödeme Onayı'nı (SPC) kullanmak için müşterinin önce bir kimlik doğrulayıcı kaydedin. Bu işlem, WebAuthn'a oldukça benzerdir. ek olarak kayıt sürecini başlatabilirsiniz.

Bu makalede, bağlı taraf olarak hareket eden kartı veren bankalar, gerekiyor. Kullanıcı deneyimi şu makalede daha ayrıntılı şekilde açıklanmıştır: Güvenli Ödeme Onayı'na genel bakış.

Güvenli Ödeme Onayı kaydı nasıl çalışır?

SPC, WebAuthn standardının bir uzantısı olarak tasarlanmıştır.

Nisan 2022'den itibaren SPC yalnızca Kullanıcı Doğrulama Platformu Authenticator'larını desteklemektedir (UVPA) oluşturmak için kullanabilirsiniz. Bu, müşterinin masaüstü veya dizüstü bilgisayarda olması gerektiği anlamına gelir. yerleşik bir kimlik doğrulayıcıyla (ör:

  • macOS cihazda Touch ID gibi özelliğin kilidini açma
  • Windows cihazda Windows Hello

Cihazı kaydedin

Bağlı tarafın (RP) kaydı, aşağıdaki şartlara uygun olmalıdır: yeterli güçlü bir kullanıcı doğrulama sürecidir. Kısıtlanmış taraf, kullanıcının, web sitesinde güçlü bir kimlik doğrulama kullanarak oturum açtığı ve böylece kolayca ele geçirilmemesidir. Dikkat: Bu işlemde güvenlik eksikliği var bu da SPC’yi riske atar.

Kısıtlanmış taraf, müşterinin kimliğini başarıyla doğruladıktan sonra kaydettirmeye hazırdır.

Bağlı tarafın web sitesindeki genel kayıt iş akışı

Özellik algılama

Müşteriden cihazı kaydetmesini istemeden önce, kısıtlanmış taraf, Tarayıcı SPC'yi destekliyor.

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

Kimlik doğrulayıcı kaydedin

Bir cihazı SPC'ye kaydettirmek için aşağıdaki WebAuthn kayıt işlemini uygulayın: koşullar:

  • Platform kimlik doğrulayıcısı gereklidir: authenticatorSelection.authenticatorAttachment platform.
  • Kullanıcı doğrulaması gerekiyor: authenticatorSelection.userVerification required.
  • Bulunabilir kimlik bilgileri (yerleşik anahtarlar) gereklidir: authenticatorSelection.residentKey required.
ziyaret edin.

Ayrıca, "ödeme" isPayment: true uzantısı var. Belirtme yukarıdaki şartları karşılamadan bu uzantıya bir istisna uygulanır

Dikkat edilmesi gereken diğer noktalar:

  • rp.id: Kısıtlanmış tarafın ana makine adıdır. eTLD+1, alan adı, kaydedildiği yerle eşleşmelidir. Şunlar için kullanılabilir: eTLD+1 ile eşleşen alanlarda kimlik doğrulama
  • user.id: Kullanıcı tanımlayıcısının ikili ifadesidir. Aynı tanımlayıcı kimlik doğrulaması başarılı olduğunda döndürülür. Bu nedenle, Kısıtlanmış Taraf tutarlı bir kullanıcı tanımlayıcısı bulunur.
  • excludeCredentials: Kısıtlanmış tarafın kaçınabileceği bir kimlik bilgisi dizisi aynı kimlik doğrulayıcıyı kaydetme.

WebAuthn kayıt işlemi hakkında daha fazla bilgi için webauthn.guide.

Örnek kayıt kodu:

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

Başarılı bir kayıttan sonra RP, doğrulama için sunucuya gönderilecek bir kimlik bilgisi alır.

Kaydı doğrulayın

Kısıtlanmış taraf, sunucuda kimlik bilgisini doğrulamalı ve ortak anahtarı daha sonradan kullanabilirsiniz. Sunucu tarafı kayıt işlemi normal bir WebAuthn kaydıyla aynıdır. Hiçbir şey ek bilgi gerekiyor.

iFrame içinden kayıt

Ödemeyi yapan taraf, cihazını RP'ye (ödemeyi veren kuruluş) kaydetmemişse Ödeme yapan kullanıcı, satıcının web sitesine kaydolabilir. Başarılı bir kimlik doğrulama işleminden sonra RP ödeme yapan kişiden cihazını kaydettirmesini isteyebilir dolaylı olarak iframe içinden erişebilirsiniz.

Ödeme sırasında satıcının web sitesindeki kayıt iş akışı.

Bunu yapabilmek için, satıcının veya ana yayıncının bu işleme İzin Politikası'nı kullanarak iframe. Veren kuruluş, iframe içinde kimlik doğrulayıcıyı kaydetmek için aynı adımları uygular.

Satıcının kayda izin vermek için iki yaklaşımı vardır:

  1. Satıcı alanından sunulan HTML'deki iframe etiketi bir allow özelliği ekler:

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

    allow özelliğinin payment ve WebAuthn kaydını çağıran RP kaynağını içerdiğinden emin olun.

  2. Üst çerçeve dokümanı (satıcı alanından sunulan) Permissions-Policy HTTP başlığı ile gönderilir:

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

Sonraki adımlar

Cihaz bağlı tarafa kaydedildikten sonra müşteri, Güvenli Ödeme Onayı'nı kullanarak satıcının web sitesinde ödemeleri onaylayabilir.