Authentification avec confirmation de paiement sécurisé

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Les marchands peuvent utiliser la confirmation de paiement sécurisé (SPC) dans le cadre d'un processus d'authentification forte pour une carte de crédit ou un compte bancaire donnés. WebAuthn effectue l'authentification (souvent via la biométrie). WebAuthn doit être enregistré à l'avance. Pour en savoir plus, consultez Enregistrer une confirmation de paiement sécurisé.

Fonctionnement d'une implémentation type

La méthode SPC est le plus souvent utilisée lorsqu'un client effectue un achat sur le site d'un marchand, et que l'émetteur de la carte de crédit ou la banque exige une authentification du payeur.

Examinons le flux d'authentification:

1. Un client fournit ses identifiants de paiement (informations de carte de crédit, par exemple) au marchand.
2. Le marchand demande à l'émetteur ou à la banque correspondants des identifiants de paiement (partie de confiance ou tiers assujetti à des restrictions) si le payeur a besoin d'une authentification distincte. Cet échange peut avoir lieu, par exemple, avec EMV® 3-D Secure.
   • Si le tiers assujetti à des restrictions souhaite que le marchand utilise la SPC et que l'utilisateur s'est déjà enregistré, il répond par une liste d'ID de justificatifs enregistrés par le payeur et une question d'authentification.
   • Si aucune authentification n'est nécessaire, le marchand peut continuer à finaliser la transaction.
3. Si une authentification est nécessaire, le marchand détermine si le navigateur est compatible avec SPC.
   • Si le navigateur n'est pas compatible avec SPC, poursuivez le flux d'authentification existant.
4. Le marchand appelle SPC. Le navigateur affiche une boîte de dialogue de confirmation.
   • Si aucun ID d'identification n'est transmis par le RP, revenez au flux d'authentification existant. Une fois l'authentification réussie, envisagez d'utiliser l'enregistrement SPC pour simplifier les futures authentifications.
5. L'utilisateur confirme et authentifie le montant et la destination du paiement en déverrouillant l'appareil.
6. Le marchand reçoit un identifiant lors de l'authentification.
7. Le marchand tiers reçoit l'identifiant du marchand et vérifie son authenticité.
8. Le tiers assujetti à des restrictions envoie les résultats de validation au marchand.
9. Le marchand montre à l'utilisateur un message indiquant si le paiement a réussi ou échoué.

Important:Pour permettre rapidement un test SPC initial, cette API a été conçue sur les implémentations existantes des API Payment Request et Payment Handler. De manière générale, il est désormais possible d'envisager une conception de SPC indépendante de la demande de paiement. Nous nous attendons (sans délai concret) à ce que SPC abandonne l'origine de ses demandes de paiement. Pour les développeurs, cela devrait améliorer la détection des fonctionnalités, les appels et d'autres aspects de l'API.

Détection de fonctionnalités

Pour déterminer si le SPC est pris en charge dans le navigateur, vous pouvez envoyer un appel fictif à canMakePayment().

Copiez et collez le code suivant pour détecter le SPC sur le site Web d'un marchand.

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

Authentifier l'utilisateur

Pour authentifier l'utilisateur, appelez la méthode PaymentRequest.show() avec les paramètres secure-payment-confirmation et WebAuthn:

• PublicKeyCredentialRequestOptions
• D'autres paramètres spécifiques au paiement sur la plate-forme du marchand

Voici les paramètres à fournir à la propriété data du mode de paiement, SecurePaymentConfirmationRequest.

Paramètres	Description
rpId	Nom d'hôte de l'origine de la RP en tant qu'ID de RP.
challenge	Défi aléatoire qui empêche les attaques par rejeu.
credentialIds	Tableau des ID d'identification. Dans l'authentification de WebAuthn, la propriété allowCredentials accepte un tableau d'objets PublicKeyCredentialDescriptor, mais dans SPC, vous ne transmettez qu'une liste d'ID d'identification.
payeeName (facultatif)	Nom du bénéficiaire.
payeeOrigin	Origine du bénéficiaire. Dans le scénario mentionné ci-dessus, il s'agit de l'origine du marchand.
instrument	Une chaîne pour displayName et une URL pour icon qui pointe vers une ressource d'image. Une valeur booléenne facultative (true par défaut) pour iconMustBeShown, qui spécifie une icône, doit être récupérée et affichée pour que la requête aboutisse.
timeout	Délai de signature de la transaction en millisecondes
extensions	Extensions ajoutées à l'appel WebAuthn. Vous n'avez pas besoin de spécifier l'extension "payment" vous-même.

