Enregistrer une confirmation de paiement sécurisé

Eiji Kitamura

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

Cet article explique comment les banques émettrices qui agissent en tant que parties de confiance (RP) peuvent mettre en œuvre l'enregistrement de 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'enregistrement de la confirmation de paiement sécurisé ?

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

Depuis avril 2022, SPC n'est compatible qu'avec 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é, par exemple:

  • Fonctionnalité de déverrouillage avec 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 (RP) doit suivre un processus de validation utilisateur suffisamment strict. Le RP 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 met également en péril la SPC.

Une fois que le RP a authentifié le client, celui-ci peut enregistrer un appareil.

Workflow d'enregistrement type sur le site Web de la partie de confiance

Détection de fonctionnalités

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

  • L'authentificateur de plate-forme est obligatoire : authenticatorSelection.authenticatorAttachment est platform.
  • La validation de l'utilisateur est requise : authenticatorSelection.userVerification est required.
  • Des identifiants visibles (clés résidentes) sont requis :authenticatorSelection.residentKey est required.

De plus, spécifiez une extension "payment" avec isPayment: true. Spécifier cette extension sans répondre aux exigences ci-dessus génère une exception.

Autres mises en garde:

  • rp.id: nom d'hôte du RP. 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é en cas d'authentification réussie. Le RP doit donc fournir un identifiant utilisateur cohérent du titulaire de la carte.
  • excludeCredentials: tableau d'identifiants permettant à l'RP d'éviter d'enregistrer le même authentificateur.

Pour en savoir plus sur la procédure d'enregistrement WebAuthn, consultez webauthn.guide.

Exemple de code d'enregistrement:

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 effectué, l'RP reçoit un identifiant à envoyer au serveur pour validation.

Valider l'enregistrement

Sur le serveur, l'RP doit valider les identifiants et conserver la clé publique pour une utilisation ultérieure. Le processus d'enregistrement côté serveur est le même que pour un enregistrement WebAuthn ordinaire. Aucune mesure supplémentaire n'est requise pour respecter le PSC.

Enregistrement depuis un iFrame

Si le payeur n'a pas enregistré son appareil auprès de l'émetteur de paiement, il peut s'inscrire sur le site Web du marchand. Une fois l'authentification réussie lors d'un achat, le RP peut demander au payeur d'enregistrer son appareil indirectement, à 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 à l'aide du Règlement sur les autorisations. L'émetteur suit les mêmes étapes pour enregistrer un authentificateur dans une iFrame.

Le marchand peut autoriser l'enregistrement de deux manières:

  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 de l'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 un appareil 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ée.