Registrar una confirmación de pago seguro

Eiji Kitamura

Para usar la Confirmación de pago segura (SPC) en una transacción, el cliente primero debe registrar un autenticador. Este proceso es muy similar al proceso de registro de WebAuthn, con la adición de una extensión de pago.

En este artículo, los bancos emisores que actúan como partes de confianza (RP) pueden obtener información para implementar el registro de SPC. La experiencia del usuario se explica con más detalle en la descripción general de la Confirmación de pago segura.

¿Cómo funciona el registro de Confirmación de pago seguro?

SPC se compila como una extensión del estándar WebAuthn.

A partir de abril de 2022, SPC solo admite autenticadores de plataformas de verificación de usuarios (UVPA) en computadoras de escritorio. Esto significa que el cliente debe estar en una computadora de escritorio o laptop con un autenticador incorporado, como los siguientes:

  • Función de desbloqueo con Touch ID en un dispositivo macOS
  • Windows Hello en un dispositivo con Windows

Registra el dispositivo

El registro de un dispositivo por parte del usuario de confianza (RP) debe seguir un proceso de verificación de usuario lo suficientemente sólido. El RP debe asegurarse de que el cliente haya accedido al sitio web con una autenticación sólida para que la cuenta no se usurpe fácilmente. Ten cuidado: una falta de seguridad en este proceso pone en riesgo a SPC.

Una vez que el RP autentique correctamente al cliente, este ahora puede registrar un dispositivo.

Flujo de trabajo de registro típico en el sitio web de la parte de confianza

Detección de atributos

Antes de pedirle al cliente que registre el dispositivo, el RP debe verificar que el navegador admita 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.
  }
});

Registra un autenticador

Para registrar un dispositivo para SPC, sigue el proceso de registro de WebAuthn con los siguientes requisitos:

  • Se requiere el autenticador de la plataforma: authenticatorSelection.authenticatorAttachment es platform.
  • Se requiere la verificación del usuario: authenticatorSelection.userVerification es required.
  • Se requieren credenciales detectables (claves residentes): authenticatorSelection.residentKey es required.

Además, especifica una extensión "payment" con isPayment: true. Si especificas esta extensión sin cumplir con los requisitos anteriores, se arrojará una excepción.

Otras advertencias:

  • rp.id: El nombre de host del RP La parte del eTLD+1 del dominio debe coincidir con el lugar donde se registra. Se puede usar para la autenticación en dominios que coinciden con el eTLD+1.
  • user.id: Es una expresión binaria del identificador de usuario. Se mostrará el mismo identificador si la autenticación se realiza correctamente, por lo que el RP debe proporcionar un identificador de usuario coherente del titular de la tarjeta.
  • excludeCredentials: Es un array de credenciales para que la RP pueda evitar registrar el mismo autenticador.

Para obtener más información sobre el proceso de registro de WebAuthn, consulta webauthn.guide.

Ejemplo de código de registro:

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

Después de un registro exitoso, el RP recibe una credencial para enviarla al servidor para su verificación.

Verifica el registro

En el servidor, el RP debe verificar la credencial y conservar la clave pública para usarla más adelante. El proceso de registro del servidor es el mismo que un registro de WebAuthn ordinario. No se requiere nada más para cumplir con el SPC.

Registro desde un iframe

Si el pagador no registró su dispositivo en el RP (entidad emisora de pagos), puede registrarse en el sitio web del comercio. Después de una autenticación correcta durante una compra, el RP puede solicitarle al pagador que registre su dispositivo de forma indirecta desde un iframe.

Flujo de trabajo de registro en el sitio web de un comercio durante el pago

Para ello, el comercio o la empresa matriz deben permitir esta acción de forma explícita dentro de un iframe con la Política de Permisos. El emisor sigue los mismos pasos para registrar un autenticador dentro de un iframe.

Existen dos enfoques para que el comercio permita el registro:

  1. La etiqueta de iframe en el HTML que se entrega desde el dominio del comerciante agrega un atributo allow:

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

    Asegúrate de que el atributo allow contenga payment y el origen de la RP que invoca el registro de WebAuthn.

  2. El documento de marco superior (que se entrega desde el dominio del comercio) se envía con un encabezado HTTP Permissions-Policy:

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

Próximos pasos

Una vez que un dispositivo se registra en el usuario de confianza, el cliente puede confirmar los pagos en el sitio web del comercio con la Confirmación de pago segura.