Menu

Procesando SMS con Ionic

ionic - October 20, 2017 por Daniel Londoño Sanchez | Edita este Post.
ionic3.9.2ionic-native4.2.1ionic-app-scripts2.1.4cordova-cli7.0.1ionic-cli3.9.2

En este post hablare sobre cómo trabajar con los mensajes de texto que ingresan a nuestro dispositivo, y sobre como traer la lista de mensajes que hay en este..

Alguna vez se han preguntado cómo validar un código enviado en un SMS, o han necesitado capturar el código para validarlo en la aplicación que estamos trabajando. Esto es muy sencillo.

Para esto vamos a trabajar en este caso con los plugins “cordova-plugin-android-permissions (Para solicitar el permisos al dispositivo para trabajar con los SMS), cordova-plugin-sms (Plugin encargado de procesar los mensajes)”.

Primero que todo creamos nuestro proyecto ionic, en este caso lo llamare “receiver_sms”

$ionic start receiver_sms blank --cordova

Una vez creado el proyecto ionic, ingresamos a este y procedemos a agregar la plataforma en la que vamos a trabajar, en este caso Android:

$ionic cordova platform add android

Ahora procedemos a instalar y referencias el plugin de android-permissions para solicitar el permiso de lectura y escritura sobre los SMS del dispositivo.

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

En nuestro archivo “app.module.ts” debemos de referencias el plugin y asignarlo como un “provider” para poder usarlo en nuestra aplicación.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AndroidPermissions
  ]
})
export class AppModule {}

En el archivo “app.component.ts” en el constructor de la clase apenas la aplicación cargue, solicitamos los permisos de lectura y escritura para los SMS llamando la función “permisoSms()”.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { AndroidPermissions } from '@ionic-native/android-permissions';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(
      platform: Platform, 
      statusBar: StatusBar, 
      splashScreen: SplashScreen, 
      public androidPermissions:AndroidPermissions) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.permisoSms();
    });
  }

  permisoSms(){
    this .androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS)
    .then( success => console.log ( 'Permiso concevido' ), 
    err => this.androidPermissions.requestPermission( this.androidPermissions.PERMISSION.READ_SMS) 
    ); 

    this .androidPermissions.requestPermissions ([ this .androidPermissions.PERMISSION.READ_SMS]);
  }
}

Ahora vamos a instalar el plugin “cordova-plugin-sms” para la administración de los SMS del dispositivo.

$cordova plugin add cordova-plugin-sms --save

Después de instalar el plugin nos dirigimos a la pagina “home.ts” y en esta vamos a realizar el código para cargar la lista de mensajes y para declarar una función la cual va a escuchar el mensaje nuevo que ingresa al dispositivo para procesarlo.

Hemos creado dos funciones ReadListSMS() el cual carga el listado de mensajes de texto del dispositivo y ExpectingSMS() el cual declara un escuchador para cuando ingresa un mensaje al dispositivo.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var SMS : any ; 

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
    this.ReadListSMS();
    this.ExpectingSMS();
  }

  ReadListSMS(){    
    let filter = { 
      box : 'inbox' , // 'inbox' (default), 'sent', 'draft' 
      indexFrom : 0 , // start from index 0 
      maxCount : 10 , // count of SMS to return each time 
    }; 
    if (SMS)SMS.listSMS(filter,(ListSms) => { 
      console.log ( "Sms" , ListSms); 
    },Error => { 
      console.log ( 'error list sms:' + Error ); 
    }); 
  } 
    
  ExpectingSMS(){          
    if (SMS)SMS.startWatch(() => { 
      console.log( 'Empezo ha esperar' ); 
    },Error => { 
      console.log( 'Fallo el inicio de la espera' ); 
    });      
    document.addEventListener( 'onSMSArrive' ,(e : any ) => { 
      var sms = e.data; 
      console.log({mensaje_entrante:sms});       
    }); 
  }
}

Ahora solo nos queda compilar y visualizar en consola los resultados.

$ionic cordova run android
Ver código

¡Compártelo!