Displaying User's IP Address, Country, Address, and Browser
Introduction
In the digital age, information is power, and knowing more about your users can greatly enhance your web application's functionality and user experience. One common piece of information to gather is the user's IP address, country, address, and browser. In this article, we'll explore a simple JavaScript script that can help you achieve this by leveraging the ipinfo.io API. We'll dissect the script, separating the HTML structure from the JavaScript code, and explain how it works step by step.
The HTML Structure
Let's start by looking at the HTML structure of the web page where we will display the user's information. Here's the HTML portion of the script:
Paste this code after <head> or before </head>,
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Paste this code into your HTML page,
<div id="ip-address"></div>
<div id="country"></div>
<div id="address"></div>
<div id="browser"></div>
This HTML structure provides a basic framework for our web page. It includes a title, a heading, and four empty paragraphs (identified by IDs) where we'll dynamically populate the user's IP address, country, address, and browser information.
The JavaScript Code
Now, let's dive into the JavaScript code that powers this functionality. We'll break it down step by step:
Paste this code after <body> or before </body>,
<script>
$.get("https://ipinfo.io", function(response) {
// Extract IP address, country, and address from response
var ipAddress = response.ip;
var country = response.country;
var address = response.city + ', ' + response.region + ', ' + response.country + ' ' + response.postal;
document.getElementById("ip-address").innerText = "Your IP address is: " + ipAddress;
document.getElementById("country").innerText = "Your country is: " + country;
document.getElementById("address").innerText = "Your address is: " + address;
// Extract browser name from user agent string
var userAgent = navigator.userAgent;
var browserName = getBrowserName(userAgent);
document.getElementById("browser").innerText = "Your browser is: " + browserName;
}, "jsonp");
// Function to extract browser name from user agent string
function getBrowserName(userAgent) {
var browserName = "";
if (userAgent.indexOf("Chrome") > -1) {
browserName = "Google Chrome";
} else if (userAgent.indexOf("Firefox") > -1) {
browserName = "Mozilla Firefox";
} else if (userAgent.indexOf("Safari") > -1) {
browserName = "Apple Safari";
} else if (userAgent.indexOf("Edge") > -1) {
browserName = "Microsoft Edge";
} else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
browserName = "Opera";
} else if (userAgent.indexOf("Trident") > -1) {
browserName = "Microsoft Internet Explorer";
} else {
browserName = "Unknown";
}
return browserName;
}
</script>
1. IP Address, Country, and Address Retrieval: We use jQuery's `$.get` method to make an HTTP GET request to the [ipinfo.io](https://ipinfo.io) API. This API provides information about the user's IP address, including their country and address details. When the response is received, we extract the relevant information (IP address, country, and address) and update the corresponding paragraphs' text content.
2. Browser Detection: We extract the user's browser information using the `navigator.userAgent` property. The `getBrowserName` function takes the user agent string as input and identifies the user's browser based on known patterns. The detected browser name is then displayed in the designated paragraph.
Conclusion
By separating the HTML structure from the JavaScript code, we can create a clean and organized web page that displays the user's IP address, country, address, and browser information. This script enhances the user experience by providing useful insights into their online presence, all with the help of the ipinfo.io API and some JavaScript magic. Feel free to integrate this script into your web applications to gain a deeper understanding of your users.
Tags:
Scripts