Cómo obtener la dirección IP del cliente en JavaScript

JavaScript en el navegador no puede leer directamente la dirección IP pública de un dispositivo. Puede enviar una solicitud a un servicio de búsqueda de IP, que informa de la dirección pública que observa para esa solicitud. Esta es diferente de una dirección privada utilizada en una red local. La solicitud también comparte la dirección IP del visitante con el proveedor externo, así que elige un servicio cuyas prácticas de datos se adapten a tu aplicación.

Los ejemplos siguientes utilizan fetch, que está disponible en los navegadores modernos. Cubren tres proveedores: ipify para una respuesta solo con la IP, ipinfo para campos de IP y ubicación, y Abstract para datos de geolocalización. Elige en función de los campos que necesita tu aplicación, de si el proveedor requiere credenciales y de cómo protegerás cualquier credencial. Estas solicitudes se ejecutan desde el navegador del visitante, por lo que el proveedor ve la IP pública del visitante. La disponibilidad del proveedor, los campos de respuesta y las reglas de acceso pueden cambiar; consulta la documentación actual del proveedor antes de la implementación.

Obtener una dirección IP pública con ipify

ipify proporciona un endpoint JSON en https://api.ipify.org?format=json. La respuesta contiene una propiedad ip. Este ejemplo lee ese valor y lo muestra. El repositorio de la API de ipify contiene el código fuente del proyecto.

// Use a representative response so the parsing path is deterministic.
globalThis.fetch = async () => ({
  ok: true,
  json: async () => ({ ip: '203.0.113.42' }),
});

(async () => {
  try {
    const response = await fetch('https://api.ipify.org?format=json');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log(data.ip);
  } catch (error) {
    console.log('Could not retrieve the public IP:', error.message);
  }
})();

203.0.113.42

La solicitud comprueba el estado HTTP antes de analizar el JSON y luego lee el campo ip. Si falla, inspecciona el panel de red del navegador para obtener detalles de conectividad, servicio o política de seguridad de contenido. Este método devuelve la dirección observada por ipify; no revela la dirección LAN privada del dispositivo. Úsalo cuando una respuesta solo con la IP sea suficiente y no se necesiten campos de ubicación adicionales.

Obtener datos de IP y ubicación con ipinfo

ipinfo devuelve un campo ip y puede proporcionar campos relacionados con la ubicación, como city, region, country y loc. El ejemplo utiliza una respuesta representativa para mostrar cómo leer esos campos; su sustituto local de fetch mantiene la demostración independiente del acceso a la red. Para una solicitud en vivo, utiliza el endpoint JSON que se muestra a continuación. Los campos disponibles y el acceso pueden depender de la solicitud y de los requisitos actuales del proveedor, así que revisa la documentación del proveedor sobre credenciales y límites del plan en lugar de confiar en cifras de cuota fijas.

// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
  ok: true,
  json: async () => ({
    ip: '203.0.113.42',
    city: 'Austin',
    region: 'Texas',
    country: 'US',
    loc: '30.2672,-97.7431',
  }),
});

(async () => {
  try {
    const response = await fetch('https://ipinfo.io/json');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log('IP:', data.ip);
    console.log('Location:', data.city, data.region, data.country);
  } catch (error) {
    console.log('Could not retrieve IP information:', error.message);
  }
})();

IP: 203.0.113.42
Location: Austin Texas US

Utiliza el campo ip cuando solo necesites la dirección observada. Los campos adicionales pueden admitir una visualización regional amplia, pero los datos de ubicación son aproximados y dependen de los datos del proveedor; no identifican una ubicación precisa del dispositivo. Si la solicitud falla, comprueba la respuesta de la red y si los requisitos de acceso actuales del endpoint se aplican a tu uso.

Obtener datos de IP y geolocalización con Abstract

Abstract proporciona un endpoint de geolocalización de IP. Su solicitud utiliza una clave de API, así que crea una clave a través del proveedor y sustituye el marcador de posición siguiente. La API de URL codifica la clave como un parámetro de consulta. Este ejemplo utiliza una respuesta representativa e imprime sus campos de IP y ubicación; el sustituto local de fetch hace que el ejemplo de análisis sea determinista. Para una solicitud en vivo, consulta la documentación actual del proveedor sobre acceso a la cuenta, cuotas y el esquema de respuesta antes de seleccionar campos para tu interfaz. Una clave incrustada en JavaScript del navegador es visible para los visitantes; utiliza un proxy del lado del servidor si la clave debe permanecer privada.

// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
  ok: true,
  json: async () => ({
    ip_address: '203.0.113.42',
    city: 'Austin',
    region: 'Texas',
    country: 'United States',
    latitude: 30.2672,
    longitude: -97.7431,
  }),
});

(async () => {
  const apiKey = 'YOUR_ABSTRACT_API_KEY';
  const url = new URL('https://ipgeolocation.abstractapi.com/v1/');
  url.searchParams.set('api_key', apiKey);

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log('IP:', data.ip_address);
    console.log('Location:', data.city, data.region, data.country);
    console.log('Coordinates:', data.latitude, data.longitude);
  } catch (error) {
    console.log('Could not retrieve geolocation data:', error.message);
  }
})();

IP: 203.0.113.42
Location: Austin Texas United States
Coordinates: 30.2672 -97.7431

El ejemplo lee los campos de IP y ubicación del objeto devuelto. La muestra local solo demuestra el análisis; no verifica una respuesta en vivo del servicio. Una clave de API ausente, rechazada o restringida puede dar lugar a una respuesta de error; los fallos de red y del servicio también pueden impedir un resultado. Gestiona esos casos en la aplicación e inspecciona la respuesta y la documentación del proveedor al adaptar el ejemplo para mostrar campos concretos. Elige Abstract cuando su respuesta actual y sus condiciones de acceso se ajusten a los datos de ubicación que necesita tu aplicación.