Enregistrer une confirmation de paiement sécurisé

Eiji Kitamura

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

Dans cet article, les banques émettrices agissant en tant que tiers de confiance peuvent découvrir comment implémenter l'enregistrement auprès de la SPC. L'expérience utilisateur est expliquée plus en détail dans la présentation de la confirmation de paiement sécurisé.

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

SPC est conçu comme une extension de la norme WebAuthn.

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

  • Déverrouiller une fonctionnalité, 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 suivre un processus de validation de l'utilisateur suffisamment strict. Le tiers assujetti à des restrictions doit s'assurer que le client s'est connecté au site Web à l'aide d'une authentification forte, afin que le compte ne soit pas facilement piraté. Attention: un manque de sécurité dans ce processus présente également un risque pour le SPC.

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

Workflow d'inscription classique sur le site Web du tiers de confiance

Détection de fonctionnalités

Avant de demander au client d'enregistrer l'appareil, le tiers assujetti à des restrictions doit vérifier que le navigateur est compatible avec 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 avec les exigences suivantes:

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

Indiquez également une extension "payment" avec isPayment: true. Si vous spécifiez cette extension sans répondre aux exigences ci-dessus, une exception sera générée.

Autres mises en garde:

  • rp.id: nom d'hôte du tiers assujetti à des restrictions. La partie eTLD+1 du domaine doit correspondre à l'endroit où il est enregistré. Il peut être utilisé pour l'authentification sur les domaines correspondant à l'eTLD+1.
  • user.id: expression binaire de l'identifiant utilisateur. Le même identifiant sera renvoyé lors de l'authentification réussie. Le tiers assujetti à des restrictions doit donc fournir un identifiant utilisateur cohérent au titulaire de la carte.
  • excludeCredentials: tableau d'identifiants permettant à la RP d'éviter d'enregistrer le même authentificateur.

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

Exemple de code d'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.
}

Après un enregistrement réussi, le tiers assujetti à des restrictions reçoit un identifiant à envoyer au serveur pour validation.

Vérifier l'enregistrement

Sur le serveur, le tiers assujetti à des restrictions doit vérifier les identifiants et conserver la clé publique pour une utilisation ultérieure. Le processus d'enregistrement côté serveur est identique à un enregistrement WebAuthn ordinaire. Aucun élément supplémentaire n'est requis pour se conformer à la SPC.

Enregistrement à partir d'un iFrame

Si le payeur n'a pas enregistré son appareil auprès du RP (émetteur du paiement), il 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 indirectement son appareil, à partir d'un iFrame.

Workflow d'inscription sur le site Web d'un marchand lors du paiement.

Pour ce faire, le marchand ou le parent doit autoriser explicitement cette action dans un iFrame en suivant les Règles relatives aux autorisations. 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. La balise 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é.