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:
- Müşteri, ödeme kimlik bilgilerini (ör. kredi kartı) sağladığında bilgileri) satıcıya iletmek.
- 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.
- 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ışı.
- 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.
- Kullanıcı, cihazın kilidini açarak ödeme yapabilirsiniz.
- Satıcı, kimlik doğrulamadan bir kimlik bilgisi alır.
- Kısıtlanmış taraf, satıcıdan kimlik bilgisini alır ve özgünlük.
- Kısıtlanmış taraf, doğrulama sonuçlarını satıcıya gönderir.
- 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.
Ö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.
Ş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"
}
}
}
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