판매자는 특정 신용카드 또는 은행 계좌에 대한 강력한 고객 인증 (SCA) 프로세스의 일부로 보안 결제 확인 (SPC)을 사용할 수 있습니다. WebAuthn이 인증을 실행합니다 (흔히 생체 인식을 통해). WebAuthn은 미리 등록해야 합니다. 자세한 내용은 보안 결제 확인 등록을 참조하세요.
일반적인 구현의 작동 방식
SPC의 가장 일반적인 용도는 고객이 판매자 신용카드 발급기관 또는 은행이 지급인 인증을 요구하는 경우
인증 흐름을 살펴보겠습니다.
- 고객이 결제 사용자 인증 정보 (예: 신용카드)를 제공함 정보)를 판매자에게 제공합니다.
- 판매자는 결제자가 별도의 인증이 필요한지 결제 사용자 인증 정보의 해당 발급기관 또는 은행(신뢰 당사자 또는 RP)에 문의합니다. 이
예를 들어 이메일 주소 교환이 발생할 수 있고
EMV® 3-D Secure
- RP가 판매자가 SPC를 사용하기를 원하며 사용자가 이전에 SPC를 사용한 적이 있는지 여부 RP는 문제가 있습니다
- 인증이 필요하지 않은 경우 판매자는 거래를 완료할 수 있습니다
- 인증이 필요한 경우 판매자가 브라우저가 SPC를 지원하는지 확인합니다.
- 브라우저가 SPC를 지원하지 않으면 기존 인증 흐름을 진행합니다.
- 판매자가 SPC를 호출합니다. 브라우저에 확인 대화상자가 표시됩니다.
- RP에서 전달된 사용자 인증 정보 ID가 없는 경우 사용할 수 있습니다. 인증에 성공한 후에는 SPC 등록을 사용하여 향후 인증을 간소화하는 것이 좋습니다.
- 사용자가 기기를 잠금 해제하여 결제 금액과 대상을 확인하고 인증합니다.
- 판매자가 인증에서 사용자 인증 정보를 수신합니다.
- RP는 판매자로부터 사용자 인증 정보를 수신하고 신뢰성을 확인합니다.
- RP는 인증 결과를 판매자에게 전송합니다.
- 판매자는 결제가 성공했는지 여부를 나타내는 메시지를 사용자에게 표시합니다.
기능 감지
브라우저에서 SPC가 지원되는지 확인하려면
canMakePayment()
판매자의 웹사이트에 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.
}
});
사용자 인증
사용자를 인증하려면 다음을 사용하여 PaymentRequest.show()
메서드를 호출합니다.
secure-payment-confirmation
및 WebAuthn 매개변수:
PublicKeyCredentialRequestOptions
- 판매자 플랫폼의 기타 결제 관련 매개변수
다음은 결제 수단의 data
속성인 SecurePaymentConfirmationRequest
에 제공해야 하는 매개변수입니다.
다음 예시 코드를 확인하세요.
// 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()
함수의 결과는 PaymentResponse
객체입니다. 단, details
에는 RP의 확인을 위한 트랜잭션 데이터(payment
)가 포함된 clientDataJSON
가 있는 공개 키 사용자 인증 정보가 포함됩니다.
이렇게 생성된 사용자 인증 정보는 교차 출처에서 RP로 전송되어야 하며 확인하세요.
RP가 거래를 확인하는 방법
RP 서버에서 거래 데이터를 확인하는 것이 결제 프로세스의 가장 중요한 단계입니다.
RP는 WebAuthn의 인증 어설션 확인 프로세스를 따라 거래 데이터를 확인할 수 있습니다.
또한 payment
를 확인해야 합니다.
clientDataJSON
의 페이로드 예시:
{
"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
는 RP의 출처와 일치합니다.topOrigin
는 RP가 예상하는 최상위 출처와 일치합니다( 판매자 출신지).payeeOrigin
가 원래대로 제공되었어야 하는 수취인의 출발지와 사용자에게 표시됩니다.total
는 사용자에게 표시되어야 했던 거래 금액과 일치합니다.instrument
는 사용자에게 표시되었어야 하는 결제 수단 세부정보와 일치합니다.
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.';
}
모든 인증 기준을 통과하면 RP는 판매자에게 거래가 완료되었다고 알릴 수 있습니다.
다음 단계
- 안전한 결제 확인 개요 읽기
- 안전한 결제 확인을 통한 등록에 대해 알아보기