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ü müşteri kimlik doğrulama (SCA) sürecinin bir parçası olarak Güvenli Ödeme Onayı'nı (SPC) kullanabilir. WebAuthn, kimlik doğrulamayı (genellikle biyometri aracılığıyla) gerçekleştirir. WebAuthn önceden kaydedilmelidir. Bu konuda bilgi edinmek için Güvenli Ödeme Onayı Kaydetme başlıklı makaleyi inceleyebilirsiniz.

Tipik bir uygulamanın işleyiş şekli

SPC için en yaygın kullanım, müşterinin bir satıcının sitesinde satın alma işlemi gerçekleştirmesi ve kredi kartını veren kuruluşun veya bankanın ödeme yapan tarafın kimlik doğrulamasını zorunlu kılmasıdır.

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

1. Müşteri, ödeme kimlik bilgilerini (ör. kredi kartı bilgileri) satıcıya sağlar.
2. Satıcı, ödeme yapan kullanıcının ayrı bir kimlik doğrulamasına ihtiyacı olup olmadığını ödeme kimlik bilgisinin ilgili veren kuruluşundan veya bankasından (güvenilir taraf veya GT) sorar. Bu değişim, örneğin EMV® 3-D Secure ile gerçekleşebilir.
   • RP, satıcının SPC'yi kullanmasını istiyorsa ve kullanıcı daha önce kaydolduysa RP, ödeme yapan kullanıcı tarafından kaydedilen kimlik bilgisi kimliklerinin listesini ve bir istem gönderir.
   • Kimlik doğrulama gerekmiyorsa satıcı işlemi tamamlamaya devam edebilir.
3. Kimlik doğrulama gerekiyorsa satıcı tarayıcının SPC'yi destekleyip desteklemediğini belirler.
   • Tarayıcı SPC'yi desteklemiyorsa mevcut kimlik doğrulama akışıyla devam edin.
4. Satıcı SPC'yi çağırır. Tarayıcıda bir onay iletişim kutusu görüntülenir.
   • RP'den kimlik bilgisi kimliği iletilmiyorsa mevcut kimlik doğrulama akışına geri dönün. Başarılı bir kimlik doğrulamasından sonra, gelecekteki kimlik doğrulama işlemlerini kolaylaştırmak için SPC kaydını kullanmayı düşünebilirsiniz.
5. Kullanıcı, cihazın kilidini açarak ödemenin tutarını ve hedefini onaylar ve kimliğini doğrular.
6. Satıcı, kimlik doğrulamadan bir kimlik bilgisi alır.
7. RP, kimlik bilgisini satıcıdan alır ve kimliğin gerçekliğini doğrular.
8. RP, doğrulama sonuçlarını satıcıya gönderir.
9. Satıcı, kullanıcıya ödemenin başarılı mı yoksa başarısız mı olduğunu belirten bir mesaj gösterir.

Önemli nokta: Bu API, ilk SPC denemesini hızlıca desteklemek için Payment Request ve Payment Handler API'lerinin mevcut uygulamalarının üzerine tasarlanmıştır. Ödeme isteğinden bağımsız bir SPC tasarımı üzerinde çalışma konusunda genel bir fikir birliğine varıldı. SPC'nin (belli bir zaman çizelgesi olmadan) ödeme isteği kaynaklarından uzaklaşmasını bekliyoruz. Geliştiriciler için bu, özellik algılamayı, çağrıyı ve API'nin diğer özelliklerini iyileştirecektir.

Özellik algılama

Tarayıcıda SPC'nin desteklenip desteklenmediğini tespit etmek için canMakePayment() numarasına sahte bir çağrı gönderebilirsiniz.

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 secure-payment-confirmation ve WebAuthn parametreleriyle PaymentRequest.show() yöntemini çağırın:

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

Ödeme yönteminin data mülküne SecurePaymentConfirmationRequest sağlamanız gereken parametreler aşağıda verilmiştir.

Parametre	Açıklama
rpId	RP kaynağının ana makine adı (RP kimliği olarak).
challenge	Tekrar saldırılarını önleyen rastgele bir meydan okuma.
credentialIds	Kimlik bilgisi kimlikleri dizisi. WebAuthn'un kimlik doğrulamasında allowCredentials mülkü bir PublicKeyCredentialDescriptor nesnesi dizisi kabul eder ancak SPC'de yalnızca kimlik bilgisi kimliklerinin bir listesini iletirsiniz.
payeeName (isteğe bağlı)	Alacaklının adı.
payeeOrigin	Alacaklının kökeni. Yukarıda belirtilen senaryoda bu, satıcının kaynağıdır.
instrument	displayName için bir dize ve bir resim kaynağına yönlendiren icon için bir URL. İsteğin başarılı olması için iconMustBeShown için isteğe bağlı bir boole değeri (true olarak varsayılan) belirtilmelidir. Bu değer, bir simgenin başarıyla getirilip gösterilmesi gerektiğini belirtir.
timeout	İşlemi imzalamak için zaman aşımı (milisaniye cinsinden)
extensions	WebAuthn çağrısına uzantılar eklendi. "payment" uzantısını kendiniz belirtmeniz gerekmez.

Aşağıdaki örnek koda göz atın:

// 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 nesnesi döndürür. Bununla birlikte, details, RP tarafından doğrulanması için işlem verilerini (payment) içeren bir clientDataJSON ile ortak anahtar kimlik bilgisi içerir.

Elde edilen kimlik bilgisi, kaynaktan RP'ye aktarılmalı ve doğrulanmalıdır.

RP'nin işlemi doğrulama şekli

RP sunucusunda işlem verilerini doğrulamak, ödeme sürecindeki en önemli adımdır.

RP, işlem verilerini doğrulamak için WebAuthn'ın kimlik doğrulama beyanı doğrulama sürecini uygulayabilir. Ayrıca payment adresini doğrulamaları gerekir.

clientDataJSON için örnek bir 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 özelliği, public-key yerine payment.get kullanır. Bu, birini kullanmayı seçerseniz mevcut WebAuthn kitaplıklarında bazı düzenlemeler yapmanızı gerektirebilir.

• rp, RP'nin kaynağıyla eşleşir.
• topOrigin, RP'nin beklediği üst düzey kaynakla (yukarıdaki örnekte satıcının kaynağı) eşleşir.
• payeeOrigin, kullanıcıya gösterilmesi gereken alacaklının kaynağıyla eşleşiyor.
• total, kullanıcıya gösterilmesi gereken işlem tutarıyla eşleşir.
• instrument, kullanıcıya gösterilmesi gereken ödeme aracı ayrıntılarıyla eşleşir.

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

Sonraki adımlar

• Güvenli Ödeme Onayı'na genel bakışı okuyun.
• Güvenli Ödeme Onayı ile kayıt hakkında bilgi edinin.