API Management

x-trulioo-api-key Sign Up to get your API key

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.

Pre-Requisites


  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 Version

    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

  2. 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.

Install


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
        

Styling


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">
        

Next Steps


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.

Verify


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?