Many popular applications verifying the customer mobile number automatically using the SMS OTP. This improves the online business. In the digital era, automating the mobile number verification is very important to get more trusted customers and it reduces the time involved in the verification process and the human error.

In this tutorial, I am going to explain how to send OTP message to the customer mobile number using the Nexmo API and Ionic Framework. And verify the OTP using your server(PHP, Java, Python etc). You can use any SMS gateway provider. Nexmo offers few free SMS. To test your code you can use Nexmo without any charges.

I split the SMS OPT verification tutorial using the Ionic Framework into two part.
1. Part1 - How to send OTP SMS to a custom mobile number using the Nexmo and Ionic.
2. Part2 - How to automatically capture the received OTP using the Ionic.

First, we will setup the Nexmo PHP REST API to send the OTP messages to a mobile number and then we move to the Ionic Framework to develop client-side components.

Browser Preview of the OTP Verification App.

Step1:

Go to the below URL and signup and login to get the key and secret from the Nexmo.

https://dashboard.nexmo.com/sign-up

Step2:

Once you received the key and secret, you need to create the REST API using any programming language. Here I am going to use the PHP. And I assume you already installed the PHP and composer(CLI Tool).

Create a new directory under the XAMPP htdocs directory and name it nexmosms.

Open the terminal/cmd and navigate to htdocs/nexmosms directory. And enter the below command.

composer require nexmo/client

It will download the needed library for Nexmo REST API.

Step3:

Create a PHP file under the nexmosms folder and paste the below code into the file and name it as send-sms.php.

<?php
require_once 'vendor/autoload.php';

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

$NEXMO_TO=$_GET['mobile'];
$NEXMO_FROM='Ampersand OTP';
$MESSAGE='1551 Ampersand OTP';

$client = $client = new Nexmo\Client(new Nexmo\Client\Credentials\Basic('556683ee', 
'a988046d5320c125'));


$message = $client->message()->send([
'to' => $NEXMO_TO,
'from' => $NEXMO_FROM,	
'text' => $MESSAGE
]);

echo "Sent message to " . $message['to'] . ". Balance is now " . 
$message['remaining-balance'] . PHP_EOL;

?>


1. Replace the API_KEY, API_SECRET with your Nexmo API_KEY, API_SECRET.
2. NEXMO_TO will be received from the Ionic Framework mobile application using the HTTP get request. Please use the country code before the mobile number. Example for India, use 91 as country code. And give your ten digit mobile number.

$NEXMO_TO='917788665544'

3. NEXMO_FROM can be any text.

$NEXMO_FROM='Ampersand Academy' 

4. MESSAGE - Here I gave a static OTP value. However, you have to generate the custom random number and store the mobile number and the OTP in the DB(MySQL, Oracle, NoSQL etc) to verify it. I leave it up to you.

The Nexmo offers 2 euro free credit. For India, they charge €0.0080/per message. So you can test with URL by giving a mobile number to NEXMO_TO variable and run the URL in the browser. You will get the SMS if everything works perfectly.

And the URL will look like below.

http://localhost/nexmosms/send-sms.php

Replace the localhost with local IP(like 192.168.0.145) address. You can find the local IP address in the Network preference section. Why because, when connected to a router, the localhost won't be recognized by the mobile application. Or deploy it on the live/cloud server and use the live/cloud URL.

Step4:

Server-side work is done. We have the REST API. We can pass the mobile number to the REST API to receive OTP. Now you need to setup the Ionic Framework project and call the REST API using the HTTP plugin with user mobile number.

Create a new Ionic 3 project using.

ionic start otpverify blank

Step5:

Cordova SMS plugin does not request the SMS READ permission by default. So we have to check the permission manually. Request the SMS READ permission using the Android Permission plugin. So Install the Android permission plugin using the below command.

cd otpverify
ionic cordova plugin add cordova-plugin-android-permissions
npm install --save @ionic-native/android-permissions

And install the Cordova sms plugin using the below command.

cordova plugin add cordova-plugin-sms

Step6:

Import the Android permission class to the app.module.ts file.

import { AndroidPermissions } from '@ionic-native/android-permissions';

Include the Android permission plugin to the app.module.ts file

providers: [AndroidPermissions,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

HTTP is used to make AJAX request. So import the HTTP to app.module.ts file.

import { HttpModule } from '@angular/http';

And include the HTTP in the imports of the app.module.ts file.

imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule
]

Step7:

Open the home.html file, Create input field to enter a mobile number. And create a button a click event to send OTP to mobiles.

<ion-item>
<ion-label floating>Enter Mobile Number</ion-label>
<ion-input type="text" [(ngModel)]="mobile"></ion-input>
</ion-item>

<button ion-button (click)="sendOTP()">Send OTP</button>

Step8:

Create an OTP verification page using the below command.

ionic g page otp-receive

Step9:

Import the HTTP,AlertController,OtpReceivePage to the home.ts file.

import { Component } from '@angular/core';
import { NavController,Platform,AlertController } from 'ionic-angular';
import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { OtpReceivePage } from '../otp-receive/otp-receive';


Create a variable to get the mobile number in home.ts file.

mobile='';

Create reference object in the constructor of home.ts file.

constructor(public alertCtrl: AlertController,
public http:Http,
public navCtrl:NavController) {
}

Step10:

Create a function to send the OTP message to the mobile number.

sendOTP()
{

if(this.mobile.length!=12)
{
let alert = this.alertCtrl.create({
title: 'Mobile Number Required!',
subTitle: 'Please enter your 10 digit mobile number with 91 country code!',
buttons: ['OK']
});
alert.present();
}
else
{
this.http.get('http://192.168.0.100/nexmosms/send-sms2.php')
.map(res => res.json())
.subscribe(res => {
        
//alert(JSON.stringify(res));
this.navCtrl.push(OtpReceivePage,{mobileno:this.mobile})
}, (err) => {
alert("failed");
});
}
}

The above function will look for the mobile number length. If the length is not equal to 12 then it will pop a notification. I validating the Indian mobile number. Two digit country code. Ten-digit mobile number. The length will vary for different countries.

And it will call your REST API with a user-entered mobile number as GET request using the HTTP. If the request is successful, then it will move to the OTP receive page using NavController. Don't forget to pass the mobile number as a parameter to the otp-receive page.

Get the Part2 using.

https://ampersandacademy.com/tutorials/ionic-framework-3/automate-sms-otp-verification-using-ionic3-with-nexmo-part2

Tested Device:

Moto G4 Plus

 

Nexmo PHP Reference.

https://github.com/Nexmo/nexmo-php


For other programming languages.

https://developer.nexmo.com/tools

To know more about the messaging

https://developer.nexmo.com/api/sms

The above link contains many sample code for different languages. This will be very helpful to learn more about the messaging using the Nexmo.

Summary:

In this tutorial, you learned how to send OTP SMS to the custom mobile number using the Nexmo PHP API and Ionic Framework. In the next tutorial, I will show you to read the received SMS automatically without leaving the app.

Get full source code using.

https://github.com/bharathirajatut/ionic3/tree/master/SMSOTPVerificationAutomate

Ionic App versions are very important when developing applications. Why because Ionic is changing rapidly. So all the code you browse/see on the blog won't work if it is not the suitable Ionic version. So check the version before using the Ionic code. Below is the Ionic 3 information while testing the app code.

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-sim : 5.0.13
    Node    : v6.10.0
    npm     : 5.6.0
    OS      : macOS High Sierra
    Xcode   : Xcode 9.1 Build version 9B55