En este ejemplo de código vamos a ver como podemos obtener la IP pública de un visitante con sus datos de ubicación utilizando la API de api.apify.org e ipwhois.app utilizando Javascript con peticiones Fetch mostrando los datos en pantalla mediante una grilla formada con CSS para que podamos visualizar en todo momento los datos obtenidos mediante las 2 API’s.
Ejemplo de consulta de IP + Ubicación:
Puedes utilizar el código del ejemplo para utilizarlo en tus app o aprender a utilizar estás APIS de ubicación que muchas veces son útiles cuando queremos trabajar con filtros o resultados mediante datos de ubicación directamente en nuestro front.
Código de ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Obtener IP y datos de Ubicación con Javascript</title>
<style>
body {
margin: 0 auto;
padding: 0 auto;
}
.grid-3 {
display: grid;
background: rgb(255, 255, 255);
width: 100%;
max-width: 1280px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5pxpx;
}
.item {
background-color: #ccc;
padding: 10px 10px;
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.374);
border-radius: 10px;
margin: 10px 10px;
}
.result {
padding: 5px 10px;
border: 1px solid rgb(9, 161, 237);
border-radius: 10px;
margin-left: 5px;
background: #fff;
}
</style>
</head>
<body>
<div id="connection-data" class="grid-3">
<div class="item" id="ip">
<p>Ip: <span class="result"></span></p>
</div>
<div class="item" id="city">
<p>City: <span class="result"></span></p>
</div>
<div class="item" id="continent">
<p>Continent: <span class="result"></span></p>
</div>
<div class="item" id="country">
<p>Country: <span class="result"></span></p>
</div>
<div class="item" id="country_capital">
<p>Country_capital: <span class="result"></span></p>
</div>
<div class="item" id="country_code">
<p>Country_code: <span class="result"></span></p>
</div>
<div class="item" id="country_phone">
<p>Country_phone: <span class="result"></span></p>
</div>
<div class="item" id="currency">
<p>Currency: <span class="result"></span></p>
</div>
<div class="item" id="currency_rates">
<p>Currency_rates: <span class="result"></span></p>
</div>
<div class="item" id="isp">
<p>ISP: <span class="result"></span></p>
</div>
<div class="item" id="latitude">
<p>Latitude: <span class="result"></span></p>
</div>
<div class="item" id="longitude">
<p>Longitude: <span class="result"></span></p>
</div>
<div class="item" id="region">
<p>Region: <span class="result"></span></p>
</div>
<div class="item" id="timezone">
<p>Timezone: <span class="result"></span></p>
</div>
</div>
</body>
</html>
<script>
window.onload = () => {
let userIP = null;
const getIP = async () => {
return await fetch('https://api.ipify.org?format=json')
.then(response => response.json());
}
const getInfo = async (ip) => {
/*
https://ipstack.com/
https://ipwhois.io/
https://ipapi.co/
*/
return await fetch('https://ipwhois.app/json/' + ip + '?lang=es')
.then(response => response.json());
}
getIP().then(response => {
userIP = response.ip;
getInfo(userIP).then(location => {
if(location){
document.querySelector('#ip p span').innerHTML = userIP;
document.querySelector('#city p span').innerHTML = location.city ?? 'error';
document.querySelector('#continent p span').innerHTML = location.continent ?? 'error';
document.querySelector('#country p span').innerHTML = location.country ?? 'error';
document.querySelector('#country_capital p span').innerHTML = location.country_capital ?? 'error';
document.querySelector('#country_code p span').innerHTML = location.country_code ?? 'error';
document.querySelector('#country_phone p span').innerHTML = location.country_phone ?? 'error';
document.querySelector('#currency p span').innerHTML = location.currency ?? 'error';
document.querySelector('#currency_rates p span').innerHTML = location.currency_rates ?? 'error';
document.querySelector('#isp p span').innerHTML = location.isp ?? 'error';
document.querySelector('#latitude p span').innerHTML = location.latitude ?? 'error';
document.querySelector('#longitude p span').innerHTML = location.longitude ?? 'error';
document.querySelector('#region p span').innerHTML = location.region ?? 'error';
document.querySelector('#timezone p span').innerHTML = location.timezone ?? 'error';
}
})
});
}
</script>
Las APIS utilizadas en el ejemplo son gratuitas a fecha: 16 de Abril de 2022. Esto es importante ya que este tipo de APIS suelen pasar a métodos premium con bastante facilidad o estar limitadas a X peticiones por día. Es aconsejable revisar la documentación de cada API para saber limites o precios según nuestras necesidades.
Observaciones:
De la misma manera que estamos obteniendo los datos mediante Fetch directamente en el front, también podemos utilizar las mismas urls para realizar peticiones Curls desde el backend con otro tipo de lenguaje de programación como php o python.
¿Te ha resultado útil esta información? sígueme en mis redes sociales para más contenido como este. Y si tienes dudas o conoces otra forma de hacerlo te animo a que comentes en esta publicación.
Spanish 
English