Como obter a localização de um usuário no React.js: um guia prático

Os aplicativos da Web estão se tornando cada vez mais personalizados. Além disso, há um aumento de aplicativos da Web que usam serviços baseados em localização por vários motivos. Pode ser para privacidade, segurança ou qualquer recurso específico baseado em localização.

Conhecendo a localização do usuário, você pode facilmente oferecer diferentes recursos, como conteúdo personalizado, boa segurança , previsões do tempo, mais localização e uma melhor experiência do usuário. Como desenvolvedor, é crucial saber como obter a localização do usuário para seus aplicativos da web. Neste artigo, mostraremos instruções passo a passo sobre como você pode obter a localização do usuário usando tecnologias modernas da Web, como React.js . Abordaremos diferentes métodos para obter o endereço IP do usuário e como podemos obter mais dados de geolocalização do usuário. Então vamos começar!

O que é IP ou geolocalização?

Primeiro, vamos entender o que é um IP ou endereço IP .

Cada dispositivo que usa uma internet tem um endereço único, assim como cada casa tem um número ou endereço único. Esse endereço exclusivo do dispositivo é chamado de endereço IP . Ele ajuda os dispositivos a se comunicarem uns com os outros pela Internet.

Aqui, o IP significa “Internet Protocol“ , que é um conjunto de regras que os dispositivos usam para se comunicar uns com os outros pela Internet. Agora vamos entender a Geolocalização .

A geolocalização é uma combinação de duas palavras. A primeira é “Geo” , que significa a terra e a segunda palavra é “ localização” , que significa onde algo está localizado na terra.

Assim, a “Geolocalização IP” é uma forma de descobrir onde o dispositivo está localizado fisicamente com base em seu endereço IP . A precisão dos dados de geolocalização IP depende de diferentes fatores, como qual método é usado para obter os dados, a qualidade dos dados, o tipo de dispositivo, etc. Os dados podem ser menos precisos para dispositivos móveis, pois esses dispositivos mudam de rede com frequência. Agora vamos ver como podemos obter o endereço IP do usuário no React.

Obtendo a localização do usuário

Existem vários métodos pelos quais podemos obter a localização do usuário. Para este artigo, vamos usar a API de geolocalização que é suportada por todos os navegadores e não precisamos instalar nenhuma outra biblioteca de terceiros para usá-la. Para obter mais dados, podemos usar APIs de serviços de terceiros, como Geocoding API .

Primeiro, vamos criar um aplicativo React usando vite . Abra o CMD ou o terminal, localize a pasta do seu projeto e use os seguintes comandos.

• npm create vite@latest your-app-name

Depois de executar o comando acima, ele mostrará uma lista de estruturas, agora selecione Reagir na lista usando as teclas de seta e pressione enter.

• Agora ele mostrará uma lista de variantes, selecione Javascript dessas variantes. Em seguida, ele criará uma pasta com o nome do aplicativo e adicionará todos os arquivos necessários. Agora use os seguintes comandos para instalar todas as bibliotecas necessárias e executar o servidor de desenvolvimento.

  
  

  • cd your-app-name Este comando mudará o diretório atual para o diretório do aplicativo
  • npm install Usando este comando vamos instalar todas as bibliotecas necessárias
  • npm run dev Este comando iniciará o servidor de desenvolvimento provavelmente em localhost:5173

  
  

Agora que o servidor de desenvolvimento está funcionando, vamos obter o endereço IP do usuário.

Obtendo informações de latitude e longitude do usuário usando a API de geolocalização

A API de geolocalização permite que o usuário forneça sua localização, se desejar. Este método só funciona se o usuário der permissão para acessar sua localização, caso contrário, esta API baseada em navegador não conseguirá obter o endereço IP. Se o recurso em seu aplicativo da Web realmente exigir a localização do usuário, você poderá solicitar ao usuário uma boa mensagem de texto e informá-lo por que você precisa da localização.

Essa API de geolocalização é acessada por meio de uma chamada para navigator.geolocation , que é uma propriedade que pode retornar um objeto de geolocalização. Vamos ver o que é navegador .

• navegador: É uma interface que representa o estado e a identidade do agente do usuário (navegador). Vamos registrar este navegador e ver quais outras propriedades ele fornece.

  
  

  Abra o arquivo App.jsx e limpe todo o código dentro da instrução return e apenas mantenha o div pai com a classe App e use o console.log(navigator) dentro de um useEffect conforme fornecido no código a seguir.

  
  

 import { useEffect } from "react"; import "./App.css"; function App() { useEffect(() => { console.log(navigator); }, []); return <div className="App"></div>; } export default App;

Na aba do seu servidor de desenvolvimento, abra o console pressionando F12 ou com o botão direito do mouse. Você verá a lista de propriedades diferentes, como appCodeName , Bluetooth , área de transferência , geolocalização etc. Vamos registrar a geolocalização. Basta adicionar a geolocalização no log como este console.log(navigator.geolocation) . No console você verá um objeto vazio porque não temos permissão para acessar a geolocalização por enquanto, então vamos ver como obter essa permissão. Confira o código a seguir e a explicação.

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

