Retrieving IP Adress Using Cordova Without External Services

Written by on August 31, 2015

Retrieving IP Adress Using Cordova Without External Services

I can’t believe, but this is a heavily requested feature so let me show you how you can retrieve this data without external services. This article will be written from the perspective of the Ionic Framework, but this code can be used on its own. I’m using the Ionic Framework just to provide a UI.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Introduction

We’re going to use this plugin:

NetworkInterface Plugin

I checked the Java portion of the code, and I can safely say it’s not using external services.

Installation

Create a new project:

ionic start IonicIpFindDemo blank
cd IonicIpFindDemo
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.

Let’s install the NetworkInterface plugin:

cordova plugin add cordova-plugin-networkinterface

If you’re using Cordova 4+ and especially if you’re accessing remote images don’t forget to install Cordova Whitelist plugin:

cordova plugin add cordova-plugin-whitelist

And add this security meta tag to your index.html file:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Last but not least, add an appropriate platform:

ionic platform add android

For MacOS users, do it like this:

ionic platform add ios

Preparation

This is a pretty simple plugin, all you need to do to use it is this:

networkinterface.getIPAddress(function (ip) { 
    alert(ip); 
});

Code

This is going to be our example:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">		
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
        <title></title>
         
        <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
        <link href="css/style.css" rel="stylesheet"/>
         
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
         
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
         
        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
         
        <ion-pane>
            <ion-content ng-controller="MainCtrl" padding="true">
                <button class="button button-full button-positive " ng-click="findDeviceIP()">Find Device IP</button>
            </ion-content>
        </ion-pane>
         
    </body>
</html>

JavaScript

// Ionic Starter App
 
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])
 
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});
 
app.controller('MainCtrl', function($scope) {
	$scope.findDeviceIP = function() {
		networkinterface.getIPAddress(function (ip) { 
			alert(ip); 
		});		
	}
});

Deployment

Next step, we need to build our application:

ionic build android

Be careful here, this step may break if you’re behind a firewall. The first execution will take a long time, so be patient.

When this step ends, look at the output log, last two lines should look something like this:

Built the following apk(s):
    D:\Development\IonicIpFindDemo\platforms\android\build\outputs\apk\android-debug.apk

We’ll use the last line location to deploy our application. Make sure your smartphone is prepared to accept an incoming application. In case of Android platform, you must enable Developer Options and USB Debugging.

Do this:

adb install -r platforms\android\build\outputs\apk\android-debug.apk

or you can do this:

ionic run android -l -c -s

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

11 thoughts on “Retrieving IP Adress Using Cordova Without External Services”

  1. Hi All,
    I tried the above plugin. It worked well for phones with Wifi but it is not working with cellular data. The error is ” No valid IP address identified”.

    If anyone faced this error, Please reply.

  2. Its’s somehow not working for me . I tried it by just copying and pasting your code and installing the required modules.
    The only difference is i used ionic view for testing . Does it matter ?

Leave a Reply