JAVASCRIPT

Geolocalização do usuário

11/01/2020JAVASCRIPT

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.

Exemplos Geolocalização

Outros conteudos que podem ser de seu interesse

Repositórios do GitHub para aprender programação
26/12/2021JAVASCRIPT

Repositórios do GitHub para aprender programação

Uma coleção de repositórios do GitHub para você estudar programação

Saiba mais...
Mascaras para campos de formularios com Javascript
02/08/2020JAVASCRIPT

Mascaras para campos de formularios com Javascript

Veja como criar máscaras para campos de formulários com Javascript

Saiba mais...

Conteúdo sobre banco de dados sem complicação!

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo