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

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

Operações de agregação com JavaScript
15/03/2020JAVASCRIPT

Operações de agregação com JavaScript

Veja como extrair de um array a soma, média, maior e menor valor

Saiba mais...
Remover elementos de um array com JavaScript
16/08/2020JAVASCRIPT

Remover elementos de um array com JavaScript

Confira as várias formas de apagar elementos de uma array 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