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

#javascript #webdev #react #node

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)};

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

new VisitorAPI(projectID, successHandler, errorHandler);

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)}
);

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"
}

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)

Akashrajawat007 • Jan 9

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.

ar.Tech Notice • Jul 22 '22 • 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);

}
};

By = Note Info