Get Started with PhoneCheck on Mobile Web

Get Started with Mobile Web

This guide walks you through what is required on your Mobile Web app in order to perform a PhoneCheck using tru.ID's Mobile Web SDK. However, if you wish to see the finished working example app, you can find it on our GitHub repository. It covers:

1. Before You Begin

To fully understand the functionality required to create a PhoneCheck in this guide, you will need to carry out some initial steps, such as creating an account, a project, and retrieving your workspace credentials. You'll also need to have an understanding of the workflow for a PhoneCheck to be successfully carried out.

The first step is to Setup Your Environment. This page walks you through what parts are required, such as installing the tru.ID CLI, creating a project, and if needed, running the demo development server.

The second step is to gain more of an understanding of how the PhoneCheck works. The Integration Guide provides a step by step guide on the workflow of a PhoneCheck, and which devices need to act at what points of the workflow.

2. Install tru.ID Mobile Web SDK

The tru.ID Mobile Web SDK can be used in two ways. The first is a direct import of the library into your HTML page:

<script src="https://cdn.jsdelivr.net/npm/@tru_id/tru-sdk-web/dist/tru-id-sdk.umd.js"></script>

Or the second is to install it into your node project with NPM:

npm install @tru_id/tru-sdk-web

3. How to implement into my app?

Importing and Initializing the SDK

If you're including the Javascript file directly into your HTML page, you've already initialized the SDK. However, if installed through NPM, you'll need to import the SDK with the following:

import truID from '@tru_id/tru-sdk-web'

Reachability

The Reachability API is a feature that enables applications to check whether the SIM card within a user's device is on a network that tru.ID has connectivity to.

The Web SDK has functionality built in to call the reachability, to call this you would need to run the following code:

truID.getReachability(url) # When installed via NPM
<script>
tru.ID.getReachability(url) # When imported via CDN
</script>

If the mobile network operator is supported by tru.ID then a JSON object is returned similar to the example below:

{
"network_id": "23410",
"network_name": "O2 UK",
"country_code": "GB",
"products": [
{
"product_id": "PCK",
"product_name": "PhoneCheck"
}
]
}

However, if it isn't supported, then an error is returned in JSON format.

Call your backend server to create PhoneCheck

As described in the Integration guide step 1 is to create a PhoneCheck. This step is a step where your mobile application needs to call your backend server with the mobile devices telephone number. Your backend server then makes a POST request to tru.ID's PhoneCheck API. If successful, the PhoneCheck API will return a response with the check_id and a unique check_url. Your backend server needs to return this check_url to the mobile device.

Open Check URL to process PhoneCheck

Step 2 of the integration guide is to process the PhoneCheck. This step is a step where the mobile application makes a GET request to the check_url provided in the previous step. The mobile device application then needs to follow all redirects, then on the last redirect, the JSON response will contain a code. This code will be used next.

truID.openCheckUrl(checkUrl, config) # When installed via NPM
tru.ID.openCheckUrl(url, config) # When imported via CDN

Call Backend server to complete PhoneCheck

Step 3 of the integration guide is to complete the PhoneCheck. This step is a step where the mobile application makes a POST request to your backend server with the check_id and the code. Your backend server then makes a PATCH request to /phone_check/v0.2/checks/{check_id} with the JSON body below to complete the PhoneCheck process:

[
{
"op": "add",
"path": "/code",
"value": "{check_code}"
}
]

Finally, your backend server would need to return a success or failure response to your mobile application to allow the user of this application to proceed.

4. Setup the Mobile Web example application

The mobile web example application comes bundled with the [Node.js Demo Development Server]https://github.com/tru-ID/dev-server so clone this repository first.

For more detailed information on how the mobile application, the Node.js server and the tru.ID APIs work together see the PhoneCheck Integration guide.

5. Perform a PhoneCheck

Open up your mobile web browser and navigate to the public ngrok HTTPS URL.

Once the default web page has loaded, scroll down to the Example Pages and click the Mobile Web PhoneCheck link. The page that loads is the Mobile Web example application.

If you are on WiFi the application will prompt you to turn it off. Once you have WiFi disabled, enter your phone number including the country code and click "Verify my phone number". The application will look similar to the following:

phone device wrapper

With that, you've completed your first PhoneCheck from a Mobile Web application.

6. Resources

Download our Developer Console mobile app
Made withacross the 🌍
© 2024 4Auth Limited. All rights reserved. tru.ID is the trading name of 4Auth Limited.