Authentification avec confirmation de paiement sécurisé

Eiji Kitamura

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

Fonctionnement d'une implémentation type

Elle est généralement 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 l'authentification du payeur.

Examinons le flux d'authentification:

1. Un client fournit ses identifiants de paiement (par exemple, les informations de carte de crédit) au marchand.
2. Le marchand demande à l'émetteur ou à la banque correspondants des identifiants de paiement (partie de confiance ou RP) si le payeur a besoin d'une authentification distincte. Cet échange peut se produire, par exemple, avec EMV® 3-D Secure.
   • Si la RP souhaite que le marchand utilise SPC, et si l'utilisateur s'est déjà enregistré, elle répond avec une liste d'ID d'identifiants 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'identifiant n'est transmis par la 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 les identifiants de l'authentification.
7. La RP reçoit les identifiants du marchand et vérifie son authenticité.
8. Le tiers assujetti à des restrictions envoie les résultats de la validation au marchand.
9. Le marchand présente à l'utilisateur un message indiquant si le paiement a abouti ou échoué.

Détection de caractéristiques

Pour déterminer si SPC est compatible avec le navigateur, vous pouvez envoyer un faux appel à canMakePayment().

Copiez et collez le code suivant pour activer la détection des certificats 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
• Autres paramètres spécifiques aux paiements sur la plate-forme du marchand

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

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, sauf que details contient des identifiants de clé publique avec un clientDataJSON contenant les données de transaction (payment) pour vérification par la RP.

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

Comment le tiers assujetti à des restrictions vérifie la transaction

La vérification des données de transaction sur le serveur de tiers assujettis à des restrictions est l'étape la plus importante du processus de paiement.

Pour vérifier les données de transaction, la tiers assujetti à des restrictions peut suivre le processus de validation des assertions 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"
    }
  }
}

• Le rp correspond à l'origine de la RP.
• Le topOrigin correspond à l'origine de premier niveau attendue par le tiers assujetti à des restrictions (le point de départ du marchand dans l'exemple ci-dessus).
• Le payeeOrigin correspond à l'origine du bénéficiaire qui aurait dû être affichée pour l'utilisateur.
• L'élément total correspond au montant de la transaction qui aurait dû être affiché pour l'utilisateur.
• L'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 confirmation de paiement sécurisé