Arhiva SMS - Tomislav Stanković

SMS login – Angular & Firebase

U nastavku ovog blog posta pokazati ću kako napraviti jednostavnu Angular web aplikaciju sa funkcionalnom SMS prijavom.

Prednosti korištenja SMS prijave:

– Sprečavanje lažnih korisnika – korištenjem SMS prijave onemogućava se kreiranje lažnih korisnika jer svaki korisnik koji se želi prijaviti treba imati jedinstveni broj telefona na koji će dobiti kod pomoću kojega će se prijaviti.
– Daje dodatnu vrijednost bazi korisnika – svaki potvrđeni korisnik koji stoji iza svakog od tih brojeva telefona predstavlja određenu vrijednost jer možemo biti sigurni da to nije lažni korisnik.
– Povećana sigurnost i poboljšava korisničko iskustvo – u današnje vrijeme korisnici koriste jako puno raznih aplikacija i postaje sve teže pratiti login podatke svake od njih. Omogućavanjem SMS prijave korisnik ne mora smišljati novo korisničko ime ili lozinku nego je samo dovoljno da uz sebe ima svoj mobitel kako bi se uspješno prijavio. Također, treća strana se ne može prijaviti kao npr. ja ako uz sebe nema moj mobilni telefon da pročita kod čime se drastično povećava sigurnost.

Kreiranje projekta

Kreiram novi Angular web projekt koristeći Angular CLI.

$ ng new angular-firebase-sms-login
$ cd angular-firebase-sms-login

1 2	$ ng new angular-firebase-sms-login $ cd angular-firebase-sms-login

Google Firebase

Nakon što sam kreirao Angular projekt mogu se prebaciti na Google Firebase i ondje postaviti projekt kako bi uopće mogao koristiti SMS login.

Kroz nekoliko sekundi Firebase projekt će biti spreman.

Unutar izbornika Develop – Authentication potrebno je odabrati Sign-in-method tab. Ondje se nalazi popis opcija dostupnih za login/prijavu.

Ja ću, naravno, ovaj put odabrati Phone.

Allow users to sign in with a mobile phone number, using Firebase SDK phone verification and user authentication tools.

Phone tj. SMS prijava je aktivirana.

Ako sada u izborniku Authentication – Users pogledam popis korisnika on će biti prazan jer za sada još nisam napravio niti jednu prijavu. Nakon što se sa bilo kojim brojem mobitela prvi put prijavim taj će se broj prikazati kao novi korisnik.

Prema trenutnim postavkama moj će projekt raditi ako web aplikaciju pokrenem na adresi http://localhost:4200/.

Međutim ako imam neku (pod)domenu kao npr. test.angularaplikacija.com ondje prijava putem SMS-a neće raditi dok ručno ne odobrim tu (pod)domenu.

To use Firebase Authentication in a web app, you must whitelist the domains that the Firebase Authentication servers can redirect to after signing in a user.

By default, localhost and your Firebase project’s hosting domain are whitelisted. You must whitelist the full domain names of any other of your web app’s hosts. Note: whitelisting a domain allows for requests from any URL and port of that domain.

Prije nego se vratim svojem Angular projektu trebaju mi još neki podaci bez kojih moj Angular projekt ne bi znao kako se povezati s Firebaseom.

Ovdje idem na Project settings.

Nakon toga idem na Add Firebase to your web app.

I konačno, ovdje imam konfiguracijski config objekt koju ću kasnije postaviti u svoj Angular projekt i tako ga povezati sa Firebaseom.

Implementacija prijave/logina

Sada se vraćam u svoj Angular projekt.

AppComponent ću malo prilagoditi tj. dodati joj nekoliko detalja kojih trenutno nema.

import { Component, 
         OnInit, 
         Injectable } from '@angular/core';

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'angular-firebase-sms-login';

  constructor() {
  }

  ngOnInit() {
  }

}

