Güvenli Ödeme Onayı ile kimliğinizi doğrulayın

Eiji Kitamura

Satıcılar, belirli bir kredi kartı veya banka hesabı için güçlü bir müşteri kimlik doğrulama (SCA) işleminin bir parçası olarak Güvenli Ödeme Onayı'nı (SPC) kullanabilir. WebAuthn, kimlik doğrulamayı gerçekleştirir (genellikle biyometri aracılığıyla). WebAuthn'un önceden kaydedilmesi gerekir. Bu konuda daha fazla bilgiye Güvenli Ödeme Onayı Kaydetme bölümünden ulaşabilirsiniz.

Tipik bir uygulamanın işleyiş şekli

SPC için en yaygın kullanım, müşterinin satıcının kendisinden (kredi kartını veren kuruluş veya banka, ödeyen kimlik doğrulamasını zorunlu kılabilir).

Kimlik doğrulama akışını adım adım inceleyelim:

1. Müşteri, ödeme kimlik bilgilerini (ör. kredi kartı) sağladığında bilgileri) satıcıya iletmek.
2. Satıcı, ödeme belgesinin ilgili kuruluşunu veya bankasını istiyor. ödeme yapan tarafın ayrı bir kimlik doğrulamasına ihtiyacı varsa (bağlanan taraf veya RP) Bu yalnızca karşılıklı olarak EMV® 3-D Secure.
   • Kısıtlanmış taraf, satıcının SPC kullanmasını isterse ve kullanıcı daha önce satıcı tarafından kaydettirilen kimlik bilgisi kimliklerinin bir listesiyle yanıt verir. ödeme yapan taraf ve bir zorluk.
   • Kimlik doğrulama gerekmiyorsa satıcı, tamamlanması gerekir.
3. Kimlik doğrulama gerektiğinde tarayıcının SPC'yi destekleyip desteklemediğini satıcı belirler.
   • Tarayıcı SPC'yi desteklemiyorsa mevcut kimlik doğrulama akışı.
4. Satıcı SPC'yi çağırır. Tarayıcıda bir onay iletişim kutusu görüntülenir.
   • Kısıtlanmış Taraf'tan iletilen kimlik bilgileri kimliği yoksa Mevcut kimlik doğrulama akışını. Başarılı bir kimlik doğrulamasından sonra SPC kaydını kullanmayı düşünün kullanabilirsiniz.
5. Kullanıcı, cihazın kilidini açarak ödeme yapabilirsiniz.
6. Satıcı, kimlik doğrulamadan bir kimlik bilgisi alır.
7. Kısıtlanmış taraf, satıcıdan kimlik bilgisini alır ve özgünlük.
8. Kısıtlanmış taraf, doğrulama sonuçlarını satıcıya gönderir.
9. Satıcı, kullanıcıya ödemenin yapılıp yapılmadığını belirten bir mesaj gösterir. başarılı olup olmadığını gösterir.

ziyaret edin.

Önemli nokta: Bu API, başlangıçtaki SPC denemesini hızlı bir şekilde desteklemek için Ödeme İsteği ve Ödeme İşleyici API'lerinin mevcut uygulamaları. Şu anda SPC tasarımının araştırılması için Ödeme İsteği. Net bir zaman çizelgesi olmadan SPC'nin hareket etmesini bekliyoruz ödeme isteği kaynaklarından uzaklaşıyor. Geliştiriciler için bu, özellik algılama, çağrı ve diğer daha yakından inceleyeceğiz.

Özellik algılama

Tarayıcıda SPC'nin desteklenip desteklenmediğini tespit etmek için canMakePayment().

Satıcının web sitesinde SPC'yi algılama özelliğini kullanmak için aşağıdaki kodu kopyalayıp yapıştırın.

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

Kullanıcının kimliğini doğrulama

Kullanıcının kimliğini doğrulamak için PaymentRequest.show() yöntemini şununla çağırın: secure-payment-confirmation ve WebAuthn parametreleri:

• PublicKeyCredentialRequestOptions
• Satıcının platformundaki diğer ödemeye özgü parametreler.

Ödeme yönteminin data özelliğine (SecurePaymentConfirmationRequest) sağlamanız gereken parametreler aşağıda belirtilmiştir.

Parametre	Açıklama
rpId	Kısıtlanmış taraf kimliği olarak RP kaynağının ana makine adı.
challenge	Saldırıların tekrarlanmasını önleyen rastgele bir meydan okuma.
credentialIds	Kimlik bilgisi kimlikleri dizisi. WebAuthn'un kimlik doğrulamasında allowCredentials mülkü bir dizi PublicKeyCredentialDescriptor nesne kabul eder, ancak SPC'de yalnızca kimlik bilgisi kimliklerinin listesini iletirsiniz.
payeeName (isteğe bağlı)	Alacaklı adı.
payeeOrigin	Alacaklının kaynağı. Yukarıda belirtilen senaryoda bu, satıcının kaynağıdır.
instrument	displayName için bir dize ve icon için bir resim kaynağına işaret eden URL. iconMustBeShown için bir simgenin başarıyla getirilmesini ve isteğin başarılı olması için bir simgenin gösterilmesi gerektiğini belirten isteğe bağlı bir boole değeri (varsayılan olarak true değerine ayarlanır).
timeout	İşlemi imzalamak için zaman aşımı (milisaniye cinsinden)
extensions	WebAuthn çağrısına uzantılar eklendi. "Ödeme"yi belirtmeniz gerekmez uzatabilirsiniz.

