Skip to main content

Inline Hosted Options

The Verified platform can be easily embedded into your front-end user experience through a variety of modern integration options. This will allow you to display a branded UI to capture documents, enroll a user's biometrics, and verify their transactions, without a user having to leave their screen.

By hosting the UX within the same screen, a user will never have to interrupt their journey to check for an SMS, open an email, or switch devices, which will lead to a more seamless experience.

UI Options

Proof and Selfie Transactions

First, install the NPM package to your solution:
npm i @authid/react-component
Next, you can try out the React code generator below by simply pasting in your OperationId and OneTimeSecret that you received from the API response. Copy this fragment to the correct place in your application code.

Operation ID:
One time secret:
import AuthIDComponent from '@authid/react-component';

const App = () => {
return <AuthIDComponent url="https://id.authid.ai/?i=&s=" />
};

Verification Transactions

First, install the NPM package to your solution:
npm i @authid/react-component
Next, you can try out the React code generator below by simply pasting in your TransactionId and OneTimeSecret that you received from the API response. Copy this fragment to the correct place in your application code.

Transaction ID:
One time secret:
import AuthIDComponent from '@authid/react-component';

const App = () => {
return <AuthIDComponent url="https://id.authid.ai/?t=&s=" />
};
caution

If you are using any of these options for FIDO2 transactions, note that you must update the HTML to allow those features to work. The properties are as follows:

  • React: Add a property called webauth=true. Example below:
import AuthIDComponent from '@authid/react-component';

const App = () => {
return <AuthIDComponent
webauth=true
url="https://id.authid.ai/..." />
};
  • IFrame/Web Component: Add a property called data-webauth="true". Example below:
<script src="path-to/authid-web-component.js"></script>
<authid-component
data-webauth="true"
data-url="https://id.authid.ai/...">
</authid-component>

Additional Parameters

You can further modify the user interface behavior by appending the source URL with the following additional parameters:



ParameterDescription
uGives user a choice allowing to upload the document image
CID=LOGO_NAMECustomizes the top logo displayed to the user, allowing for true embedded experience

There are some differences in UX when Verified detects that it is being hosted in IFrame. The last page that says "Submitted, you may now close the window" would only say "Submitted" as you probably would not want the user to close the window hosting the IFrame.



If IFrame dimensions are not enough to show the Verified interface then the standard scrollbars appear. Therefore, it's desirable to set the minimal width and height to 500 and 750 pixels respectively. You may want to further increase that for best fit.



IFrame and Web Component Events

If you are opting to use our IFrame or Web Component integrations, there is a set of events you can subscribe to in order to more deeply embed the UI into your solution. The element will notify the parent frame when it reaches what is called an “end_page”. Using the parent.postMessage call it will pass simple messages back to the parent frame. The message will have a value set for the “success” variable and a value for the “pageName” variable. These are detailed below:

ValueDescription
success

true or false
A true value indicates that the transaction finished successfully. Note - The pageName should always be "verifiedPage".
A false value indicates that the transaction either isn't finished yet, or finished unsuccessfully.

pageName

This is the page name that the app has currently reached. Much of the time the page name is quite descriptive enough to ascertain the reason for the message. Note that this doesn't mean that the transaction is finished yet. The only page that will result in "success" being true will be the "verifiedPage".

All transaction types

defaultFailedPage: A failure occurred that is not currently handled by other means
livenessErrorPage: An error occurred during the Liveness Test
networkErrorPage: Network throughput was insufficient for the Liveness Test to function properly
QRCodePage: The user has opted to move this transaction to their phone. Note - This QR Code link will be outside of the IFrame, so may have to be handled as the QR Code will not include the IFrame URL
requestTimeoutPage: A network request took longer than acceptable
standardErrorPage: An error occurred. While in debug mode this page will show instead of the other more specific pages in this list
transactionNotValidPage: The transaction is no longer valid. Most commonly the transaction has already been finished
transactionMaxAttemptsPage: The max attempts count for the transaction has been reached
verifiedPage: The transaction has finished successfully
verifyDeclinedPage: The customer declined the transaction. Available for all transaction types.
videoDeviceNotFoundPage: No camera was detected

Proof transactions only

docScanResolutionTooLowPage: The camera resolution is too low to complete the Proof transaction
docScanWasmTimeoutPage: The barcode scan timed out
documentFailedNonMobilePage: The document scan failed and the user is not on a mobile device
documentFailedPage: The document scan failed for some reason

Verify transactions only

verifiedMatchFailPage: The Verify attempt failed to match the user to their stored biometric credential

Here is the IFrame being used on an example page to demonstrate how you can subscribe to events that are transmitted:

<html>

<head>
<meta name="viewport" content="initial-scale=1,user-scalable=no">
<style>
#theFrame {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

#thePage {
text-align: center;
}

#theMessage,
#theHeader {
text-align: center;
}

.hidden {
display: none;
}
</style>
</head>

<body>
<div id="thePage" class="hidden">
<div id="theHeader"></div>
<div id="theMessage"></div>
</div>
<iframe id="theFrame" allow="fullscreen *;camera *;"></iframe>
<script>
(function () {
window.addEventListener("message", (event) => {
console.log(JSON.stringify(event.data))

if (event.data.success) {
document.querySelector("#theHeader").innerText = "Passed"
} else {
switch (event.data.pageName) {
case "documentFailedPage":
case "documentFailedNonMobilePage":
case "networkErrorPage":
case "livenessErrorPage":
case "docScanWasmTimeoutPage":
case "requestTimeoutPage":
//We don't want to stop the BWApp for these pages
return
case "transactionNotValidPage":
case "transactionMaxAttemptsPage":
case "QRCodePage":
case "verifiedMatchFailPage":
case "verifyDeclinedPage":
case "docScanResolutionTooLowPage":
case "videoDeviceNotFoundPage":
case "standardErrorPage":
case "defaultFailedPage":
break
}
document.querySelector("#theHeader").innerText = "Failed"
}
document.querySelector("#theMessage").innerText = event.data.pageName

document.querySelector("#theFrame").style.display = "none"
document.querySelector("#thePage").style.display = "block"
}, false);


document.getElementById("theFrame").setAttribute("src", "index.html" + window.location.search)
})();
</script>
</body>

</html>