Get Started with PhoneCheck on Flutter

Get Started with Flutter

This Guide will walk you through performing your first PhoneCheck within a Flutter application using a Node.js server. It covers:

The final simplified application structure looks as follows:

tru-id-phonecheck-example
├── app-example-flutter
│   ├── android
│   ├── assets
│   ├── ios
│   ├── lib
└── phonecheck-server
└── tru.json

And the running Flutter application looks and works as follows:

phone device wrapper

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.

1. Before you begin

You'll need to setup the Flutter development environment in order to build and run the application. This guide will assume you're using the Flutter CLI. For that reason, you'll also need XCode installed and setup for iOS and Android Studio setup for Android.

In order to execute a PhoneCheck you'll need a physical Android or iOS device. Android will work for Windows, MacOS and Linux. iOS is only supported with MacOS.

To expose the locally running Node.js server to the running mobile application you'll require a local tunnel solution such as ngrok.

To run through the guide as a whole you'll need a tru.ID account. If you don't already have an account, sign up now.The tru.ID tooling relies on the Node.js runtime. So please ensure you have the Node.js runtime installed.

Install and setup the tru.ID CLI

With Node.js install the tru.ID CLI (Command Line Interface) from your terminal.
$ npm install -g @tru_id/cli
After the installation you should setup the CLI with your tru.ID Default Credentials. These can be found within the tru.ID Console.
$ tru setup:credentials {YOUR_CLIENT_ID} {YOUR_CLIENT_SECRET} EU

Create a working directory

Create a directory that you will add the client and server example code to:

$ mkdir tru-id-phonecheck-example

And navigate into that directory:

$ cd tru-id-phonecheck-example

2. Setup the Node.js example server

The Node.js example server is used as an authority and sits between the Flutter application and the tru.ID APIs.

Clone the Node.js Server Example

Clone the tru.ID Node.js example server into thephonecheck-server directory:

$ git clone git@github.com:tru-ID/server-example-node.git phonecheck-server

Create a tru.ID project

Create a new tru.ID project and save the configuration to the phonecheck-server directory:

$ tru projects:create "phonecheck-server" --project-dir=phonecheck-server

You will see output similar to the following:

Creating Project "phonecheck-server"
Project configuration saved to "path_to/tru-id-phonecheck-example/phonecheck-server/tru.json"

The Node.js application will read your tru.id credentials from the tru.json project configuration file.

Run the tru.ID example server

Navigate into the phonecheck-server directory:

$ cd phonecheck-server

Install the application dependencies:

$ npm install

Run the application:

$ npm start

You will see output similar to the following indicating that the server application is running at http://localhost:8080:

> tru-node-server@0.1.0 start
> nodemon src/index.js
[nodemon] 2.0.4
[nodemon] to restart at any time, enter 'rs'
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting 'node src/index.js'
configuration:
{
project_id: '0055f3a3-6e06-4390-9048-4f5a9dfcbbd1',
name: 'phonecheck-server',
credentials: [
{
client_id: 'PROJECT_CLIENT_ID',
client_secret: 'PROJECT_CLIENT_SECRET',
created_at: '2021-01-11T15:44:14+0000',
scopes: [Array]
}
],
mode: 'live',
created_at: '2021-01-11T15:44:14+0000'
}
Example app listening at http://localhost:8080

Create a local tunnel for your server

In order for your mobile application to be able to interact with the locally running server you'll need to setup a local tunnel. For this example we'll use ngrok.

Run `ngrok` to create a local tunnel and to get a public URL which will be used in the mobile application configuration. Run the following command in a new terminal window:

$ ngrok http 8080

You will then see output similar to the following:

Session Status online
Account Phil Leggetter (Plan: Pro)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://d88e00a17e1c.ngrok.io -> http://localhost:8080
Forwarding https://d88e00a17e1c.ngrok.io -> http://localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00

Navigate to your ngrok HTTPS URL to ensure the server is accessible (https://d88e00a17e1c.ngrok.io from the above output).

3. Setup the Flutter example application

With the server running you can now setup and run the Flutter application.

Clone and configure the Flutter example application

Open a new terminal and ensure you are in the tru-id-phonecheck-example working directory. Run the following command to clone the Flutter example into a app-example-flutter directory:

$ git clone git@github.com:tru-ID/app-example-flutter.git

And navigate into the newly created app-example-flutter directory:

$ cd app-example-flutter

Install the application dependencies:

$ flutter pub get

In lib/main.dart update the configuration value for baseURL to point to the public ngrok URL of the Node.js example server. For example:

final String baseURL = "https://example.ngrok.io";

Install and run the Flutter App

info

Detailed information on running an application on a device can be found in the

Flutter documentation

.

Ensure your Android device is connected to your computer via USB with developer mode and USB debugging enabled.

Run the following in the terminal:

$ flutter run

The terminal output will look similar to the following:

$ Launching lib/main.dart on Greg’s iPhone in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: <project>
Running Xcode build...
└─Compiling, linking and signing... 3.3s
Xcode build done. 16.4s
Installing and launching... 13.8s
Syncing files to device Greg’s iPhone... 80ms
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

4. Perform a PhoneCheck

Enter your phone number including the country code and click "Verify". The application will look similar to the following:

phone device wrapper

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

5. Resources

6. Troubleshooting

No troubleshooting content at this time.

Made withacross the 🌍
© 2021 4Auth Limited. All rights reserved. tru.ID is the trading name of 4Auth Limited.