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

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

Eiji Kitamura

取引で Secure Payment Confirmation（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 が返されるため、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")
```

次のステップ

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

詳しくは、安全なお支払いの確認による認証についての記事をご覧ください。
安全なお支払いの確認の概要を確認する