Web SDK PoC
In order to make a fast PoC you can copy and paste the following code. We assume that the fast PoC will be a vanilla HTML/JavaScript page. You will need the trial token that you can find on the Credentials section of the Dashboard
1. Web SDK PoC code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Alice Onboarding: POC</title>
<!-- Import the Alice Web SDK library -->
<script src="https://unpkg.com/aliceonboarding@8.0.12/dist/aliceonboarding.min.js"></script>
<!-- Import the Alice Web SDK CSS styles -->
<link rel="stylesheet" href="https://unpkg.com/aliceonboarding@8.0.12/dist/aliceonboarding.css" />
<style type="text/css">
.info-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: "Nunito", sans-serif;
padding: 1rem;
}
</style>
<script>
// It is necessary to use an event to initialize the Onboarding
window.onload = () => {
startOnboarding();
};
// Declare a function to wrap all Alice Onboarding code
async function startOnboarding() {
// The following code will configure your Onboarding
// Add your trial token -> you can find it in the Credentials section of your Dashboard (Sandbox Dashboard)
let trialToken = "";
// Is mandatory to use an email in order to identify your user in this fast POC (Trial Authentication requirement)
let email = "yourexampleemail@example.com";
// The user will be able to choose the issuing country of the document
let issuingCountry = "SELECT";
// You can set a specific nationality for the required document.
// let issuingCountry = "ESP";
//If you are using the .AnyDocument feature you will be able to select which types of documents are accepted:
let acceptedDocumentTypes = [aliceonboarding.DocumentType.IDCARD, aliceonboarding.DocumentType.RESIDENCEPERMIT, aliceonboarding.DocumentType. DRIVERLICENSE, aliceonboarding.DocumentType.PASSPORT];
// Define your capture configuration parameters:
let documentStageConfig = new aliceonboarding.DocumentStageConfig({
capturerType: aliceonboarding.DocumentCapturerType.CAMERA,
automaticCapture: true
});
// This class MUST only be used for a POC against the sandbox environment.
// In the production environment you MUST implement the authentication mechanism in your backend (see: [https://docs.alicebiometrics.com/onboarding/ sections/alice_integration/authentication/](https://docs.alicebiometrics.com/onboarding/sections/alice_integration/authentication/))
// "sandbox" string configures the environment for the trial authenticator method.
let authenticator = new aliceonboarding.TrialAuthenticator({
sandboxToken: trialToken,
userInfo: {
email,
},
environment: "sandbox"
});
// Initialize your SDK to use the Sandbox Environment
aliceonboarding.Onboarding.setEnvironment("sandbox");
// Callbacks that will be called after the user completes their onboarding
// This one is called when the user successfully completes the onboarding
// The userInfo object contains a brief summary about the user. Retrieving
// the complete information about the user is a backend operation
function onSuccess(userInfo) {
console.log("onSuccess: " + userInfo);
}
// This one is called when an error happens during the onboarding
function onFailure(error) {
console.log("onFailure: " + error);
}
// This one is called when the user exits the onboarding process without
// completing it
function onCancel() {
console.log("onCancel");
}
try {
let userToken = "";
try {
// Here we use the authenticator to retrieve the user token
userToken = await authenticator.execute();
} catch (e) {
if (e.code === 500 || e.code === 401) {
// The following alert will be displayed if you are using an incorrect Trial Token.
window.alert(
"Make sure you are using the trial token of your Sandbox credentials, you can find it in your Alice Dashboard. https://dashboard.sandbox. alicebiometrics.com/"
);
} else console.log(e);
}
// Initialize the Onboarding configuration
let config = new aliceonboarding.OnboardingConfig()
// You must define each of the steps needed to complete the Onboarding.
// The user will have to complete all them in order to complete the Onboarding.
// Token obtained with TrialAuthenticator class only in trial environment.
.withUserToken(userToken)
// The following Step will require a Selfie to the User.
.withAddSelfieStage({})
// The following Step configures the automatic capture for any document contained in the acceptedDocumentTypes array/list if it's supported by Alice. The document will be detected automatically if it's a document from Spain or France.
.withAddAnyDocumentStage({ allowedTypes: acceptedDocumentTypes })
// The following Step configures the automatic capture for an IdCard
.withAddDocumentStage({
documentType: aliceonboarding.DocumentType.IDCARD,
issuingCountry,
documentStageConfig
})
// The following Step configures the automatic capture for a Residence Permit
.withAddDocumentStage({
documentType: aliceonboarding.DocumentType.RESIDENCEPERMIT,
issuingCountry,
documentStageConfig
})
// The following Step configures the automatic capture for a Driving License
.withAddDocumentStage({
documentType: aliceonboarding.DocumentType.DRIVERLICENSE,
issuingCountry,
documentStageConfig
})
// The following Step configures the automatic capture for any supported Passport.
.withAddDocumentStage({
documentType: aliceonboarding.DocumentType.PASSPORT,
issuingCountry,
documentStageConfig
});
// Define the id from the component where the onboarding will be displayed.
// In this example the div has "alice-onboarding-mount" as id.
let onboarding = new aliceonboarding.Onboarding({
idSelector: "alice-onboarding-mount",
onboardingConfig: config
});
// Run the Onboarding with the previously configured parameters
// The Onboarding will call one of the defined callbacks
onboarding.run(onSuccess, onFailure, onCancel);
} catch (e) {
// The following alert will show you any kind of error in the initializing proccess.
alert(e); // Remember not to include it in your production page.
console.log(e);
}
}
</script>
</head>
<body>
<div class="info-container">
<h1>Alice Web SDK POC</h1>
<div>
If you don't have your Trial Token, please
<a href="https://dashboard.sandbox.alicebiometrics.com/#/credentials" target="_blank">access your
Dashboard</a>
and get it
</div>
<div>The Alice Web SDK should be displayed under this div</div>
</div>
<!-- Is mandatory to have an "empty div" with an id where the onboarding will be displayed -->
<div id="alice-onboarding-mount"></div>
</body>
</html>
```