Summary
Many applications now require an OTP for authentication. The following steps and snippet can be used to get the OTP from an API and populate it in a page.
Resolution
1. Create the Synthetic monitor events up to where the OTP is needed i.e.
- Navigate to URL
- Login with credentials
- OTP page appears
- Access a page in the same domain as API URL in a new tab, if original navigate and api domains are different (this is only needed if you see a CORS error when you make the fetch in the next event)
2. Add a JavaScript event, using Add synthetic event, to fetch the OTP value and save the value. Something like the below which stores the value in a variable called token.
api.startAsyncSyntheticEvent();
fetch('<yoururl>', {
method: 'POST',
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
}
}).then(function(response) {
if (!response.ok) {
throw Error(response.status + ":" + response.statusText);
}
return response;
}).then(response => response.text()).then(text => {
try {
api.info('Resp length: ' + text.length);
if (text.indexOf('code') >= 0) {
<your code to retrieve token>
api.setValue("token", token);
api.finish();
} else {
api.fail("Invalid Response");
}
} catch (err) {
api.fail("Failed to Execute");
}
}).catch(function(error) {
api.fail(error);
});
3. Pass the value to on OTP generation page
var pin = api.getValue("token");
document.querySelector("#PIN").value = pin;
4. Complete any other steps needed.
What's Next
If these steps don't help, then open a chat and provide the following:
- a link to affected monitor
- the troubleshooting steps you have already completed
- a link to this article
You can find further troubleshooting tips for Synthetic in the Synthetic Troubleshooting Map
