How to get user IP address, location, and device info using JavaScript in browser
#javascript#webdev#react#node
Chaoming Li

Chaoming Li @chaoming

About: I am an entrepreneur and a coder. I love to create things with code.

Location:
Sydney
Joined:
May 7, 2020

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

Publish Date: May 10 '22
15 3

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.

Comments 3 total

  • ar.Tech Notice
    ar.Tech NoticeJul 22, 2022

    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

    • Ordin
      OrdinNov 8, 2022

      wow that's pretty awesome, thank you!

  • Akashrajawat007
    Akashrajawat007Jan 9, 2024

    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.

Add comment