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
- React
- IFrame
- Web Component
npm i @authid/react-component
import AuthIDComponent from '@authid/react-component';
const App = () => {
return <AuthIDComponent url="https://id.authid.ai/?i=&s=" />
};
<iframe
src="https://id.authid.ai/?i=&s="
allow="fullscreen *;camera *;encrypted-media *;"
width="100%"
height="100%">
</iframe>
npm i @authid/web-component
Next, you can try out the Web Component 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. Copy this fragment to the correct place in your application code.
<script src="path-to/authid-web-component.js"></script>
<authid-component
data-url="https://id.authid.ai/?i=&s=">
</authid-component>
Verification Transactions
- React
- IFrame
- Web Component
npm i @authid/react-component
import AuthIDComponent from '@authid/react-component';
const App = () => {
return <AuthIDComponent url="https://id.authid.ai/?t=&s=" />
};
<iframe
src="https://id.authid.ai/?t=&s="
allow="fullscreen *;camera *;encrypted-media *;"
width="100%"
height="100%">
</iframe>
npm i @authid/web-component
Next, you can try out the Web Component 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.
<script src="path-to/authid-web-component.js"></script>
<authid-component
data-url="https://id.authid.ai/?t=&s=">
</authid-component>
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:
Parameter | Description |
---|---|
u | Gives user a choice allowing to upload the document image |
CID=LOGO_NAME | Customizes 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:
Value | Description | ||||||
---|---|---|---|---|---|---|---|
success |
| ||||||
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".
|
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>