Ionic 5 Get Unique Device ID & Other Uid’s of UUID, IMEI, IMSI, ICCID and MAC using Native & Cordova Plugins

In this Ionic 5/4 tutorial, we’ll learn how to fetch unique identifiers of a native device like UUID, IMEI, IMSI, ICCID, and MAC in Ionic Angular application using Cordova and Native plugins. A device may have different types of IDs stored in it which are of different types and have different significance. Each device has this type of ID’s but in unique and distinct values. These ID’s can be a Unique Device ID, IMEI Sim number, MAC Address, etc. As a developer, we may need such ID’s to save user data distinctly or for other purposes. In this post, we will talk about Two Ionic Native plugins which are specialized to fetch some of the important ID from a user device. Unique Device ID: This plugin produces a unique, cross-install, app-specific device id. Uid: Get unique identifiers: UUID, IMEI, IMSI, ICCID, and MAC. Let’s start with a new Ionic Application

 

Install or Update Ionic CLI

To create Ionic applications, you need to install @ionic/cli package. If already have updated it to the latest version

$ npm install -g @ionic/cli

 

Create new Ionic Angular Application

We’ll create a new Ionic 5 application using Angular framework with a starter blank template.

$ ionic start ionic-ids-app blank --type=angular

The --type option property is used to select the framework we want to use for our Ionic application   Move to the application directory  

$ cd ionic-ids-app

Now you can run the Ionic application by hitting  

$ ionic serve --lab

The--lab option is used to open the application in the browser into a lab viewer where you can concurrently see how it will look on multiple platforms including Android, iOS, and Windows. As our application is ready, let’s install two plugins to fetch Ids from a real device.

Install Required Plugins

To fetch certain identifiers we will install two plugins described below. You can install it according to your specific requirements. But here we will cover all.

 

Install Unique Device ID Native & Cordova Plugin

Unique Device ID native plugin helps to fetch a unique device ID for Android, iOS and Windows Phone 8 which will remain the same even if the application is uninstalled by the user. For Cordova, we used this package instead of this show in Ionic’s native plugin page due to some bugs.

$ ionic cordova plugin add cordova-plugin-unique-device-id2
$ npm install @ionic-native/unique-device-id

 

Install Uid Native & Cordova Plugin

Uid plugin will allow getting details about ID’s related to UUID, IMEI, IMSI, ICCID and MAC

$ ionic cordova plugin add cordova-plugin-uid
$ npm install @ionic-native/uid

for this plugin, we need Android Permissions plugin to get READ_PHONE_STATE permission

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

 

Import plugins in App’s Module

To use these plugins globally we will import then add in imports array in the app.module.ts file as shown below

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';
import { Uid } from '@ionic-native/uid/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    UniqueDeviceID,
    Uid,
    AndroidPermissions,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

 

Get ID’s in Home Component

To use in a component like home which is created by default in a blank Ionic template, first import plugins then add them in the constructor. Let’s add Unique Device ID, Uid and Android Permissions plugin in home.page.ts file

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

import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';
import { Uid } from '@ionic-native/uid/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private uniqueDeviceID: UniqueDeviceID,
    private uid: Uid,
    private androidPermissions: AndroidPermissions
  ) {
  }

    ...
    ...

}

 

How to Get Unique Device ID in Ionic App

To get Unique Device ID just call a <strong>get()</strong> method of <strong>uniqueDeviceId</strong> service

  getUniqueDeviceID() {
    this.uniqueDeviceID.get()
      .then((uuid: any) => {
        console.log(uuid);
        this.UniqueDeviceID = uuid;
      })
      .catch((error: any) => {
        console.log(error);
        this.UniqueDeviceID = "Error! ${error}";
      });
  }

 

Get UUID, IMEI, IMSI, ICCID, and MAC using Uid Service

To use this plugin service method we need to check if application having <strong>READ_PHONE_STATE</strong> permission by calling <strong>getPermission()</strong> method in constructor.

  getPermission(){
    this.androidPermissions.checkPermission(
      this.androidPermissions.PERMISSION.READ_PHONE_STATE
    ).then(res => {
      if(res.hasPermission){
        
      }else{
        this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_PHONE_STATE).then(res => {
          alert("Persmission Granted Please Restart App!");
        }).catch(error => {
          alert("Error! "+error);
        });
      }
    }).catch(error => {
      alert("Error! "+error);
    });
  }

After that, we only need to call uid variables to get values like

    this.uid.IMEI;
    this.uid.ICCID;
    this.uid.IMSI;
    this.uid.MAC;
    this.uid.UUID;

The complete home.page.ts file after adding all methods will look like this

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

import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';
import { Uid } from '@ionic-native/uid/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  UniqueDeviceID:string;

  constructor(
    private uniqueDeviceID: UniqueDeviceID,
    private uid: Uid,
    private androidPermissions: AndroidPermissions
  ) {
    //Check Permission on App Start
    this.getPermission();
  }

  getUniqueDeviceID() {
    this.uniqueDeviceID.get()
      .then((uuid: any) => {
        console.log(uuid);
        this.UniqueDeviceID = uuid;
      })
      .catch((error: any) => {
        console.log(error);
        this.UniqueDeviceID = "Error! ${error}";
      });
  }


  getID_UID(type){
    if(type == "IMEI"){
      return this.uid.IMEI;
    }else if(type == "ICCID"){
      return this.uid.ICCID;
    }else if(type == "IMSI"){
      return this.uid.IMSI;
    }else if(type == "MAC"){
      return this.uid.MAC;
    }else if(type == "UUID"){
      return this.uid.UUID;
    }
  }


  getPermission(){
    this.androidPermissions.checkPermission(
      this.androidPermissions.PERMISSION.READ_PHONE_STATE
    ).then(res => {
      if(res.hasPermission){
        
      }else{
        this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_PHONE_STATE).then(res => {
          alert("Persmission Granted Please Restart App!");
        }).catch(error => {
          alert("Error! "+error);
        });
      }
    }).catch(error => {
      alert("Error! "+error);
    });
  }

}

That’s it! now you need to run the Ionic application in a real native device to get these identifiers. Let’s discuss in detail how to build or test the Ionic app in a real device.

 

Run Application in Real Device

To check vibration functionality, you need to run the application in a real device. For that, you need to add the Platform for which you are going to build the application.

Add Platform in Application

Run the following command in the terminal to install the required platform

# Add Android
$ ionic cordova platform add android

# Add iOS
$ ionic cordova platform add ios

# Add Windows
$ ionic cordova platform add windows

 

Build Runnable File

After adding the platform, you can run the following commands to create an executable file like APK file for Android. Or you can simply run the app in the USB connected mobile with USB Debugging enabled discussed in the next step.

# Build Android
$ ionic cordova build android

# Build iOS
$ ionic cordova build ios

# Build Windows
$ ionic cordova build windows

 

Live Run Application in USB connected Device

If you just want to run the application in the real device and debug it on the Chrome browser, just execute the following command after connecting your mobile to your computer

# Live Run on Android
$ ionic cordova run android -l

# Live Run on iOS
$ ionic cordova run ios -l

# Live Run on Windows
$ ionic cordova run windows -l

 

Conclusion

That’s it in this tutorial we discussed how to fetch required identifiers in an Ionic application using Cordova and Native plugin in an Ionic application. We also discussed how to add platform and test application in a real device to check native features. If you enjoyed the content. Do share with other geeks. Thanks for reading!