Mendeteksi Fake GPS Mock Location Menggunakan Ionic

Mari Belajar Coding    10/23/2019    ionic   

Selamat datang kembali di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah aplikasi mobile menggunakan framework Ionic untuk mendeteksi apakah user atau pengguna yang menginstall aplikasi yang kita buat menggunakan aplikasi fake GPS untuk menyamar kan lokasi device atau tidak. Deteksi penggunaan fake GPS sangat berguna untuk membantu mengurangi kecurangan atau penyalahgunaan dalam menggunakan aplikasi yang semestinya di gunakan tanpa fake GPS.

Mendeteksi Fake GPS Mock Location Menggunakan Ionic

Pertama-tama kita create app baru melalui command line atau terminal.

ionic start detectedfakegps blank --type=ionic-angular --cordova

Selanjutnya kita install plugin Background Geolocation untuk mengetahui status mock provider apakah true atau false.

ionic cordova plugin add cordova-plugin-mauron85-background-geolocation@alpha

npm install --save @ionic-native/background-geolocation@4

Tambahkan import module plugin yang sebelumnya di install di app.module.ts. Lihat baris yang di beri highlight dibawah ini.

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 { BackgroundGeolocation } from '@ionic-native/background-geolocation';

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

Selanjutnya kita buat interface di halaman home.html untuk membuat button cek GPS dan cek stop.

<ion-header>
  <ion-navbar>
    <ion-title>
      Fake GPS Detected
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="CekGPS()">Cek GPS</button>
  <button ion-button color="danger" (click)="CekStop()">Stop</button>
  <h4><b>{{status}}</b></h4>
  <p>{{datalocation}}</p>
</ion-content>

Tambahkan import module background geolocation kemudian daftarkan di constructor.Buat fungsi cek GPS untuk menangani proses cek status mock provider menggunakan plugin Background Geolocation di home.ts.

import { Component, NgZone   } from '@angular/core';
import { NavController, AlertController, LoadingController  } from 'ionic-angular';
import { 
  BackgroundGeolocation, 
  BackgroundGeolocationConfig,
  BackgroundGeolocationResponse,
  BackgroundGeolocationEvents
 } from '@ionic-native/background-geolocation';

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

  checkGeolocation:any;
  datalocation:any;
  status:any;

  constructor(public navCtrl: NavController,
    private backgroundGeolocation: BackgroundGeolocation,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController,
    public zone: NgZone
    ) {

  }

  CekGPS(){
    const loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    loader.present();
    
    const config: BackgroundGeolocationConfig = {
      desiredAccuracy: 10,
      stationaryRadius: 20,
      distanceFilter: 30,
      debug: true, //  enable this hear sounds for background-geolocation life-cycle.
      stopOnTerminate: true // enable this to clear background location settings when the app terminates
    };
    this.backgroundGeolocation.configure(config).then(() => {
      this.checkGeolocation=this.backgroundGeolocation
          .on(BackgroundGeolocationEvents.location)
          .subscribe((location: BackgroundGeolocationResponse) => {

            this.zone.run(() => {
              this.datalocation=JSON.stringify(location);
              console.log(location);
            });
            
            if(location.isFromMockProvider==true){
              this.status="Fake GPS detected!";
              const alert = this.alertCtrl.create({
                subTitle: 'We detected you using the Fake GPS application. Turn off the application immediately.',
                buttons: ['OK']
              });
              alert.present();
            }else{
              this.status="";
            }
          });
          loader.dismiss();
      });  
   
      this.backgroundGeolocation.start();
      
  }

  CekStop(){
    console.log("stop");
    console.log(this.checkGeolocation)
    this.datalocation="";
    this.status="";
    this.checkGeolocation.unsubscribe();
    this.backgroundGeolocation.deleteAllLocations();
    this.backgroundGeolocation.stop();
  }

}

Baca juga Menampilkan Maps di Ionic 

Terakhir kita ubah file config.xml untuk mengkonfigurasi plugin Bacground Geolocation dengan menambahkan baris dibawah ini di dalam tag <platform name="android">.

<resource-file src="resources/android/icon/drawable-xxxhdpi-icon.png" target="app/src/main/res/mipmap/icon.png" />

dan tambahkan plugin background geolocation sebelum tag </widget>.

<plugin name="@mauron85/cordova-plugin-background-geolocation" spec="3.0.3">
        <variable name="GOOGLE_PLAY_SERVICES_VERSION" value="11+" />
        <variable name="ANDROID_SUPPORT_LIBRARY_VERSION" value="26+" />
        <variable name="ICON" value="@mipmap/ic_launcher" />
        <variable name="SMALL_ICON" value="@mipmap/ic_launcher" />
        <variable name="ACCOUNT_NAME" value="@string/app_name" />
        <variable name="ACCOUNT_LABEL" value="@string/app_name" />
        <variable name="ACCOUNT_TYPE" value="$PACKAGE_NAME.account" />
        <variable name="CONTENT_AUTHORITY" value="$PACKAGE_NAME" />
    </plugin>

Jalankan aplikasi dengan mengetikkan ionic cordova run android. jika build aplikasi mengalami error, hapus platform android kemudian build ulang.

cordova platform remove android && cordova platform add android

ionic cordova run android

Related Search:
Deteksi Fake GPS menggunakan Ionic
Fake GPS detection using Ionic