No useEffect acima, primeiro vamos verificar se existe navigator. geolocalização ou não e, se for verdade, verificaremos as permissões.

Aqui,

• navigator.permissions: Retorna um objeto Permissions que pode ser usado para consultar e atualizar o status da permissão.

• query: É um método de Permissão que retorna o estado da permissão de um usuário. É preciso um objeto que tenha uma lista separada por vírgulas de pares nome-valor. Aqui passamos a geolocalização, pois queremos saber o status da permissão de geolocalização.

  
  

  Aqui estamos obtendo uma promessa, é por isso que usaremos then palavra-chave e registraremos os resultados. Se você verificar o console do navegador, verá o seguinte objeto.

   { name: "geolocation", onchange: null, state: "prompt" }

O estado pode ter 3 valores diferentes,

• concedido: Isso significa que temos permissão para acessar a localização para que possamos chamar a geolocalização diretamente.
• prompt: O usuário receberá um pop-up solicitando permissão.
• negado: Isso significa que o usuário negou compartilhar sua localização.

Para os estados “concedido” e “prompt”, podemos criar uma função para obter a posição atual do usuário, mas para o estado “ negado ”, podemos mostrar instruções sobre como habilitar a permissão de localização em seu navegador.

NOTA: Não há como solicitar permissão de localização novamente se o usuário já tiver negado a permissão de localização, a menos que o usuário a habilite manualmente em seu navegador.

Vamos usar 3 condições para todos os 3 estados de permissão da seguinte forma

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

No estado prompt , vamos usar a função chamada getCurrentPosition . Esta função recebe os seguintes argumentos.

• success : Uma função de retorno de chamada que será chamada se o local for recuperado com sucesso.
• error : Uma função de retorno de chamada que será chamada se houver um erro ao recuperar o local. Isso é opcional.
• opções : As opções aceitam parâmetros diferentes, como maximumAge, timeout, enableHighAccuracy etc. Você pode ler mais sobre essas opções na documentação do MDN . Isso também é opcional.

Vamos implementar todos os 3 argumentos. Primeiro vamos criar uma função de sucesso . Antes do useEffect adicione a seguinte função de sucesso.

 function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }

Esta função de retorno de chamada retornará um objeto de posição que possui coords , o que significa coordenadas. Você pode obter valores como latitude , longitude , precisão , etc., das coordenadas. Agora adicione a seguinte função de erro após a função de sucesso.

 function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); }

Vamos declarar um objeto de opção também,

 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, };

Agora cole a seguinte linha nas condições “prompt” e “granted” e verifique a saída em seu navegador.

 navigator.geolocation.getCurrentPosition(success, errors, options)

Você pode ver um prompt no navegador solicitando permissão de localização. Depois de conceder a permissão, você poderá ver os valores das coordenadas na guia do console. Aqui está o código completo.

 import { useEffect } from "react"; import "./App.css"; function App() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return <div className="App"></div>; } export default App;

É isso. É assim que você pode obter facilmente o valor de latitude e longitude de qualquer dispositivo. Agora, essas informações não são suficientes, então vamos usar as APIs de geocodificação reversa do opencage para obter mais informações sobre a localização do usuário.

Aprimorando serviços baseados em localização com geocodificação reversa

Já temos as informações de latitude e longitude sobre o dispositivo do usuário, agora vamos ver como podemos usá-lo para obter mais informações sobre sua localização. Usaremos APIs do opencage para obter mais informações sobre o local. Portanto, certifique-se de se inscrever e obter uma chave de API. Você não precisa pagar nada, pois o opencage fornece 2.500 solicitações/dia no teste gratuito. Você pode conferir mais informações sobre o formulário de preços em seu site. Eu usei a API do Opencage, pois eles têm avaliação gratuita e nenhuma restrição de CORS também. Agora vamos criar uma função para usar esta API.

 const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); }

Essa função getLocationInfo usa latitude e longitude e usa a URL da documentação do opencage, que usa latitude, longitude e a chave da API. Nesta função, usamos fetch para obter os dados da URL e, se o código de status for 200 , armazenaremos os dados no estado de localização . Você pode verificar seu console no navegador para ver que tipo de dados está obtendo. Por enquanto, estamos usando o valor da propriedade formatada . Para obter mais informações sobre o objeto de resposta, você pode verificar a documentação. Agora vamos chamar esta função da função de sucesso que já definimos.

 function success(pos) { var crd = pos.coords; ... ... getLocationInfo(crd.latitude, crd.longitude); }

Agora, sempre que o usuário concordar em fornecer sua localização, a função de sucesso será executada e também passará as informações de latitude e longitude para a função getLocationInfo e a executará. Você pode usar esse estado de localização para exibir a localização em seu aplicativo da web.

Aqui está o código completo:

 import { useEffect, useState } from "react"; import "./App.css"; const APIkey = "Enter-your-api-key"; function App() { const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); getLocationInfo(crd.latitude, crd.longitude); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return ( <div className="App"> {location ? <>Your location: {location}</> : null} </div> ); } export default App;

