Geolocalização do usuário

Veja como obter o IP e a localização do visitante do seu site

Customizar a experiência do usuário de acordo com a sua localização é algo que agrega valor ao seu projeto, você pode por exemplo destacar conteúdos específicos de acordo com a região. Além da localização, ter acesso ao IP do usuário também é algo importante, para fins de segurança, podem existir em seu projeto determinadas ações que serão feitas por usuários logados, então acaba sendo interessante guardar qual o IP que fez determinada requisição.

Neste artigo vamos ver APIs que permitem obter estas informações. Todas as APIs citadas neste artigo são gratuitas. Nos exemplos de conexão, vamos utilizar o Jquery, mas, você pode utilizar qualquer linguagem de programação.

Vamos começar. Nos primeiros exemplos, vamos aprender como recuperar o endereço IP do visitante. Temos 4 APIs que podem fazer isso para nós, nenhuma possui restrição de acesso:

HTTPBIN

$.getJSON('https://httpbin.org/ip', function(data) {

console.log(JSON.stringify(data, null, 2));

});

//Retorno

{ "origin": "000.00.000.000, 000.00.000.000"}

CLOUDFIRE

$.get('https://www.cloudflare.com/cdn-cgi/trace', function (data){

console.log(data)

})

//Retorno

fl=97f218

h=www.cloudflare.com

ip=000.00.000.000

ts=1578749672.404

visit_scheme=https

uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36 OPR/65.0.3467.78

colo=GRU

http=http/2

loc=BR

tls=TLSv1.3

sni=plaintext

warp=off

JSONIP

$.getJSON('https://jsonip.com/?callback=?', function(data) {

console.log(JSON.stringify(data, null, 2));

});

//Retorno

{

  "ip": "000.00.000.000",

  "about": "https://jsonip.com/about",

  "Pro!": "http://getjsonip.com",

  "Get Notifications": "https://jsonip.com/notify"

}

API IPIFY

$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {

 console.log(JSON.stringify(data, null, 2));

});

//Retorno

{ "ip": "000.00.000.000"}

Agora vamos ver as APIs que retornam o IP e a localização do usuário. Da mesma forma que os exemplos anteriores, não é necessário se cadastrar ou utiilzar algum token. Porém, por retornar mais informações, elas possuem algum tipo de restrição. 

GEOPLUGIN.NET

$.getJSON('http://www.geoplugin.net/json.gp?jsoncallback=?', function(data) {

console.log(JSON.stringify(data, null, 2));

});

//Retorno

{

 "geoplugin_request": "000.00.000.000",

 "geoplugin_status": 200,

 "geoplugin_delay": "2ms",

 "geoplugin_credit": "Some of the returned data includes GeoLite data created by MaxMind, available from http://www.maxmind.com.",

 "geoplugin_city": "São Paulo",

 "geoplugin_region": "Sao Paulo",

 "geoplugin_regionCode": "SP",

 "geoplugin_regionName": "Sao Paulo",

 "geoplugin_areaCode": "",

 "geoplugin_dmaCode": "",

 "geoplugin_countryCode": "BR",

 "geoplugin_countryName": "Brazil",

 "geoplugin_inEU": 0,

 "geoplugin_euVATrate": false,

 "geoplugin_continentCode": "SA",

 "geoplugin_continentName": "South America",

 "geoplugin_latitude": "-23.627",

 "geoplugin_longitude": "-46.635",

 "geoplugin_locationAccuracyRadius": "10",

 "geoplugin_timezone": "America/Sao_Paulo",

 "geoplugin_currencyCode": "BRL",

 "geoplugin_currencySymbol": "R$",

 "geoplugin_currencySymbol_UTF8": "R$",

 "geoplugin_currencyConverter": 4.0958

}

Além de retornar o IP, retorna a localização do usuário, coordenadas e cotação da moeda. As restrições do GEOPLUGIN.NET são que ele permite até 120 requisições por minuto. Caso você ultrapasse este limite, você fica bloqueado por 1 hora.

IPAPI

$.getJSON('https://ipapi.co/json/', function(data) {

console.log(JSON.stringify(data, null, 2));

});

//Retorno

{

 "ip": "000.00.00.000",

  "city": "São Paulo",

  "region": "Sao Paulo",

  "region_code": "SP",

  "country": "BR",

  "country_code": "BR",

  "country_code_iso3": "BRA",

  "country_capital": "Brasilia",

  "country_tld": ".br",

  "country_name": "Brazil",

  "latitude": -23.63,

  "longitude": -46.6322,

  "timezone": "America/Sao_Paulo",

  "utc_offset": "-0200",

  "country_calling_code": "+55",

  "currency": "BRL",

  "currency_name": "Real",

  "languages": "pt-BR,es,en,fr",

  "country_area": 8511965,

  "country_population": 201103330,

  "asn": "xxxxxx",

  "org": "xxxxxxx"

}

Além, de retornar o IP, retorna localização, coordenadas, provedor de acesso e dados do país como população e moeda. Esta API permite 30 mil acessos por mês, ou 1000 requisições por dia.

IP API

$.getJSON('https://ipapi.co/json/', function(data) {

console.log(JSON.stringify(data, null, 2));

});

//Retorno

{

"status": "success",

"country": "Brazil",

"countryCode": "BR",

 "region": "SP",

"regionName": "Sao Paulo",

"city": "Alto De Pinheiros",

 "zip": "",

"lat": -23.5406,

"lon": -46.7123,

 "timezone": "America/Sao_Paulo",

"isp": "XXXX",

"org": "XXX",

 "as": "ASXXXX",

"query": "000.000.00.000"

}

Retorna IP, localização, coordenadas e provedor de acesso.Existe uma restrição de 45 acessos por minuto.

IP INFO

$.getJSON('https://ipinfo.io/json', function(data) {

console.log(JSON.stringify(data, null, 2));

});

//Retorno

{

"ip": "000.0.00.000",

"hostname": "xxx.xxxx.com.br",

"city": "São Paulo",

"region": "São Paulo",

"country": "BR",

"loc": "-23.5475,-46.6361",

"org": "XXXX",

"postal": "01000-000",

"timezone": "America/Sao_Paulo",

"readme": "https://ipinfo.io/missingauth"

}

Este é o que tem o retorno mais simples. Ao contrário dos exemples anteriores, a latitude e a longitude são retornadas dentro do mesmo campo.

Para usar esta API, existe uma restrição de 50.000 requisições por mês.

Para ver todos estes exemplos, você pode dar uma olhada no código fonte deste link.

Exemplos Geolocalização

 

Quer conferir mais dicas sobre JavaScript? Clique aqui e veja mais dicas!