Cómo obtener la dirección IP del cliente solo con JavaScript

Cómo obtener la dirección IP del cliente solo con JavaScript

Javascript no puede obtener (ni almacenar en algún lugar) la IP del cliente, sin embargo, javascript puede crear solicitudes Http, y los lenguajes del lado del servidor pueden recuperar la IP pública del usuario, por lo que podría usar esto como una ventaja. En otras palabras, si desea recuperar la IP pública de un usuario , dependerá de una solicitud a cualquier servidor para recuperar la IP . Sin embargo, con la introducción de WebRTC, podrá recuperar la IP privada del usuario con un truco usando RTCPeerConnection.

En este artículo, aprenderá cómo recuperar la IP del usuario (privada usando javascript puro y pública usando un servicio de terceros) fácilmente con un par de trucos.

Usando webRTC (obtener IP privada)

La interfaz RTCPeerConnection le permite crear una conexión WebRTC entre su computadora y un par remoto. Sin embargo, vamos a crear una versión "interrumpida " para recuperar la IP del cliente usando solo javascript.

El método createOffer inicia la creación de un protocolo de descripción de sesión (SDP) que ofrece información sobre cualquier MediaStreamTracks adjunto a la sesión de WebRTC, sesión, códigos y cualquier candidato ya reunido por los agentes de ICE (que contiene nuestro objetivo, la IP).

En versiones anteriores, este método usa devoluciones de llamada. Sin embargo, ahora devuelve un valor basado en una Promesa que devuelve la información que necesitamos cuando se cumple:

Nota: la implementación de JavaScript puro devolverá la IP privada del cliente , no la pública.

/**
 * Obtenga la IP del usuario a través de webkitRTCPeerConnection
 * @param onNewIP {Function} función de escucha para exponer la IP localmente
 * @return undefined
 */
function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
    // compatibilidad para firefox y chrome
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({
        iceServers: []
    }),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    }

     // crear un canal de datos falso
    pc.createDataChannel("");

    // crear oferta y establecer descripción local
    pc.createOffer().then(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });
        
        pc.setLocalDescription(sdp, noop, noop);
    }).catch(function(reason) {
        // Ocurrió un error, así que maneje el error al conectarse
    });

    // escuchar eventos de candidatos
    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

// Usage

getUserIP(function(ip){
    alert("Got IP! :" + ip);
});

El método getUserIP espera como primer parámetro una función que será invocada cuando la IP del cliente esté disponible. Las devoluciones de llamada reciben una cadena (la ip) como primer (y único) parámetro. Puede ver el fragmento anterior en acción a través de JSFiddle:

Usar un servicio de terceros (obtener una IP pública)

Si necesita proporcionar soporte entre navegadores, no podrá usar RTCPeerConnection para recuperar la IP privada de su cliente, por lo tanto, el único recurso que tiene es depender de un servicio externo (una solicitud a un servidor, servicio de terceros o su servicio autoimplementado en su propio servidor).

Conexiones inseguras HTTP

Para obtener la IP del usuario de un sitio web sin certificado SSL, puede confiar en ipinfo.io. Este servicio ofrece una API para obtener la IP del cliente con una simple llamada ajax:

$.getJSON('http://ipinfo.io', function(data){
    console.log(data);
});

El objeto de datos recuperado contiene información de localización como: país, ciudad, etc. cuando está disponible. Los servidores de ipinfo usan enrutamiento DNS basado en latencia para manejar la solicitud lo más rápido posible. Lea más sobre ipinfo en el sitio web oficial aquí .

Conexiones seguras HTTPS (recomendado)

Para obtener la IP del usuario de un sitio web, incluso en sitios web seguros con SSL, puede utilizar el servicio ipify que proporciona una API amigable para obtener la IP del usuario fácilmente. Este servicio no tiene limitaciones de solicitud.

Puede usarlo en su proyecto solicitando a la API (con el parámetro de formato si lo necesita) y estará listo para comenzar.

API URI Response Type Sample Output (IPv4) Sample Output (IPv6)
https://api.ipify.org text 11.111.111.111 ?
https://api.ipify.org?format=json json {"ip":"11.111.111.111"} ?
https://api.ipify.org?format=jsonp jsonp callback({"ip":"11.111.111.111"}); ?
https://api.ipify.org?format=jsonp&callback=getip jsonp getip({"ip":"11.111.111.111"}); ?

Puedes usarlo con JSONP:

<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

O recupere un objeto con una solicitud json usando jQuery:

$.getJSON('https://api.ipify.org?format=json', function(data){
    console.log(data.ip);
});

Además, puede crear, en caso de que tenga su propio servidor y pueda trabajar en él, crear su propio servicio privado que devuelva la IP del usuario con un lenguaje de servidor como PHP, ASP.NET, etc.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable