DEV Community

Cover image for How to get user IP address, location, and device info using JavaScript in browser
Chaoming Li
Chaoming Li

Posted on

How to get user IP address, location, and device info using JavaScript in browser

JavaScript is not able to get user IP address when running in browser. However, it is possible to do that with a server-side API call. With an API service called VisitorAPI, you can make it happen in just a couple lines of JavaScript.

VisitorAPI returns the user's IP address, location, currencies, languages, and device info with a REST API call. The following code loads the API:

var VisitorAPI=function(t,e,a){var s=new XMLHttpRequest;s.onreadystatechange=function(){var t;s.readyState===XMLHttpRequest.DONE&&(200===(t=JSON.parse(s.responseText)).status?e(t.data):a(t.status,t.result))},s.open("GET","https://visitorapi-dev.uc.r.appspot.com/api/?pid="+t),s.send(null)};
Enter fullscreen mode Exit fullscreen mode

Once the API is loaded, you can make an API call with the following syntax:

new VisitorAPI(projectID, successHandler, errorHandler);
Enter fullscreen mode Exit fullscreen mode

There are 3 parameters in the API call:

  • projectID: This is unique identifier of your VisitorAPI project which you can create in VisitorAPI UI for free.
  • successHandler: This is a function that process the visitor data when the API call is successfully. See response data format here.
  • errorHandler: This is a function that handles the error code and error message when the API call returns an error. The function can have two parameters: error code and error message.

Below is an example to print the user data in browser console:

VisitorAPI(
    "om61tWZOjuBBPxTdDlpy",
    function(data){console.log(data)},
    function(errorCode, errorMessage){console.log(errorCode, errorMessage)}
);
Enter fullscreen mode Exit fullscreen mode

It will print a JSON object similar to the example below based on the current user's real IP address and device data.

{
    "ipAddress":"118.211.184.103",
    "countryCode":"AU",
    "countryName":"Australia",
    "currencies":["AUD"],
    "languages":["eng"],
    "region":"nsw",
    "city":"sydney",
    "cityLatLong":"-33.868820,151.209295",
    "browser":"Chrome Mobile iOS",
    "browserVersion":"100",
    "deviceBrand":"Apple",
    "deviceModel":"iPad",
    "deviceFamily":"iPad",
    "os":"iOS",
    "osVersion":"15"
}
Enter fullscreen mode Exit fullscreen mode

It is important to note that VisitorAPI doesn't use API key to authenticate your API calls, because any API keys would be exposed to the public and that defeats the purpose of the keys. Instead, it allows you to put in an authorized domain list that are allowed to call the API endpoint from, so that no one else is able to call your API endpoint and use your API quota.

Top comments (3)

Collapse
 
akashrajawat profile image
Akashrajawat007

This is and couple of other 3rd party options like https://api.ipify.org?format=json, all are returning the IP of my service provider, not my device's IP. I can confirm this because I have 5 devices connected to the same WIFI and hence they all are returning the same IP, which will not be helpful if you are trying to identify users based on their IP.

Collapse
 
ar_tech_notice profile image
ar.Tech Notice • Edited

This is work for me

// Ditect user info
let Url = "https://" + "cloudflare.com/cdn-cgi/trace";
let AjaxUrl = new XMLHttpRequest();
AjaxUrl.open("get", Url);
AjaxUrl.send();

AjaxUrl.onreadystatechange = function () {
if (AjaxUrl.readyState === 4 && AjaxUrl.status === 200) {
let resultUrl = AjaxUrl.responseText;

let mapUrlStart = resultUrl.indexOf("ip") + 3;
let mapUrlEnd = resultUrl.indexOf("ts");
let IpResult = resultUrl.slice(mapUrlStart, mapUrlEnd);
console.log(IpResult);
Enter fullscreen mode Exit fullscreen mode

}
};

By = Note Info

Collapse
 
ordinz profile image
Ordin

wow that's pretty awesome, thank you!