| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>SPC Authentication iframe</title> |
| <script src="../utils.sub.js"></script> |
| <script> |
| 'use strict'; |
| |
| // Setup the listener first, to avoid race conditions. |
| window.addEventListener('message', async function handler(evt) { |
| window.removeEventListener('message', handler); |
| |
| const credentialId = evt.data; |
| |
| // Assume that our parent has already created a virtual authenticator device |
| // and set the SPC transaction mode. |
| const challenge = 'server challenge'; |
| const payeeOrigin = 'https://merchant.com'; |
| const displayName = 'Troycard ***1234'; |
| const request = new PaymentRequest([{ |
| supportedMethods: 'secure-payment-confirmation', |
| data: { |
| credentialIds: [credentialId], |
| challenge: Uint8Array.from(challenge, c => c.charCodeAt(0)), |
| payeeOrigin, |
| timeout: 60000, |
| instrument: { |
| displayName, |
| icon: ICON_URL, |
| }, |
| } |
| }], PAYMENT_DETAILS); |
| |
| const responsePromise = request.show(); |
| |
| const response = await responsePromise; |
| await response.complete('success'); |
| |
| const cred = response.details; |
| |
| // Let our parent know the results. Some WebAuthn fields cannot be cloned, so |
| // we have to do some teardown ourselves. |
| const clientDataJSON = JSON.parse(arrayBufferToString(cred.response.clientDataJSON)) |
| window.parent.postMessage({ id: cred.id, clientDataJSON }, '*'); |
| }); |
| |
| // Now let our parent know that we are ready to receive the credential ID. |
| window.parent.postMessage(true, '*'); |
| </script> |
