Enregistrer une confirmation de paiement sécurisé

Eiji Kitamura

Pour utiliser la confirmation de paiement sécurisé (SPC) dans une transaction, le client doit : enregistrer un authentificateur. Ce processus est très semblable à l'authentification WebAuthn procédure d'inscription, avec l'ajout d'une extension de paiement.

Dans cet article, les banques émettrices agissant en tant que parties de confiance (RP) peuvent savoir comment pour implémenter l'enregistrement SPC. Pour en savoir plus sur l'expérience utilisateur, consultez Présentation de la confirmation de paiement sécurisé.

Comment fonctionne l'inscription à la confirmation de paiement sécurisé ?

SPC est une extension de la norme WebAuthn.

Depuis avril 2022, SPC n'accepte que les authentificateurs de plate-forme de validation de l'utilisateur (UVPA) sur ordinateur. Cela signifie que le client doit utiliser un ordinateur de bureau ou portable avec un authentificateur intégré, comme:

  • Fonctionnalité de déverrouillage, y compris Touch ID, sur un appareil macOS
  • Windows Hello sur un appareil Windows

Enregistrer l'appareil

L'enregistrement d'un appareil par le tiers de confiance doit respecter un processus de validation de l'utilisateur suffisamment solide. Le tiers assujetti à des restrictions doit s'assurer que client s'est connecté au site Web en utilisant une authentification forte afin que n'est pas facile à pirater. Attention: ce processus manque de sécurité met également la SPC en danger.

Une fois que le tiers assujetti à des restrictions a réussi à authentifier le client, celui-ci peut enregistrer un appareil.

Workflow d'enregistrement type sur le site Web du tiers de confiance

Détection de caractéristiques

Avant de demander au client d'enregistrer l'appareil, le tiers assujetti à des restrictions doit vérifier que prend en charge 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.
  }
});

Enregistrer un authentificateur

Pour enregistrer un appareil pour SPC, suivez le processus d'enregistrement WebAuthn en procédant comme suit : configuration requise:

  • Veuillez indiquer l'authentificateur de plate-forme: authenticatorSelection.authenticatorAttachment est platform.
  • La validation de l'utilisateur est requise: authenticatorSelection.userVerification est required.
  • Les identifiants détectables (clés résidentes) sont requis: authenticatorSelection.residentKey est required.

Indiquez également un "paiement" avec isPayment: true. Spécifier cette extension sans satisfaire aux exigences ci-dessus génèrent une exception

Autres mises en garde:

  • rp.id: nom d'hôte de la RP. La partie eTLD+1 du doit correspondre à celui dans lequel il est enregistré. Il peut être utilisé pour sur les domaines qui correspondent à eTLD+1.
  • user.id: expression binaire de l'identifiant de l'utilisateur. Le même identifiant est renvoyée lors de l'authentification. Le tiers assujetti à des restrictions doit donc fournir l'identifiant cohérent du titulaire de la carte.
  • excludeCredentials: tableau d'identifiants permettant au tiers assujetti à des restrictions d'éviter l'enregistrement du même authentificateur.

Pour en savoir plus sur le processus d'enregistrement WebAuthn, consultez webauthn.guide.

Exemple de code pour l'inscription:

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.
}

Une fois l'enregistrement réussi, la RP reçoit des identifiants à envoyer au serveur pour validation.

Vérifier l'enregistrement

Sur le serveur, la RP doit vérifier l'identifiant et conserver la clé publique pour pour une utilisation ultérieure. Le processus d'enregistrement côté serveur est identique à un enregistrement WebAuthn ordinaire. Rien supplémentaire est requis pour se conformer aux exigences de la certification SPC.

Enregistrement depuis un iFrame

Si le payeur n'a pas enregistré son appareil auprès de la RP (émetteur du paiement), le payeur peut s’inscrire sur le site Web du marchand. Après une authentification réussie lors d'un achat, le tiers assujetti à des restrictions peut demander au payeur d'enregistrer son appareil indirectement, depuis un iFrame.

Workflow d'enregistrement sur le site Web d'un marchand pendant le paiement.

Pour ce faire, le marchand ou le parent doit autoriser explicitement cette action dans un iFrame à l'aide des règles d'autorisation. L'émetteur suit la même procédure pour enregistrer un authentificateur dans un iFrame.

Le marchand peut autoriser l'enregistrement de deux façons:

  1. Le tag iFrame du code HTML diffusé à partir du domaine du marchand ajoute un attribut allow:

    <iframe name="iframe" allow="payment https://spc-rp.glitch.me"></iframe>

    Assurez-vous que l'attribut allow contient payment et l'origine RP qui appelle l'enregistrement WebAuthn.

  2. Le document de frame parent (diffusé à partir du domaine du marchand) est envoyé avec un en-tête HTTP Permissions-Policy:

    Permissions-Policy: payment=(self "https://spc-rp.glitch.me")

Étapes suivantes

Une fois qu'un appareil est enregistré auprès du tiers de confiance, le client peut confirmer les paiements sur le site Web du marchand à l'aide de la confirmation de paiement sécurisé.