5/5/18

Xamarin Android Device Mac and IP Address on a WebView JavaScript App

When using JavaScript applications with any framework, we cannot get access to some of the device information like the MAC and IP Address because JavaScript runs on an Isolated Sandbox due to security concerns.

When building hybrid applications using the WebView control on a Xamarin Android app, we can leverage the nature of the native app layer to provide the device information to the JavaScript layer. There are several ways to enable this interaction/bridge between the Native and JavaScript layers, but there is a more direct integration that can be used to handle this with less effort.

Browser UserAgent

All browsers provide a way to identify their information using the Navigator UserAgent property.  This property tells us the type of browser that is running the application like Internet Explorer, Safari, and Chrome etc.

When using the WebView control on a native app, we have more permission to control this information. This can enable our apps to set a UserAgent property that can provide the JavaScript application with device specific information.  Let’s review how that can be done by looking at a code sample with Xamarin Android project (C#) and JavaScript.

Xamarin Android Project

On the Xamarin Android project, we can set some of the WebView control properties on the OnCreate override of our activity as shown below:


private void SetWebView()
{
    WebView view = FindViewById<WebView>(Resource.Id.webView1);
    view.Settings.JavaScriptEnabled = true;
    view.Settings.UserAgentString = GetDeviceInfo();
}

private static string GetDeviceInfo()
{
    string mac = string.Empty;
    string ip = string.Empty;

    foreach (var netInterface in NetworkInterface.GetAllNetworkInterfaces())
    {
        if (netInterface.NetworkInterfaceType == NetworkInterfaceType.Wireless80211 ||
            netInterface.NetworkInterfaceType == NetworkInterfaceType.Ethernet)
        {
            var address = netInterface.GetPhysicalAddress();
            mac = BitConverter.ToString(address.GetAddressBytes());

            IPAddress[] addresses = Dns.GetHostAddresses(Dns.GetHostName());                   
            if (addresses != null && addresses[0] != null)
            {
                ip = addresses[0].ToString();
                break;
            }                 

        }
    }



The code loads the reference to the control. This enables us to set the control settings to enable the JavaScript functionality to run on and set the user agent with the device information.

Notice that on the GetDeviceInfo function, we get both the MAC and IP address and return the information as a delimited string similar to the format used by most browsers. This enables us to parse the information and display/use it as needed.

JavaScript Code

When navigating to the web page on the WebView control, we can now query the windows user agent property and request the information that is set by the native code as shown below:


var device = window.navigator.userAgent;
console.log(device);              
 

The console log should print out the content of the string with a pattern similar to aa-bb-cc-dd/100.10.0.0 which represents the MAC and IP address of the device.

Using this approach, we can easily provide device information to the JavaScript app to enable it to display the device MAC and IP address which is usually hidden from the JavaScript layer due to security concerns on the device.

Originally published by ozkary.com

0 comments :

Post a Comment