Eiji Kitamura
クレジット カードまたは銀行口座に対する強力な顧客認証（SCA）プロセスの一環として、安全な支払い確認（SPC）をご利用いただけます。WebAuthn が認証を行います（多くの場合、生体認証を使用します）。WebAuthn は事前に登録する必要があります。詳しくは、安全な支払い確認を登録するをご覧ください。
一般的な実装の仕組み
SPC の最も一般的な用途は、お客様が販売者のサイトで購入を行い、クレジット カード発行会社または銀行が支払い者の認証を要求する場合です。
認証フローを詳しく見てみましょう。
- 顧客は支払い認証情報（クレジット カード情報など）を販売者に提供します。
- 販売者は、支払い認証情報の対応するカード発行会社または銀行（リライング パーティまたは RP）に、支払人に対して別の認証が必要かどうかを尋ねます。たとえば、EMV® 3-D Secure でこの交換が行われることがあります。
- RP が販売者に SPC の使用を希望し、ユーザーが以前に登録している場合、RP は支払い側で登録された認証情報 ID のリストとチャレンジを返します。
- 認証が不要な場合は、販売者は取引を続行して完了できます。
- 認証が必要な場合は、販売者がブラウザが 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.
}
});
お客様の認証
ユーザーを認証するには、secure-payment-confirmation パラメータと WebAuthn パラメータを使用して PaymentRequest.show() メソッドを呼び出します。
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 は取引が成功したことを販売者に通知できます。
次のステップ
- 安全なお支払いの確認の概要を確認する
- 詳しくは、安全なお支払いの確認を使用した登録をご覧ください。