Geolocalização do usuário

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.

Exemplos Geolocalização

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Criando um slider sem plugins
28/11/2019JAVASCRIPT

Criando um slider sem plugins

Veja como criar um efeito de slider apenas com JavaScript

Saiba mais...
Tesouros do GitHub
17/03/2024JAVASCRIPT

Tesouros do GitHub

O melhor do GitHub para evoluir o seu conhecimento

Saiba mais...

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