Quickstart

Quickly get started using the SDK, with just a few lines of code.

The Library has two ways for using the services:

1. Embedded with iFrame: This method enables you to create an iframe on your page/app and use with iframe to the methods of the class provided. Features pre-caching of the assets before calling the service methods when initilization occurs, in this way the user will proceed faster.

2. Redirect: This method allows the redirection to our webapp to handle the service you need.

As an example we use an iframe and perform an Onboarding. The result of the Onboarding is retrieved by a function callback added to the onboarding method.

The response contains a property called result of type boolean and the id of the detected user only if result is true. For further information about the response check the response here.

Steps

To start using iframe we need:

1. An frontend with an iframe HTML element
2. The library installed with npm or yarn.
3. A function callback to retrieve the response of the onboarding method.

React App example

import { useEffect, useRef } from 'react';
import { v4 as uuidv4 } from 'uuid';
import Facenote from '@facenote/webapp-sdk';

function App() {
  const iframe = useRef(null);

  useEffect(() => {
    async function init() {
      const clientId = process.env.REACT_APP_CLIENT_ID;
      const clientSecret = process.env.REACT_APP_CLIENT_SECRET;
      const deviceId = process.env.REACT_APP_DEVICE_ID;

      const facenote = new Facenote();
      await facenote.initialize(clientId, clientSecret, deviceId);

      const userId = uuidv4();

      const functionCallback = useMemo(() => {
        return async (response) => {
          console.log(response)
          if (response.result) {
            // Do something with the response
          }
        };
      }, []);

      // URL callback must be undefined when using iframe with function callback
      const urlCallback = undefined;

      await facenote.onboarding(
        userId,
        urlCallback,
        { iframe: iframe.current },
        functionCallback
      );
    };

    init();
  }, []);


  return (
    <div className='App'>
      <iframe
        ref={iframe}
        style={{ backgroundColor: '#fff', border: 0, borderRadius: 15 }}
        title='example-iframe'
        height='600'
        width='600'
      />
    </div>
  );
}

export default App;