Şu örnek kodu inceleyin:

// After confirming SPC is available on this browser via a feature detection,
// fetch the request options cross-origin from the RP server.
const options = fetchFromServer('https://rp.example/spc-auth-request');
const { credentialIds, challenge } = options;

const request = new PaymentRequest([{
  // Specify `secure-payment-confirmation` as payment method.
  supportedMethods: "secure-payment-confirmation",
  data: {
    // The RP ID
    rpId: 'rp.example',

    // List of credential IDs obtained from the RP server.
    credentialIds,

    // The challenge is also obtained from the RP server.
    challenge,

    // A display name and an icon that represent the payment instrument.
    instrument: {
      displayName: "Fancy Card ****1234",
      icon: "https://rp.example/card-art.png",
      iconMustBeShown: false
    },

    // The origin of the payee (merchant)
    payeeOrigin: "https://merchant.example",

    // The number of milliseconds to timeout.
    timeout: 360000,  // 6 minutes
  }
}], {
  // Payment details.
  total: {
    label: "Total",
    amount: {
      currency: "USD",
      value: "5.00",
    },
  },
});

try {
  const response = await request.show();

  // response.details is a PublicKeyCredential, with a clientDataJSON that
  // contains the transaction data for verification by the issuing bank.
  // Make sure to serialize the binary part of the credential before
  // transferring to the server.
  const result = fetchFromServer('https://rp.example/spc-auth-response', response.details);
  if (result.success) {
    await response.complete('success');
  } else {
    await response.complete('fail');
  }
} catch (err) {
  // SPC cannot be used; merchant should fallback to traditional flows
  console.error(err);
}

.show() işlevi, PaymentResponse details dışında bir nesne, İşlem verilerini içeren clientDataJSON (payment) tarafından doğrulanması gerekir.

Oluşturulan kimlik bilgisi, kaynaklar arası RP'ye aktarılmalıdır. doğrulandı.

Kısıtlanmış taraf işlemi nasıl doğrular?

Kısıtlanmış taraf sunucusundaki işlem verilerini doğrulamak, adımları uygulayın.

Kısıtlanmış taraf, işlem verilerini doğrulamak için WebAuthn'un kimlik doğrulama onayı doğrulama sürecini izleyebilir. Ayrıca, payment öğesini doğrulayın.

Örnek clientDataJSON yükü:

{
  "type":"payment.get",
  "challenge":"SAxYy64IvwWpoqpr8JV1CVLHDNLKXlxbtPv4Xg3cnoc",
  "origin":"https://spc-merchant.glitch.me",
  "crossOrigin":false,
  "payment":{
    "rp":"spc-rp.glitch.me",
    "topOrigin":"https://spc-merchant.glitch.me",
    "payeeOrigin":"https://spc-merchant.glitch.me",
    "total":{
      "value":"15.00",
      "currency":"USD"
    },
    "instrument":{
      "icon":"https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422",
      "displayName":"Fancy Card 825809751248"
    }
  }
}

Dikkat: type mülkü, public-key yerine payment.get kullanır. Bu Mevcut WebAuthn'da bazı değişiklikler yapılmasını gerektirebilir kütüphaneler, seçebilirsiniz.

• rp, kısıtlanmış tarafın kaynağı ile eşleşiyor.
• topOrigin, kısıtlanmış tarafın beklediği üst düzey kaynakla ( satıcının kökeni için) girin.
• payeeOrigin, şu şekilde olması gereken alacaklının kaynağıyla eşleşiyor: kullanıcıya gösterilir.
• total, gösterilmesi gereken işlem tutarıyla eşleşiyor kullanıcıya gösterir.
• instrument, olması gereken ödeme aracı bilgileriyle eşleşmelidir. kullanıcıya gösterilmişti.

const clientData = base64url.decode(response.clientDataJSON);
const clientDataJSON = JSON.parse(clientData);

if (!clientDataJSON.payment) {
  throw 'The credential does not contain payment payload.';
}

const payment = clientDataJSON.payment;
if (payment.rp !== expectedRPID ||
    payment.topOrigin !== expectedOrigin ||
    payment.payeeOrigin !== expectedOrigin ||
    payment.total.value !== '15.00' ||
    payment.total.currency !== 'USD') {
  throw 'Malformed payment information.';
}

Tüm doğrulama ölçütleri karşılandıktan sonra RP, Satıcıya işlemin başarılı olduğunu bildirir.

Sonraki adımlar

• Güvenli Ödeme Onayı özetine genel bakışı okuyun
• Güvenli Ödeme Onayı ile kaydolma hakkında bilgi edinin