Application ID

This is the application ID, you should send with each API request.

EmbedID

Beta

Note that EmbedID is currently in beta. It is distributed as open source code under the Apache License 2.0.

EmbedID is a Trulioo built, React component to embed your entire Trulioo integration in a snippet of code. When you add it to your site it:

  • Accesses your Trulioo configuration to see what countries you have and what fields are available for each country.
  • From this it can generates a HTML form directly in your onboarding flow. By embedding it you simply display the form to your end-user.
  • When your end-user clicks submit EmbedID automatically builds and sends a request to Trulioo.
  • It then presents the end-user's data that was filled in, as well as the verification response in a callback that you can process to any tools of your choosing.

Trulioo offers two guided paths to get started with EmbedID: keep reading here for a step-by-step introduction, or head over to Trulioo's github, clone our own sample app, and get up and running that way.

  1. npm and Node installed npm install page. Note npm comes with node. Run the following on your command line/terminal to ensure it's installed:
  • cmd/terminal
npm -v

npm Verison

You need to have an npm version of 5.2+ to install the sample web app below in step 3. To update your version see the npm install page's 'A note on versions section'

npm errors

If you have errors running npm on windows ensure to add Node to your PATH variable, explained here: https://stackoverflow.com/a/27864253

  1. For a sample React site to try EmbedID out, React provide a sample application that is easy to install create-react-app.
  • cmd/terminal
npx create-react-app embedid-app
cd embedid-app
npm start

npx errors

Some users have had trouble on windows running npx, if this happens try running C:/Your_Node_Directory/npx create-react-app embedid-app

Optional/Useful

  1. A knowledge of Web development.
  2. A knowledge of React Components.

With all of the pre-requisites sorted you now need to add EmbedID to your project. Also on npm, run the following command:

  • cmd/terminal
npm install trulioo-react

Next go to /src and edit App.js to be the following:

  • App.js
import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import EmbedID from 'trulioo-react/EmbedID';

    class App extends Component {
      render() {
        const handleResponse = (e) => {
        // handle verification submission result here ...
          console.log(e);
        }

        return (
          <EmbedID url='http://localhost:5000' handleResponse={this.handleResponse} />
        );
      }
    }

    export default App;
    

Going back to the cmd/terminal run the following from the application's root to start:

  • cmd/terminal
npm start

EmbedID also plays really nicely with bootstrap. Adding the following line to your public/index.html will add a bootstrap theme to your form.

  • index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Now that the front end tool is rendering we simply need to hook it up to Trulioo's Normalized API. Your proxy doesn't need to modify or transform any of the requests or responses from Trulioo's API. The Frontend tool expects the following endpoints:

  • GET /api/getcountrycodes this needs to call the Get Country Codes endpoint. The endpoint will respond with an array of country code strings.
  • GET /api/getrecommendedfields/:countryCode where countryCode is a url parameter (It's value will be one of the country codes selected from the previous call). It needs to call the Get Recommended Fields endpoint which will return a JSON Schema of all fields recommended by Trulioo for that specific country that maximize the likelihood of you verifying individuals.
  • GET /api/getcountrysubdivisions/:countryCode where countryCode is a url parameter (It's value will be one of the country codes selected from the previous call). It needs to call the Get Country Subdivisions endpoint which returns an array of objects with the country Subdivisions. EmbedID uses this array to populate the dropdown for State/province.
  • GET /api/getdetailedconsents/:countryCode where countryCode is a url parameter (It's value will be one of the country codes selected from the previous call). It needs to call the Get Detailed Consents endpoint which returns an array of objects with Datasources that require explicit end-user consent. EmbedID presents these consents as checkboxes that your user can add consent to so the requirements for using that datsource are met automatically.
  • POST /api/verify this needs to call the Verify endpoint. EmbedID passes the form input as a request body that can be sent straight to Trulioo.

Now that EmbedID is running in your browser, refresh your browser tab.

  • You should see a dropdown with all of your countrycodes, select one to populate your form.
  • Fill in the data in the fields to submit to Trulioo.
  • The submit button will build the request to Trulioo and send it for you.
  • You can access the data that was filled in, as well as the verification response in the handleResponse method of App.js.

Just seeing a text box and no dropdowns?

This means that the frontend is having trouble communicating with the proxy possible solutions:

  • Is the port number the same in your EmbedID code as in your .env (TRULIOO_PORT)?
  • Is there an endpoint /countryCodes that the proxy has available?
  • Is the proxy running?