Registrar una confirmación de pago seguro

Eiji Kitamura

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

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

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

SPC se crea 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. Esto significa que el cliente debe usar una computadora de escritorio o una laptop con un autenticador incorporado, como los siguientes:

  • Desbloquea una función que incluye 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 debe seguir una un proceso de verificación de usuarios lo suficientemente sólido. La parte restringida debe asegurarse de que cliente accedió al sitio web con una autenticación sólida para que la la cuenta no se usurpa fácilmente. Ten cuidado: falta de seguridad en este proceso. también pone en riesgo a SPC.

Una vez que la parte restringida haya autenticado correctamente al cliente, 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, la parte restringida debe verificar que el navegador 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.
  }
});

Cómo registrar un autenticador

Si quieres registrar un dispositivo para SPC, sigue el proceso de registro de WebAuthn con la siguiente información: requisitos:

  • El autenticador de la plataforma es obligatorio: 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, especifique un "pago" extensión con isPayment: true. Especificando esta extensión sin cumplir con los requisitos anteriores arrojará una excepción

Otras advertencias:

  • rp.id: Es el nombre de host del RP. El eTLD+1 parte de la debe coincidir con el lugar donde se registra. Se puede usar para en dominios que coinciden con eTLD+1.
  • user.id: Es una expresión binaria del identificador del usuario. El mismo identificador se devolverán tras una autenticación exitosa, por lo que la parte restringida debe proporcionar un el mismo identificador de usuario del titular de la tarjeta.
  • excludeCredentials: Es un array de credenciales para que el RP pueda evitar. registrando 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 que se enviará 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 su uso posterior. El proceso de registro del servidor es el mismo que un registro común de WebAuthn. Nada adicional para cumplir con SPC.

Registro desde un iframe

Si el pagador no registró su dispositivo en el RP (entidad emisora de los pagos), el el pagador puede registrarse en el sitio web del comercio. Después de una autenticación exitosa durante una compra, el RP puede solicitar al pagador que registre su dispositivo indirectamente, 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 superior deben permitir explícitamente esta acción en un iframe con la Política de Permisos. La entidad emisora sigue los mismos pasos para registrar un autenticador dentro de un iframe.

Existen dos enfoques para que un comercio permita el registro:

  1. La etiqueta 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 de 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 se registra un dispositivo en el usuario de confianza, el cliente puede confirmar los pagos en el sitio web del comercio mediante la Confirmación de pago segura.