Get Started with SubscriberCheck 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 SubscriberCheck using tru.ID's (IDlayr) 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 SubscriberCheck 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 SubscriberCheck 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 IDlayr 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 SubscriberCheck works. The Integration Guide provides a step by step guide on the workflow of a SubscriberCheck, and which devices need to act at what points of the workflow.

2. Install tru.ID (IDlayr) Mobile Web SDK

The tru.ID (IDlayr) 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 IDlayr has connectivity to.

The Flutter 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 IDlayr then a JSON object is returned similar to the example below:

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

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

Call your backend server to create SubscriberCheck

As described in the Integration guide step 1 is to create a SubscriberCheck. 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 IDlayr's SubscriberCheck API. If successful, the SubscriberCheck 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 SubscriberCheck

Step 2 of the integration guide is to process the SubscriberCheck. 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 SubscriberCheck

Step 3 of the integration guide is to complete the SubscriberCheck. 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 /subscriber_check/v0.2/checks/{check_id} with the JSON body below to complete the SubscriberCheck process:

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

Within the response of this PATCH request, there will be a field no_sim_change, this is the field used to show if the SIM card has been changed recently, which could be an indication whether the owner of the SIM card may be a victim of SIM swap fraud. If the value is true, then proceed with the SubscriberCheck.

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 IDlayr APIs work together see the SubscriberCheck Integration guide.

5. Perform a SubscriberCheck

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 SubscriberCheck 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 SubscriberCheck from a Mobile Web application.

6. Resources

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