import { Component,

OnInit,

Injectable } from '@angular/core';

@Injectable()

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

title = 'angular-firebase-sms-login';

constructor() {

}

ngOnInit() {

}

Trebat će mi window objekt pa ću napraviti servis za njega kako bi ga mogao pozivati u cijelog projektu sa jednog mjesta.

$ ng g service window

1	$ ng g service window

U servisu se nalazi sljedeće:

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {

  get windowRef() {
    return window
  }

}

import { Injectable } from '@angular/core';

@Injectable()

export class WindowService {

get windowRef() {

return window

}

Sada sam spreman za dodavanje Firebasea unutar projekta, a to radim naredbama:

$ npm install --save firebase
$ npm install angularfire2 firebase --save

1 2	$ npm install --save firebase $ npm install angularfire2 firebase --save

Sada sve to trebam navesti unutar app.module.ts datoteke. Ovdje moram uvesti FormsModule zato što ću u login formi koristiti [(ngModel)].

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule } from '@angular/forms';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "***************************************",
  authDomain: "angular-firebase-sms-login.firebaseapp.com",
  databaseURL: "https://angular-firebase-sms-login.firebaseio.com",
  projectId: "angular-firebase-sms-login",
  storageBucket: "angular-firebase-sms-login.appspot.com",
  messagingSenderId: "************"
};

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { FormsModule } from '@angular/forms';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {

apiKey: "***************************************",

authDomain: "angular-firebase-sms-login.firebaseapp.com",

databaseURL: "https://angular-firebase-sms-login.firebaseio.com",

projectId: "angular-firebase-sms-login",

storageBucket: "angular-firebase-sms-login.appspot.com",

messagingSenderId: "************"

};

@NgModule({

declarations: [

AppComponent,

DashboardComponent

imports: [

BrowserModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Na ekranu će to izgledati ovako:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
   
  <div [hidden]="user" style="text-align:center">
    <label for="phone">Broj mobitela:</label><br>
    <input type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="+385"  maxlength="4">
    <input type="text" [(ngModel)]="phoneNumber.line"  class="input" placeholder="9********" maxlength="9">
  
    <div id="recaptcha-container"></div>
  
    <button (click)="sendLoginCode()">Pošalji SMS</button>
  
    <div *ngIf="windowRef.confirmationResult">
      <hr>
      <label for="code">Ovdje unesite svoj pin</label><br>
      <input type="text" name="code" [(ngModel)]="verificationCode">
  
      <button (click)="verifyLoginCode()">Potvrdi</button>
    </div>
  </div>

  <div *ngIf="user">
    <p>Prijava uspješna!</p>
    <p>UserId: {{ user?.uid }}</p>
  </div>

</div>

<h1>

Welcome to {{ title }}!

</h1>

<label for="phone">Broj mobitela:</label><br>

<button (click)="sendLoginCode()">Pošalji SMS</button>

<hr>

<label for="code">Ovdje unesite svoj pin</label><br>

<button (click)="verifyLoginCode()">Potvrdi</button>

</div>

<p>Prijava uspješna!</p>

<p>UserId: {{ user?.uid }}</p>

</div>

Funkcionalnost se može vidjeti u nastavku, a sastoji se od nekoliko funkcija. Osnova svega je broj mobitela koji je u E.164 obliku.

import { Component, OnInit, Injectable } from '@angular/core';
import { WindowService } from './window.service';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

export class PhoneNumber {
  country: string = "+385";
  line: string;
  get e164() {
    const num = this.country + this.line
    return `+${num}`
  }
}

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WindowService]
})
export class AppComponent implements OnInit {
  
  title = 'Angular Firebase SMS Login';

  windowRef: any;
  phoneNumber = new PhoneNumber()
  verificationCode: string;
  user: any; 

  constructor(
    private win: WindowService,
    public _angularAuth: AngularFireAuth) {
  }

  ngOnInit() {
    this.windowRef = this.win.windowRef;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
    this.windowRef.recaptchaVerifier.render();
  }

  sendLoginCode() {
    const appVerifier = this.windowRef.recaptchaVerifier;
    const num = this.phoneNumber.e164;
    firebase.auth().signInWithPhoneNumber(num, appVerifier)
            .then(result => {
                this.windowRef.confirmationResult = result;
            })
            .catch( error => console.log(error) );
  }

  verifyLoginCode() {
    this.windowRef.confirmationResult
                  .confirm(this.verificationCode)
                  .then( result => {
                    this.user = result.user;
                    console.log(this.user);
    })
    .catch( error => console.log(error, "Pogrešan kod?"));
  } 

}

import { Component, OnInit, Injectable } from '@angular/core';

import { WindowService } from './window.service';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

export class PhoneNumber {

country: string = "+385";

line: string;

get e164() {

const num = this.country + this.line

return `+${num}`

}

@Injectable()

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [WindowService]

})

