iframe-authenticate.html (1936B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>SPC Authentication iframe</title> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="../utils.sub.js"></script> 7 <script> 8 'use strict'; 9 10 // Setup the listener first, to avoid race conditions. 11 window.addEventListener('message', async function handler(evt) { 12 window.removeEventListener('message', handler); 13 14 const credentialId = evt.data[0]; 15 const rpId = evt.data[1]; 16 17 // Assume that our parent has already created a virtual authenticator device 18 // and set the SPC transaction mode. 19 const challenge = 'server challenge'; 20 const payeeOrigin = 'https://merchant.com'; 21 const displayName = 'Troycard ***1234'; 22 23 try { 24 const request = new PaymentRequest([{ 25 supportedMethods: 'secure-payment-confirmation', 26 data: { 27 credentialIds: [credentialId], 28 challenge: Uint8Array.from(challenge, c => c.charCodeAt(0)), 29 payeeOrigin, 30 rpId, 31 timeout: 60000, 32 instrument: { 33 displayName, 34 icon: ICON_URL, 35 }, 36 } 37 }], PAYMENT_DETAILS); 38 39 test_driver.set_test_context(window.parent); 40 await test_driver.bless('user activation'); 41 const responsePromise = request.show(); 42 43 const response = await responsePromise; 44 await response.complete('success'); 45 46 const cred = response.details; 47 48 // Let our parent know the results. Some WebAuthn fields cannot be cloned, so 49 // we have to do some teardown ourselves. 50 const clientDataJSON = JSON.parse(arrayBufferToString(cred.response.clientDataJSON)) 51 window.parent.postMessage({ type: 'spc_result', id: cred.id, clientDataJSON }, '*'); 52 } catch (e) { 53 window.parent.postMessage({ type: 'spc_result', error: e }, '*'); 54 } 55 }); 56 57 // Now let our parent know that we are ready to receive the credential ID. 58 window.parent.postMessage({ type: 'loaded' }, '*'); 59 </script>