Consultez cet exemple de code:

// After confirming SPC is available on this browser via a feature detection,
// fetch the request options cross-origin from the RP server.
const options = fetchFromServer('https://rp.example/spc-auth-request');
const { credentialIds, challenge } = options;

const request = new PaymentRequest([{
  // Specify `secure-payment-confirmation` as payment method.
  supportedMethods: "secure-payment-confirmation",
  data: {
    // The RP ID
    rpId: 'rp.example',

    // List of credential IDs obtained from the RP server.
    credentialIds,

    // The challenge is also obtained from the RP server.
    challenge,

    // A display name and an icon that represent the payment instrument.
    instrument: {
      displayName: "Fancy Card ****1234",
      icon: "https://rp.example/card-art.png",
      iconMustBeShown: false
    },

    // The origin of the payee (merchant)
    payeeOrigin: "https://merchant.example",

    // The number of milliseconds to timeout.
    timeout: 360000,  // 6 minutes
  }
}], {
  // Payment details.
  total: {
    label: "Total",
    amount: {
      currency: "USD",
      value: "5.00",
    },
  },
});

try {
  const response = await request.show();

  // response.details is a PublicKeyCredential, with a clientDataJSON that
  // contains the transaction data for verification by the issuing bank.
  // Make sure to serialize the binary part of the credential before
  // transferring to the server.
  const result = fetchFromServer('https://rp.example/spc-auth-response', response.details);
  if (result.success) {
    await response.complete('success');
  } else {
    await response.complete('fail');
  }
} catch (err) {
  // SPC cannot be used; merchant should fallback to traditional flows
  console.error(err);
}

La fonction .show() génère un objet PaymentResponse, à l'exception de details qui contient des identifiants de clé publique avec un clientDataJSON contenant les données de transaction (payment) pour validation par la RP.

L'identifiant obtenu doit être transféré en multi-origine vers le RP et validé.

Comment le tiers assujetti à des restrictions valide la transaction

La validation des données de transaction sur le serveur RP est l'étape la plus importante du processus de paiement.

Pour vérifier les données de la transaction, le tiers assujetti à des restrictions peut suivre le processus de validation d'assertion d'authentification de WebAuthn. Il doit également vérifier le payment.

Exemple de charge utile de clientDataJSON:

{
  "type":"payment.get",
  "challenge":"SAxYy64IvwWpoqpr8JV1CVLHDNLKXlxbtPv4Xg3cnoc",
  "origin":"https://spc-merchant.glitch.me",
  "crossOrigin":false,
  "payment":{
    "rp":"spc-rp.glitch.me",
    "topOrigin":"https://spc-merchant.glitch.me",
    "payeeOrigin":"https://spc-merchant.glitch.me",
    "total":{
      "value":"15.00",
      "currency":"USD"
    },
    "instrument":{
      "icon":"https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422",
      "displayName":"Fancy Card 825809751248"
    }
  }
}

Attention:La propriété type utilise payment.get au lieu de public-key. Vous devrez peut-être ajuster les bibliothèques WebAuthn existantes si vous choisissez d'utiliser l'une d'entre elles.

• Le rp correspond à l'origine du tiers assujetti à des restrictions.
• topOrigin correspond à l'origine de premier niveau attendue par le tiers assujetti à des restrictions (l'origine du marchand dans l'exemple ci-dessus).
• payeeOrigin correspond à l'origine du bénéficiaire qui aurait dû être présentée à l'utilisateur.
• total correspond au montant de la transaction qui aurait dû être présenté à l'utilisateur.
• instrument correspond aux détails du mode de paiement qui auraient dû être présentés à l'utilisateur.

const clientData = base64url.decode(response.clientDataJSON);
const clientDataJSON = JSON.parse(clientData);

if (!clientDataJSON.payment) {
  throw 'The credential does not contain payment payload.';
}

const payment = clientDataJSON.payment;
if (payment.rp !== expectedRPID ||
    payment.topOrigin !== expectedOrigin ||
    payment.payeeOrigin !== expectedOrigin ||
    payment.total.value !== '15.00' ||
    payment.total.currency !== 'USD') {
  throw 'Malformed payment information.';
}

Une fois tous les critères de validation remplis, le tiers assujetti à des restrictions peut indiquer au marchand que la transaction a abouti.

Étapes suivantes

• Consulter la présentation de la confirmation de paiement sécurisé
• En savoir plus sur l'inscription avec la confirmation de paiement sécurisé