Você também pode implementar um estado de erro que exibe a mensagem de erro quando a API ou a função não consegue buscar os dados corretamente. Implemente também o método de tratamento de erros necessário nas funções. É assim que você pode obter muitas informações sobre a localização do dispositivo. Agora vamos ver como você pode obter o endereço IP do dispositivo.

Obtendo o endereço IP do usuário

Para obter o endereço IP do usuário no lado do cliente, usaremos o ipify , que é uma API simples de endereço IP público. Vamos criar outro useEffect e criar uma função para buscar o endereço IP conforme mostrado no bloco de código a seguir.

 const [ipAddress, setIpAddress] = useState(''); useEffect(() => { const fetchIp = async () => { try { const response = await fetch('https://api.ipify.org?format=json'); const data = await response.json(); setIpAddress(data.ip); } catch (error) { console.error(error); } }; fetchIp(); }, []);

No código acima, criamos um estado chamado ipAddress para armazenar o endereço IP. O iPFY é uma API pública, portanto não precisamos de nenhuma chave de API e podemos usar diretamente a URL. Em useEffect criamos uma função assíncrona chamada fetchIp que buscará e armazenará o endereço IP no estado ipAddress . Não se esqueça de chamar a função fetchIp no useEffect .

É assim que você pode obter facilmente o endereço IP do dispositivo. Existem várias APIs que fornecem esses serviços. Para o lado do servidor, geralmente você pode obter o endereço IP da solicitação que o usuário lhe enviou para obter a página da Web ou quaisquer dados. No entanto, você não deve confiar apenas no endereço IP, pois alguns ISPs usam endereços IP compartilhados, o que significa que vários usuários podem ter o mesmo endereço IP. Além disso, alguns usuários também usam VPNs e proxies.

Práticas recomendadas para coleta e tratamento de dados de localização do usuário

Quando se trata de dados do usuário é sempre uma parte crucial em qualquer aplicação. Como desenvolvedor, é nosso trabalho criar um aplicativo centrado no usuário e que proteja os dados dos usuários. Para os dados como a localização do dispositivo, o desenvolvedor pode enfrentar muitos problemas, como,

• Quão precisos são os dados de IP ou geolocalização?
• O que fazer quando o usuário não dá consentimento para usar sua localização?
• Como lidar e proteger os dados com segurança?

A implementação de recursos baseados em localização pode ser desafiadora, mas seguindo as práticas recomendadas, você pode fornecer aos usuários uma experiência mais personalizada e segura. Lembre-se dos seguintes pontos ao lidar com dados baseados em localização.

• Precisão: Ao usar o endereço IP, você deve verificá-lo usando mais de uma API e verificar a localização. Você deve incluir um mecanismo de fallback em serviços e recursos baseados em localização. É melhor verificar os dados, pois os dados de localização podem ser afetados por fatores como configurações do dispositivo, conexões de rede, etc.

  
  

• Privacidade: Esta é a principal preocupação ao coletar os dados de qualquer usuário, pois você deve verificar as diferentes leis de vários países. Os desenvolvedores devem sempre respeitar a privacidade do usuário. É necessário ter uma política de privacidade clara e concisa na hora de coletar qualquer dado do usuário. Você deve informar o usuário sempre que estiver coletando informações confidenciais. Se houver algum recurso baseado em localização, você deve mostrar claramente por que e como usará os dados. Além disso, você deve fornecer uma opção de exclusão para o usuário, para que, se ele não quiser compartilhar seus dados, possa optar por não participar facilmente.

  
  

• Segurança: Para a segurança dos dados, você pode implementar mecanismos de autenticação como OAuth ou JWT e proteger os endpoints da API de qualquer acesso não autorizado. Você deve sempre sugerir ao usuário o uso de senhas fortes, atualização de navegadores, etc. Você deve criptografar os dados usando certificados HTTPS e SSL para garantir uma comunicação segura entre o cliente e o servidor. No back-end, você pode implementar o controle de acesso baseado em função para que apenas usuários selecionados, como apenas administradores, possam acessar os dados. Antes de atualizar qualquer dependência, você deve sempre verificar se é da fonte oficial ou não.

  
  

  Conclusão

  Os dados de localização desempenham um papel importante quando se trata da experiência personalizada dos usuários, no entanto, lidar com esses dados também é uma tarefa crucial. Existem muitos métodos diferentes que você pode usar para obter os dados de localização, mas depende de quantos dados você precisará se precisar apenas de um endereço IP, poderá usar as APIs ipify e, se precisar de mais dados de geolocalização, poderá usar qualquer um opencage ou a API de geocodificação reversa do Google também. Se você estiver criando pequenos aplicativos, como aplicativos de clima, não precisará usar nenhuma API, pois poderá usar as APIs de geolocalização do navegador. Quando se trata da segurança e privacidade desses dados, você deve evitar quaisquer riscos potenciais associados à privacidade do usuário, fornecendo uma política de privacidade bem escrita. Este é o fim deste artigo espero que gostem.

  
  

  • Confira meu site chamado DevDreamning .
  • Meu canal no youtube👇😉