Geolocalização do usuário
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. Vamos ver vários exemplos de como fazer geolocalização com Javascript. Todas as APIs citadas neste artigo são gratuitas. Nos exemplos de conexão, vamos utilizar o Jquery, que é uma biblioteca JavaScript muito popular, mas, você pode utilizar qualquer linguagem de programação para consumir estas APIs.
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.