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.

Discussion (1)

Collapse
note_info_web profile image
Note Info • Edited on

This is work for me

// Ditect user info
let Url = "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