このページは Cloud Translation API によって翻訳されました。

安全なお支払いの確認を登録する

Eiji Kitamura

取引で安全な支払い確認（SPC）を使用するには、お客様がまず認証システムを登録する必要があります。このプロセスは、お支払い拡張機能が追加された WebAuthn 登録プロセスと非常によく似ています。

この記事では、信頼できる当事者（RP）として機能する発行銀行が SPC 登録を実装する方法について説明します。ユーザーエクスペリエンスについては、安全なお支払い確認の概要で詳しく説明しています。

保護されたお支払い確認の登録の仕組み

SPC は、WebAuthn 標準の拡張機能として構築されています。

2022 年 4 月現在、SPC はパソコンでのみユーザー検証プラットフォーム認証システム（UVPA）をサポートしています。つまり、次のような認証システムが組み込まれたデスクトップまたはノートパソコンを使用する必要があります。

macOS デバイスの Touch ID などのロック解除機能
Windows デバイスの Windows Hello

デバイスを登録する

リライングパーティ（RP）によるデバイスの登録には、十分に強固なユーザー確認プロセスが必要です。RP は、アカウントが簡単に不正使用されないように、お客様が強力な認証を使用してウェブサイトにログインしていることを確認する必要があります。注意: このプロセスでセキュリティが確保されていないと、SPC も危険にさらされます。

RP がお客様の認証に成功すると、お客様はデバイスを登録できるようになります。

特徴検出

お客様にデバイスの登録を依頼する前に、RP はブラウザが 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.
  }
});

認証システムを登録する

SPC 用にデバイスを登録するには、WebAuthn の登録プロセスに沿って、次の要件を満たしてください。

プラットフォーム認証システムが必要です。authenticatorSelection.authenticatorAttachment は platform です。
ユーザー確認が必要です。authenticatorSelection.userVerification は required です。
検出可能な認証情報（レジデントキー）が必要です。authenticatorSelection.residentKey は required です。

注: Chrome Android のバージョン M109、M110、M111 では、技術的な制限により、authenticatorSelection.residentKey を required ではなく preferred に設定する必要があります。Chrome Android M112 以降では、required を他のプラットフォームと同様に使用できます。

また、isPayment: true を使用して「payment」拡張機能を指定します。上記の要件を満たさずにこの拡張機能を指定すると、例外がスローされます。

注: WebAuthn は attestation オプションをサポートしています。このオプションにより、RP は登録中の認証システムのメーカーとモデルを確認できます。ただし、現在のところ、安全な支払い確認は Chrome でのみ利用でき、特定のプラットフォームではプラットフォーム認証システムに制限されているため、この方法は有用でない可能性があり、オプションです。

その他の注意事項:

rp.id: RP のホスト名。ドメインの eTLD+1 部分は、登録先の国と一致している必要があります。eTLD+1 に一致するドメインの認証に使用できます。
user.id: ユーザー ID のバイナリ式。認証が成功すると同じ ID が返されるため、RP はカード所有者の一貫したユーザー ID を提供する必要があります。
excludeCredentials: 認証情報の配列。RP が同じ認証システムを登録しないようにします。

WebAuthn の登録プロセスについて詳しくは、webauthn.guide をご覧ください。

登録コードの例:

const options = {
  challenge: new Uint8Array([21...]),
  rp: {
    id: "rp.example",
    name: "Fancy Bank",
  },
  user: {
    id: new Uint8Array([21...]),
    name: "jane.doe@example.com",
    displayName: "Jane Doe",
  },
  excludeCredentials: [{
    id: new Uint8Array([21...]),
    type: 'public-key',
    transports: ['internal'],
  }, ...],
  pubKeyCredParams: [{
    type: "public-key",
    alg: -7 // "ES256"
  }, {
    type: "public-key",
    alg: -257 // "RS256"
  }],
  authenticatorSelection: {
    userVerification: "required",
    residentKey: "required",
    authenticatorAttachment: "platform",
  },
  timeout: 360000,  // 6 minutes

  // Indicate that this is an SPC credential. This is currently required to
  // allow credential creation in an iframe, and so that the browser knows this
  // credential relates to SPC.
  extensions: {
    "payment": {
      isPayment: true,
    }
  }
};

try {
  const credential = await navigator.credentials.create({ publicKey: options });
  // Send new credential info to server for verification and registration.
} catch (e) {
  // No acceptable authenticator or user refused consent. Handle appropriately.
}

登録が正常に完了すると、RP は認証情報を受け取り、検証のためにサーバーに送信します。

登録を確認する

サーバーで、RP は認証情報を検証し、後で使用できるように公開鍵を保持する必要があります。サーバーサイドの登録プロセスは、通常の WebAuthn 登録と同じです。SPC に準拠するために追加で必要なことはありません。

iframe 内からの登録

支払い者が RP（支払い発行会社）にデバイスを登録していない場合は、販売者のウェブサイトで登録できます。購入時の認証が正常に完了すると、RP は iframe 内から、支払い者にデバイスの登録を間接的にリクエストできます。

そのためには、販売者または親が権限ポリシーを使用して、iframe 内でこのアクションを明示的に許可する必要があります。カード発行会社は、iframe 内で認証システムを登録する手順に沿って操作します。

販売者が登録を許可する方法は 2 つあります。

販売者のドメインから配信される HTML の iframe タグに allow 属性が追加されます。
```
<iframe name="iframe" allow="payment https://spc-rp.glitch.me"></iframe>
```
allow 属性に payment と、WebAuthn 登録を呼び出す RP のオリジンが含まれていることを確認します。
親フレームドキュメント（販売者のドメインから提供される）は、Permissions-Policy HTTP ヘッダーとともに送信されます。
```
Permissions-Policy: payment=(self "https://spc-rp.glitch.me")
```

次のステップ

デバイスが信頼できる当事者に登録されると、お客様は販売者のウェブサイトで安全な支払い確認を使用して支払いを確認できます。

安全なお支払い確認で認証する方法を学習する
安全なお支払い確認の概要を確認する