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
});