Obter o endereço IP do cliente em JavaScript

O JavaScript no navegador não consegue ler diretamente o endereço IP público de um dispositivo. Pode enviar um pedido a um serviço de pesquisa de IP, que comunica o endereço público que observa para esse pedido. Isto é diferente de um endereço privado utilizado numa rede local. O pedido também partilha o endereço IP do visitante com o fornecedor terceiro, por isso escolha um serviço cujas práticas de dados sejam adequadas à sua aplicação.

Os exemplos abaixo utilizam fetch, que está disponível nos navegadores modernos. Abrangem três fornecedores: ipify para uma resposta apenas com o IP, ipinfo para campos de IP e localização e Abstract para dados de geolocalização. Escolha com base nos campos de que a sua aplicação precisa, no facto de o fornecedor exigir ou não credenciais e na forma como protegerá quaisquer credenciais. Estes pedidos são executados a partir do navegador do visitante, pelo que o fornecedor vê o IP público do visitante. A disponibilidade do fornecedor, os campos de resposta e as regras de acesso podem mudar; consulte a documentação atual do fornecedor antes da implementação.

Obter um endereço IP público com ipify

ipify fornece um endpoint JSON em https://api.ipify.org?format=json. A resposta contém uma propriedade ip. Este exemplo lê esse valor e apresenta-o. O repositório da API ipify contém o código-fonte do projeto.

// 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

O pedido verifica o estado HTTP antes de analisar o JSON e, em seguida, lê o campo ip. Se falhar, inspecione o painel de rede do navegador para obter detalhes de conectividade, serviço ou política de segurança de conteúdo. Este método devolve o endereço observado pelo ipify; não revela o endereço LAN privado do dispositivo. Utilize-o quando uma resposta apenas com o IP for suficiente e não forem necessários campos de localização adicionais.

Obter dados de IP e localização com ipinfo

ipinfo devolve um campo ip e pode fornecer campos relacionados com a localização, como city, region, country e loc. O exemplo utiliza uma resposta representativa para mostrar como ler esses campos; o seu substituto local de fetch mantém a demonstração independente do acesso à rede. Para um pedido real, utilize o endpoint JSON mostrado abaixo. Os campos disponíveis e o acesso podem depender do pedido e dos requisitos atuais do fornecedor, por isso consulte a documentação do fornecedor sobre credenciais e limites do plano, em vez de confiar em valores fixos de quota.

// 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

Utilize o campo ip quando só precisar do endereço observado. Os campos adicionais podem suportar uma apresentação regional ampla, mas os dados de localização são aproximados e dependem dos dados do fornecedor; não identificam uma localização precisa do dispositivo. Se o pedido falhar, verifique a resposta da rede e se os requisitos de acesso atuais do endpoint se aplicam à sua utilização.

Obter dados de IP e geolocalização com Abstract

Abstract fornece um endpoint de geolocalização de IP. O seu pedido utiliza uma chave de API, por isso crie uma chave através do fornecedor e substitua o marcador de posição abaixo. A API de URL codifica a chave como um parâmetro de consulta. Este exemplo utiliza uma resposta representativa e imprime os seus campos de IP e localização; o substituto local de fetch torna o exemplo de análise determinístico. Para um pedido real, consulte a documentação atual do fornecedor sobre acesso à conta, quotas e o esquema de resposta antes de selecionar campos para a sua interface. Uma chave incorporada no JavaScript do navegador é visível para os visitantes; utilize um proxy do lado do servidor se a chave tiver de 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

O exemplo lê os campos de IP e localização do objeto devolvido. A amostra local demonstra apenas a análise; não verifica uma resposta real do serviço. Uma chave de API em falta, rejeitada ou restrita pode levar a uma resposta de erro; falhas de rede e do serviço também podem impedir um resultado. Trate esses casos na aplicação e inspecione a resposta e a documentação do fornecedor ao adaptar o exemplo para mostrar campos específicos. Escolha Abstract quando a sua resposta atual e as suas condições de acesso se adequarem aos dados de localização de que a sua aplicação precisa.