Skip to main content

Face Login

Tutorial

HTML

First we need to add some base HTML:

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Incode</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<link
rel="stylesheet"
type="text/css"
media="screen"
href="incode-styles.css"
/>
</head>

<body>
<div id="container"></div>
<p id="success"></p>
</body>
</html>

Next, you need to add our SDK through npm/yard install.

Now you are ready to start using the SDK.

JavaScript

Initialization

The SDK is going to set a variable called OnBoarding. First, we need to initialize the instance with your API key and API URL and save it in a variable called onBoarding (or a name of your choosing):

let onBoarding;

function createOnBoarding() {
const apiKey = 'myapikey';//check delivery document shared by our Customer Success Manager
const apiURL = 'https://myurl.incodesmile.com'; //check delivery document shared by our Customer Success Manager
onBoarding = OnBoarding.create({ apiKey: apiKey, apiURL: apiURL });
}

Methods

We will use one method that is going to render our components for the login:

let onBoarding;

const container = document.getElementById('container');
const success = document.getElementById('success');

function showError() {
alert('Some error'); // this is for demo purposes so you should can handle errors how you want
}

function renderLogin() {
onBoarding.renderLogin(container, {
onSuccess: r => {
console.log('onSuccess', r);
success.innerHTML = `Welcome Back, your token is ${r.token}`; // this is for demo purposes. You should not show the token
},
onError: r => {
showError();
},
});
}

Final File

Our final JS file looks like this:

let onBoarding;
let token;

const container = document.getElementById('container');
const success = document.getElementById('success');

function log(r) {
alert(JSON.stringify(r));
}

function createOnBoarding() {
const apiKey = 'myApyKey';
const apiURL = 'https://web/api.example.com';
onBoarding = OnBoarding.create({
apiKey: apiKey,
apiURL: apiURL,
});
}

function renderLogin() {
onBoarding.renderLogin(container, {
onSuccess: r => {
console.log('onSuccess', r);
success.innerHTML = `Welcome Back, your token is ${r.token}`;
},
onError: r => {
showError();
},
});
}

// document is ready
document.addEventListener('DOMContentLoaded', function () {
createOnBoarding(); // initialize the instance
renderLogin(); // render Login component
});