Registrar una confirmación de pago seguro

Eiji Kitamura

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

En este artículo, los bancos emisores que actúan como terceros de confianza (RP) pueden obtener información sobre cómo 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 seguro.

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

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

Desde abril de 2022, SPC solo admite autenticadores de plataforma de verificación de usuarios (UVPA) en computadoras de escritorio. Esto significa que el cliente debe usar una computadora de escritorio o una laptop con un autenticador incorporado, como el siguiente:

  • Desbloquea la función que incluye Touch ID en un dispositivo macOS
  • Windows Hello en un dispositivo Windows

Registra el dispositivo

El registro de un dispositivo por parte del usuario de confianza (RP) debe seguir un proceso de verificación del 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 no se vulnere fácilmente la cuenta. Ten cuidado: la falta de seguridad en este proceso también pone en riesgo a SPC.

Una vez que el RP haya autenticado al cliente de forma correcta, este podrá registrar un dispositivo.

Flujo de trabajo de registro típico en el sitio web del usuario de confianza

Detección de funciones

Antes de pedirle al cliente que registre el dispositivo, el RP debe verificar que el navegador sea compatible con 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.
  • La verificación del usuario es obligatoria: authenticatorSelection.userVerification es required.
  • Se requieren credenciales detectables (claves residentes): authenticatorSelection.residentKey es required.

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

Otras advertencias:

  • rp.id: Es el nombre de host del RP. La parte eTLD+1 del dominio debe coincidir con el lugar en el que se registra. Se puede usar para la autenticación en dominios que coinciden con eTLD+1.
  • user.id: Es una expresión binaria del identificador de usuario. Se mostrará el mismo identificador en una autenticación exitosa, 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 el RP pueda evitar el registro del 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 que debe enviar al servidor para su verificación.

Verificar registro

En el servidor, el RP debe verificar la credencial y conservar la clave pública para su uso posterior. El proceso de registro del servidor es el mismo que un registro común de WebAuthn. No se requiere nada adicional para cumplir con 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 exitosa durante una compra, el RP puede solicitar que el pagador registre su dispositivo de forma indirecta, desde un iframe.

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

Para ello, el comercio o el superior deben permitir explícitamente esta acción dentro de un iframe mediante la Política de Permisos. La entidad emisora sigue los mismos pasos para registrar un autenticador en un iframe.

Existen dos métodos para que el comercio permita el registro:

  1. La etiqueta de iframe en el código HTML publicado desde el dominio del comercio 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 del RP que invoca el registro en WebAuthn.

  2. El documento del marco superior (publicado 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 se registra el dispositivo ante el usuario de confianza, el cliente puede confirmar los pagos en el sitio web del comercio mediante la Confirmación de pago seguro.