How to automatically read SMS in Ionic 4 apps
Tags: ionic, sms, app, read
Published: 2019-10-04 15:33:51

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="43a0" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="4048" class="graf graf--p graf-after--figure">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.</p><blockquote name="3c4c" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/Ionic-4-sms-receive"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-sms-receive</strong></a></blockquote><h3 name="bd0a" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3 is-selected">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> 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.</p><p name="de54" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;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.</p><h3 name="4199" class="graf graf--h3 graf-after--p">Why receive SMS automatically?</h3><p name="313f" class="graf graf--p graf-after--h3">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 <a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">how to include push notifications in an Ionic 4 app</a>)</p><p name="0b77" class="graf graf--p graf-after--p">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.</p><p name="fedc" class="graf graf--p graf-after--p">Another example is an <strong class="markup--strong markup--p-strong">authentication process</strong>. 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&nbsp;:</p><figure tabindex="0" contenteditable="false" name="01fb" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 534px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*l0kPFuSfKXuc89wKhU-nww.gif" data-width="300" data-height="534" src="https://cdn-images-1.medium.com/max/720/1*l0kPFuSfKXuc89wKhU-nww.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">App reads the SMS automatically</figcaption></figure><h3 name="86dc" class="graf graf--h3 graf-after--figure">Structure</h3><p name="9c9b" class="graf graf--p graf-after--h3">We are going to build a small Ionic 4 app with the SMS reading feature. Following are the steps we’ll take</p><ul class="postList"><li name="6079" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Create a sample Ionic 4 app with dummy registration flow</li><li name="c774" class="graf graf--li graf-after--li">Step 2&#8202;—&#8202;Implement Cordova plugin to read SMS</li><li name="a931" class="graf graf--li graf-after--li">Step 3&#8202;—&#8202;Build app on android device</li><li name="340b" class="graf graf--li graf-after--li">Step 4&#8202;—&#8202;Test automatic SMS read to approve a sample registration</li></ul><p name="802e" class="graf graf--p graf-after--li">Let’s dive right in</p><figure tabindex="0" contenteditable="false" name="0d70" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 255px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51%;"></div><img class="graf-image" data-image-id="1*VHgNxa8BXkCZwKSTgU17oA.gif" data-width="500" data-height="255" src="https://cdn-images-1.medium.com/max/720/1*VHgNxa8BXkCZwKSTgU17oA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Oops, wrong dive&nbsp;!</figcaption></figure><h3 name="0f5d" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create a sample Ionic 4&nbsp;app</h3><blockquote name="da3b" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.0.0 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (mine is V4.11.0 at the time of this post)</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">blank</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start blank</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="6851" class="graf graf--p graf-after--pre">Here is how the app will look like.</p><figure tabindex="0" contenteditable="false" name="5817" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 476px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 68.10000000000001%;"></div><img class="graf-image" data-image-id="1*WHvhyUzujVgUZY_I4SXaHw.png" data-width="1024" data-height="697" src="https://cdn-images-1.medium.com/max/720/1*WHvhyUzujVgUZY_I4SXaHw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">App screens for Ionic 4 SMS receiving example</figcaption></figure><p name="e39d" class="graf graf--p graf-after--figure">The UI is pretty simple for a registration screen. Here’s the flow</p><ul class="postList"><li name="ad70" class="graf graf--li graf-after--p">User enters the Email and password and clicks <strong class="markup--strong markup--li-strong">“Next”</strong></li><li name="bd20" class="graf graf--li graf-after--li">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</li><li name="3685" class="graf graf--li graf-after--li">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 <strong class="markup--strong markup--li-strong">read-only</strong></li><li name="1cd2" class="graf graf--li graf-after--li">Once OTP is received, you can proceed to <strong class="markup--strong markup--li-strong">“Register”</strong></li></ul><p name="0c8d" class="graf graf--p graf-after--li">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/Ionic-4-sms-receive"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic-4-sms-receive</a>, so you can copy the HTML from there.</p><p name="7655" class="graf graf--p graf-after--p">We’ll see the code for receiving and reading SMS in subsequent steps</p><h3 name="db52" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Implement Cordova plugin to read&nbsp;SMS</h3><p name="615d" class="graf graf--p graf-after--h3">For reading SMS via Ionic 4 app, we need to implement a Cordova plugin <a href="https://www.npmjs.com/package/cordova-plugin-sms-receive"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">cordova-plugin-sms-receive</a>. This plugin is not yet in Ionic-Native collection, but works fine on devices.</p><p name="ca95" class="graf graf--p graf-after--p">To install the plugin, run</p><pre name="9ab8" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-sms-receive</pre><p name="3bbb" class="graf graf--p graf-after--pre">Import the plugin in your <code class="markup--code markup--p-code">login.page.ts</code> using</p><pre name="1423" class="graf graf--pre graf-after--p">declare var SMSReceive: any;</pre><p name="ed16" class="graf graf--p graf-after--pre">This will make <code class="markup--code markup--p-code">SMSReceive</code> variable available for the page. Now, there are two methods and one event available with the plugin</p><ul class="postList"><li name="2cf5" class="graf graf--li graf-after--p">SMSReceive.startWatch()</li><li name="be03" class="graf graf--li graf-after--li">SMSReceive.stopWatch()</li></ul><p name="74e8" class="graf graf--p graf-after--li">and <code class="markup--code markup--p-code">onSMSArrive</code> event. Let’s see their implementation</p><h4 name="3544" class="graf graf--h4 graf-after--p">SMSReceive.startWatch</h4><p name="1ed8" class="graf graf--p graf-after--h4">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.</p><p name="ef1e" class="graf graf--p graf-after--p">When this method is called for the first time, the app will ask for permission from the user</p><figure tabindex="0" contenteditable="false" name="3ae7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 400px; max-height: 276px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 69%;"></div><img class="graf-image" data-image-id="1*B8A8oV5dbiPO225VFt3gMg.jpeg" data-width="400" data-height="276" src="https://cdn-images-1.medium.com/max/720/1*B8A8oV5dbiPO225VFt3gMg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">First SMS watch request asks for permission on Android&nbsp;device</figcaption></figure><p name="119c" class="graf graf--p graf-after--figure">Following is the code snippet for <strong class="markup--strong markup--p-strong">startWatch</strong> method</p><figure tabindex="0" contenteditable="false" name="e721" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/6f473e9fa1c053f52b8ee2bef369c429.js %}</div></div></figure><h4 name="164b" class="graf graf--h4 graf-after--figure">SMSReceive.stopWatch</h4><p name="1624" class="graf graf--p graf-after--h4">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.</p><p name="27c0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">stopWatch</strong> method can be written as</p><pre name="37a5" class="graf graf--pre graf-after--p">SMSReceive.stopWatch(<br>() =&gt; { console.log('watch stopped') },<br>() =&gt; { console.log('watch stop failed') }<br>)</pre><h4 name="fccc" class="graf graf--h4 graf-after--pre"><code class="markup--code markup--h4-code">onSMSArrive</code></h4><p name="a9da" class="graf graf--p graf-after--h4">This event is triggered when SMS is read by the plugin (app). In the response you get the SMS information like <code class="markup--code markup--p-code">address</code> (i.e. sender’s phone no. ), <code class="markup--code markup--p-code">body</code> (SMS content) as shown in following JSON response</p><pre name="7332" class="graf graf--pre graf-after--p">{"address":"+918209313520",<br>"body":"673526 is your OTP for enappd_starters",<br>"date_sent":1561025426000,<br>"date":1561025428740,<br>"service_center":"+917012075009"}</pre><p name="0657" class="graf graf--p graf-after--pre">Overall, our <code class="markup--code markup--p-code">login.page.ts</code> looks like this</p><figure tabindex="0" contenteditable="false" name="2117" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/3871ce67427a169fdf59abc4237ee7cc.js %}</div></div></figure><h3 name="5051" class="graf graf--h3 graf-after--figure">Step 3&#8202;—&#8202;Build app on android&nbsp;device</h3><p name="410c" class="graf graf--p graf-after--h3">If you have carried out the above steps correctly, Android build should be a breeze.</p><p name="6245" class="graf graf--p graf-after--p">Run following command to create Android platform</p><pre name="9f9d" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="f883" class="graf graf--p graf-after--pre">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</p><pre name="8b73" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="7820" class="graf graf--p graf-after--pre">Once your app is up and running on the device, we’ll send SMS from another device simulating a server behavior</p><h3 name="d0f9" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Test automatic SMS reading to approve a sample registration</h3><p name="0f97" class="graf graf--p graf-after--h3">In case you missed it in Step 1, here are the steps again.</p><ul class="postList"><li name="a7c4" class="graf graf--li graf-after--p">User enters the Email and password and clicks <strong class="markup--strong markup--li-strong">“Next”</strong></li><li name="333b" class="graf graf--li graf-after--li">OTP input shows up</li><li name="cc49" class="graf graf--li graf-after--li">At this point, send an SMS from another device to your build device</li><li name="4c96" class="graf graf--li graf-after--li">App reads the SMS, and fills it up in the OTP input</li><li name="ef37" class="graf graf--li graf-after--li">Once OTP is received, you can proceed to <strong class="markup--strong markup--li-strong">“Register”</strong></li></ul><p name="ec73" class="graf graf--p graf-after--li">The complete process will appear something like this</p><figure tabindex="0" contenteditable="false" name="d74a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 276px; max-height: 480px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 173.9%;"></div><img class="graf-image" data-image-id="1*eifcCuNbDpiiSrNG_l_VyQ.gif" data-width="276" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*eifcCuNbDpiiSrNG_l_VyQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Automatic SMS reading in Ionic 4 app on&nbsp;Android</figcaption></figure><h3 name="b78e" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="570b" class="graf graf--p graf-after--h3">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.</p><p name="4e2a" class="graf graf--p graf-after--p">That’s all for this blog. This was a small read, but a very interesting feature for your next Pro app.</p><p name="ed76" class="graf graf--p graf-after--p">Stay tuned for more Ionic blogs&nbsp;!</p><blockquote name="78dc" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/Ionic-4-sms-receive"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-sms-receive</strong></a></blockquote><h3 name="cb39" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app for your next awesome&nbsp;app</figcaption></figure><p name="da4c" class="graf graf--p graf-after--figure graf--trailing">This article was originally published on <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Enappd</a>.</p></div></div></section></div></article></main>