export class AppComponent implements OnInit {

title = 'Angular Firebase SMS Login';

windowRef: any;

phoneNumber = new PhoneNumber()

verificationCode: string;

user: any;

constructor(

private win: WindowService,

public _angularAuth: AngularFireAuth) {

}

ngOnInit() {

this.windowRef = this.win.windowRef;

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')

this.windowRef.recaptchaVerifier.render();

}

sendLoginCode() {

const appVerifier = this.windowRef.recaptchaVerifier;

const num = this.phoneNumber.e164;

firebase.auth().signInWithPhoneNumber(num, appVerifier)

.then(result => {

this.windowRef.confirmationResult = result;

})

.catch( error => console.log(error) );

}

verifyLoginCode() {

this.windowRef.confirmationResult

.confirm(this.verificationCode)

.then( result => {

this.user = result.user;

console.log(this.user);

})

.catch( error => console.log(error, "Pogrešan kod?"));

}

U praksi to izgleda ovako:

Klikom na “Pošalji SMS” šalje se SMS poruka na uneseni broj mobitela.

Nakon unosa koda iz SMS-a uspješno se prijavljujem.

U slučaju da se idem nekoliko puta za redom prijaviti i Google Firebase posumnja na zloupotrebu pojavit će se napredna reCAPTCHA.

Firebase Phone Authentication With Angular 4 Tutorial — Izvor: https://angularfirebase.com/lessons/firebase-phone-authentication-with-angular-4-tutorial/

Tek sada, nakon što je prijava uspješno prošla, mogu svoj broj mobitela vidjeti unutar Google Firebase sučelja.

Zaključak

Ovo je bio primjer jednostavne Angular web aplikacije sa SMS prijavom gdje se sva logika odvija na klijentskoj strani. Nedavno sam napravio i verziju gdje se sva logika odvija na serverskoj strani unutar NodeJS-a sa dodatnim sigurnosnim provjerama. Bilo bi previše za ovaj blog post da sam išao i taj dio obraditi. Možda u nekom od sljedećih blog postova, ako netko od posjetitelja bloga bude zainteresiran.

Osim SMS prijave obradio sam nekoliko tema s ostalim vrstama prijave kao što su:
– Angular & Firebase – registracija i prijava
– Ionic 3 – Google login/prijava
– Ionic 3 – Facebook prijava
– Ionic 3 – Firebase registracija i prijava

Struktura projekta prema package.json

{
  "name": "angular-firebase-sms-login",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "angularfire2": "^5.1.1",
    "core-js": "^2.5.4",
    "firebase": "^5.7.2",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

{

"name": "angular-firebase-sms-login",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "~7.1.0",

"@angular/common": "~7.1.0",

"@angular/compiler": "~7.1.0",

"@angular/core": "~7.1.0",

"@angular/forms": "~7.1.0",

"@angular/platform-browser": "~7.1.0",

"@angular/platform-browser-dynamic": "~7.1.0",

"@angular/router": "~7.1.0",

"angularfire2": "^5.1.1",

"core-js": "^2.5.4",

"firebase": "^5.7.2",

"rxjs": "~6.3.3",

"tslib": "^1.9.0",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/build-angular": "~0.11.0",

"@angular/cli": "~7.1.4",

"@angular/compiler-cli": "~7.1.0",

"@angular/language-service": "~7.1.0",

"@types/node": "~8.9.4",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.1",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.1.6"

}

Ionic 3 – Slanje SMS poruka

U ovom ću blog postu pokazati kako poslati SMS poruku iz Ionic 3 aplikacije koristeći Ionic Native 3x SMS plugin.

Prije svega, moram napomenuti da korištenje ovog plugina zahtijeva da mobilni uređaj na kojemu je instalirana aplikacija ima valjanu SIM karticu sa dovoljnim iznosom na računu. Ako se koristi neka od tarifa s neograničenom mogučnošću slanja SMS-ova onda ste bez brige.

Kreiranje aplikacije

Za početak ćemo kreirati novi Ionic 3 projekt.

$ ionic start Ionic3sms blank --v2
$ cd Ionic3sms

1 2	$ ionic start Ionic3sms blank --v2 $ cd Ionic3sms

Odmah možemo dodati i Ionic Native 3x SMS plugin.

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

1 2	$ ionic cordova plugin add cordova-sms-plugin $ npm install --save @ionic-native/sms

I navesti SMS plugin unutar app.module.ts

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 { SMS } from '@ionic-native/sms';

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

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 { SMS } from '@ionic-native/sms';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

SMS,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Također, s obzirom da ću aplikaciju testirati na Android mobilnom uređaju treba dodati i Android platformu.

$ ionic platform add android

1	$ ionic platform add android

Sada imamo sve što nam je potrebno kako bi napravili primjer aplikacije iz koje će se moći slati SMS poruke.

Postavljanje SMS funkcionalnosti

Plan je napraviti ekran s dva gumba. Jedan će slati SMS za zadanim tekstom na zadani broj mobitela, a drugi će koristiti formu unutar koje se upisuje broj na koji se SMS želi poslati kao i sadržaj SMS-a.

<ion-header>
  <ion-navbar color="primary"> 
    <ion-title>
      Ionic3 SMS
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
 <ion-card-header>
    SMS sa zadanim podacima:
  </ion-card-header>
<ion-card-content>
<button ion-button (click)="posaljiSMS1()">Pošalji SMS 1</button>
</ion-card-content>
</ion-card>

<hr>

<ion-card>
  <ion-card-header>
    SMS sa promjenjivim podacima:
  </ion-card-header>

  <ion-card-content>
<ion-list>
  <ion-item>
    <ion-label floating>Broj mobitela:</ion-label>
    <ion-input type="tel" [(ngModel)]="objekt.broj"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Sadržaj SMS-a:</ion-label>
    <ion-input type="text" [(ngModel)]="objekt.sadrzaj"></ion-input>
  </ion-item>
</ion-list>

<button ion-button (click)="posaljiSMS2(objekt)">Pošalji SMS 2</button>
</ion-card-content>
</ion-card>

</ion-content>

<ion-header>

<ion-navbar color="primary">

<ion-title>

Ionic3 SMS

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header>

SMS sa zadanim podacima:

</ion-card-header>

<ion-card-content>

<button ion-button (click)="posaljiSMS1()">Pošalji SMS 1</button>

</ion-card-content>

</ion-card>

<hr>

<ion-card>

<ion-card-header>

SMS sa promjenjivim podacima:

</ion-card-header>

<ion-card-content>

<ion-list>

<ion-item>

<ion-label floating>Broj mobitela:</ion-label>

<ion-input type="tel" [(ngModel)]="objekt.broj"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Sadržaj SMS-a:</ion-label>

<ion-input type="text" [(ngModel)]="objekt.sadrzaj"></ion-input>

</ion-item>

</ion-list>

<button ion-button (click)="posaljiSMS2(objekt)">Pošalji SMS 2</button>

</ion-card-content>

</ion-card>

</ion-content>

Na koji način će se odvijati slanje SMS poruke može se vidjeti u home.ts datoteci. Imamo dvije funkcije posaljiSMS1() i posaljiSMS2(). Unutar svake od funkcija imamo options objekt. Više o njemu kao i ostalim mogućnostima možete pronaći u dokumentaciji https://github.com/cordova-sms/cordova-sms-plugin

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  objekt = {broj: '', sadrzaj: ''};

  constructor(public _navCtrl: NavController,
              private _sms: SMS) {

  }
  
  posaljiSMS1(){
    var options = {
        replaceLineBreals: false,
        android: {
          intent: 'INTENT'  // Otvara zadanu SMS aplikaciju na mobilnom uređaju
        }
    }
    this._sms.send('00385*********', 'Ovo je sadržaj SMS poruke!', options);
    console.log("Poslao sam SMS 1");
  }

  posaljiSMS2(){
      var options = {
        replaceLineBreals: false,
        android: {
          intent: '' // Ne otvara zadanu SMS aplikaciju na mobilnom uređaju
        }
    }
    this._sms.send(this.objekt.broj, this.objekt.sadrzaj, options);
    console.log(this.objekt.broj + " " +  this.objekt.sadrzaj);
    console.log("Poslao sam SMS 2");
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { SMS } from '@ionic-native/sms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

objekt = {broj: '', sadrzaj: ''};

constructor(public _navCtrl: NavController,

private _sms: SMS) {

}

posaljiSMS1(){

var options = {

replaceLineBreals: false,

android: {

intent: 'INTENT' // Otvara zadanu SMS aplikaciju na mobilnom uređaju

}

this._sms.send('00385*********', 'Ovo je sadržaj SMS poruke!', options);

console.log("Poslao sam SMS 1");

}

posaljiSMS2(){

var options = {

replaceLineBreals: false,

android: {

intent: '' // Ne otvara zadanu SMS aplikaciju na mobilnom uređaju

}

this._sms.send(this.objekt.broj, this.objekt.sadrzaj, options);

console.log(this.objekt.broj + " " + this.objekt.sadrzaj);

console.log("Poslao sam SMS 2");

}

Ako aplikaciju pokrenemo u web pregledniku $ ionic serve dobijemo ispis naših console.log poruka kao i obavijest da je aplikaciju potrebno pokrenuti na mobilnoj uređaju “Native: tried calling SMS.send, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator“.

Pokretanje aplikacije na mobilnom uređaju

Prilikom instalacije aplikacije na mobilni uređaj će prikazati koje sve dozvole zahtjeva aplikacija. U ovom slučaju to je “slanje i pregled SMS poruka”.

Također, prilikom prvog slanja SMS poruke aplikacije će pitati korisnika za dozvolu slanja i pregleda SMS poruka na njegovom mobilnom uređaju.

S obzirom da funkcija posaljiSMS1() u sebi sadržaja postavku koja poziva otvaranje zadane SMS aplikacije mobilnog uređaja na sljedećoj se slici može vidjeti kako to izgleda.

Ako pozovemo drugi gumb tj. funkciju posaljiSMS2() SMS ćemo poslati direktno iz Ionic 3 aplikacije. Poslani SMS ostaje u mobilnom uređaju i moguće ga je kasnije vidjeti u zadanoj aplikacija koja inače služi za slanje i primanje SMS-ova.

Osoba koja primi SMS poruku ne zna da je poruka poslana putem Ionic 3 aplikacije.

Zaključak

I to je sve! Ovo je bio prikaz korištenja Ionic Native 3.x SMS plugina koji omogućava slanje SMS poruka iz Ionic aplikacije.