In this post we will learn how to read SMS in an Ionic app automatically. Reading SMS is a popular feature found in majority of popular apps today. Mostly, this is used for automatic approval of OTP and passwords in authentication or online payment processes.
Complete source code of this tutorial is available here — Ionic-4-sms-receive
What is Ionic 4?
You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.
So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.
Why receive SMS automatically?
Apps can communicate in a number of ways. Most apps receive information from servers using push notifications. Push notification information can be easily processed by the apps automatically. (You can read my detailed blog on how to include push notifications in an Ionic 4 app)
But on occasions, you get information via a third party service which can be delivered effectively only using SMS. For example, when making a credit card payment, you receive an SMS containing the OTP (one time password) for the transaction. Modern apps automatically read the SMS and capture the OTP, and complete the transaction process. This brings in a huge UX boost, where user doesn’t have to interact with app for a long time to make the payment.
Another example is an authentication process. Apps which are mobile number centric, mostly allow users to register with their phone number. To validate if the user has the phone number he/she claims the app server sends an OTP, and the app can verify the OTP automatically to register the user, something like this :
Structure
We are going to build a small Ionic 4 app with the SMS reading feature. Following are the steps we’ll take
- Step 1 — Create a sample Ionic 4 app with dummy registration flow
- Step 2 — Implement Cordova plugin to read SMS
- Step 3 — Build app on android device
- Step 4 — Test automatic SMS read to approve a sample registration
Let’s dive right in
Step 1 — Create a sample Ionic 4 app
I have covered this topic in detail in this blog.
In short, the steps you need to take here are
- Make sure you have node installed in the system (V10.0.0 at the time of this blog post)
- Install ionic cli using npm (mine is V4.11.0 at the time of this post)
- Create an Ionic app using
ionic start
You can create a blank starter for the sake of this tutorial. On running ionic start blank , node modules will be installed. Once the installation is done, run your app on browser using
$ ionic serve
Here is how the app will look like.
The UI is pretty simple for a registration screen. Here’s the flow
- User enters the Email and password and clicks “Next”
- OTP input shows up. At this point, your server should send an SMS to this number. We will simulate this by sending SMS from another phone to our app build device
- App reads the SMS, and fills it up in the OTP input. If in a real scenario, OTP is not automatically read, user can always input it manually. But for demo purpose we’ll keep the OTP input read-only
- Once OTP is received, you can proceed to “Register”
Complete source code of this tutorial is available in the Ionic-4-sms-receive, so you can copy the HTML from there.
We’ll see the code for receiving and reading SMS in subsequent steps
Step 2 — Implement Cordova plugin to read SMS
For reading SMS via Ionic 4 app, we need to implement a Cordova plugin cordova-plugin-sms-receive. This plugin is not yet in Ionic-Native collection, but works fine on devices.
To install the plugin, run
$ ionic cordova plugin add cordova-plugin-sms-receive
Import the plugin in your login.page.ts using
declare var SMSReceive: any;
This will make SMSReceive variable available for the page. Now, there are two methods and one event available with the plugin
- SMSReceive.startWatch()
- SMSReceive.stopWatch()
and onSMSArrive event. Let’s see their implementation
SMSReceive.startWatch
This method initiates listening for an SMS. That means, the app starts to track any incoming SMS, and can now read the content of the SMS. It is important to start watching the SMS only when required.
When this method is called for the first time, the app will ask for permission from the user
Following is the code snippet for startWatch method
SMSReceive.stopWatch
This method stops the watch for SMS reading. It is important to stop watching SMS once you have read the SMS, or after a certain time period (in case automatic read fails). Otherwise the app will always keep watching all SMS. That can affect performance, as well as, some device can assume your app to be intrusive.
stopWatch method can be written as
SMSReceive.stopWatch(
() => { console.log('watch stopped') },
() => { console.log('watch stop failed') }
)
onSMSArrive
This event is triggered when SMS is read by the plugin (app). In the response you get the SMS information like address (i.e. sender’s phone no. ), body (SMS content) as shown in following JSON response
{"address":"+918209313520",
"body":"673526 is your OTP for enappd_starters",
"date_sent":1561025426000,
"date":1561025428740,
"service_center":"+917012075009"}
Overall, our login.page.ts looks like this
Step 3 — Build app on android device
If you have carried out the above steps correctly, Android build should be a breeze.
Run following command to create Android platform
$ ionic cordova platform add android
Once platform is added, run the app on device (Make sure you have a device attached to the system). You’ll need an actual SIM connection to receive SMS
$ ionic cordova run android
Once your app is up and running on the device, we’ll send SMS from another device simulating a server behavior
Step 4 — Test automatic SMS reading to approve a sample registration
In case you missed it in Step 1, here are the steps again.
- User enters the Email and password and clicks “Next”
- OTP input shows up
- At this point, send an SMS from another device to your build device
- App reads the SMS, and fills it up in the OTP input
- Once OTP is received, you can proceed to “Register”
The complete process will appear something like this
Conclusion
In this blog you learnt how to implement automatic SMS reading in an Ionic 4 app. This feature is useful in modules like automatic OTP reading for authentication or automatic OTP reading for online transactions.
That’s all for this blog. This was a small read, but a very interesting feature for your next Pro app.
Stay tuned for more Ionic blogs !
Complete source code of this tutorial is available here — Ionic-4-sms-receive
Next Steps
Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try
- Ionic 4 PayPal payment integration — for Apps and PWA
- Ionic 4 Stripe payment integration — for Apps and PWA
- Ionic 4 Apple Pay integration
- Twitter login in Ionic 4 with Firebase
- Facebook login in Ionic 4 with Firebase
- Geolocation in Ionic 4
- QR Code and scanners in Ionic 4 and
- Translations in Ionic 4
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App
This article was originally published on Enappd.
Top comments (0)