Integrate Frontend
With the backend configured, the next step is to retrieve the frontend script that renders Verify 2FA either in a pop-up window, via a button, or in an iframe.
Get the frontend JavaScript
Retrieve the frontend JavaScript from the following link:
<script src="https://cdn.typingdna.com/verify/typingdna-verify.js"></script>
There are two ways to display Verify 2FA on the frontend:
-
In a pop-up window that is accessed via the click of a button,
-
In an iframe that is embedded into the page.
Button
<button
class="typingdna-verify"
data-typingdna-client-id=typingDNADataAttributes.clientId
data-typingdna-application-id=typingDNADataAttributes.applicationId
data-typingdna-payload=typingDNADataAttributes.payload
data-typingdna-callback-fn="callbackFn"> Verify 2FA with TypingDNA
</button>
Iframe
There are two UI alternatives for the iframe integration. One suitable for more spacious user interfaces, with a fixed size of 468px per 598px, and a compact one, with a fixed size of 300px per 188px, suitable for narrow user interfaces.
<iframe
class="typingdna-verify"
data-typingdna-client-id=typingDNADataAttributes.clientId
data-typingdna-application-id=typingDNADataAttributes.applicationId
data-typingdna-payload=typingDNADataAttributes.payload
data-typingdna-callback-fn="callbackFn"
onClick="onTypingDNAVerifyButtonClickHandler();"
</iframe>
The class, data-typingdna-client-id, data-typingdna-application-id and data-typingdna-payload are mandatory attributes for the frontend snippet. The values for the data-typingdna-client-id, data-typingdna-application-id and data-typingdna-payload attributes are to be retrieved from the backend.
They are generated from the backend through the getDataAttributes function.
To use the compact form of the iframe, add the data-typingdna-compact attribute set to “on” in the iframe tag. If you want to use the standard one, don’t add this attribute at all.
In addition to the required attributes, optional values exist for additional configuration:
typingdna-method: This attribute defines the HTTP method (POST or GET) used to communicate with Verify 2FA. With POST (default), the end-user’s data will not be visible to them from within the
window or iframe.
typingdna-callback-fn: If you're using the default flow data attribute, which is 'standard', the JavaScript function will be called and will contain the one-time password (OTP) necessary for validation.
In the case of an error, the error details will be returned as a parameter instead. For security reasons this function will not be called if you are accessing an http website. The site needs to be accessed from https.
The callbackFn function will be called with the following parameters:
-
success: 1 or 0, depending on whether the OTP was successfully generated or not.
-
otp: The one-time password (OTP) generated by Verify 2FA, if success is 1.
-
error: The error that occurred if success is 0.
{ payload: { success: 1, otp: '123456'} }
{ payload: { success: 0, error: 'Internal server error'} }
Note: iFrames come with additional security concerns that you should consider.
The iFrame display mode should only be used for up-to-date and secure browsers.
For older browsers please use the pop-up display mode.
Always make sure to take the necessary precaution measures to mitigate all security threats when using iFrames.
Getting and validating the OTP
The OTP is generated during the Verify 2FA process for each enrollment and verification and is sent to the frontend in two ways, either to the JavaScript function typingdna-callback-fn or through the message event
fired on the Window object by the Verify 2FA pop-up window or iFrame. If you use the callbackFn, see the description of the incoming information above. If you wish to listen to the message event, the data being sent has the following parameters:
-
action: The action that was performed. Possible values are: sendOtp if the OTP was generated, onError if an error occurred.
-
payload: The payload that was sent. The payload is a JSON object with the following parameters: success, otp, error. (see the description of each parameter above)
Note: no matter which method is used, the data is sent only to the domain associated to the Application, in order to ensure a secure communication. See the section Create an Application for more information.
Once the OTP is generated by Verify 2FA and sent to your frontend, this needs to be verified in the Verify 2FA API and validate the user. In order to do this, you can use the method validateOTP of the TypingDNA Client, as in the following example:
const { success, code, message } = typingDNAVerifyClient.validateOTP({ email }, otp);
See the section API Services - Validate an OTP for more information on the returned values.