Cómo obtener la ubicación de un usuario en React.js: una guía práctica

Las aplicaciones web son cada vez más personalizadas. Además, hay un aumento de las aplicaciones web que utilizan servicios basados en la ubicación por múltiples razones. Puede ser por privacidad, seguridad o cualquier característica específica basada en la ubicación.

Al conocer la ubicación del usuario, puede ofrecer fácilmente diferentes funciones, como contenido personalizado, buena seguridad , pronósticos del tiempo, más localización y una mejor experiencia de usuario. Como desarrollador, es fundamental saber cómo obtener la ubicación del usuario para sus aplicaciones web. En este artículo, lo guiaremos a través de instrucciones paso a paso sobre cómo puede obtener la ubicación del usuario utilizando tecnologías web modernas como React.js . Cubriremos diferentes métodos para obtener la dirección IP del usuario y cómo podemos obtener más datos de geolocalización del usuario. ¡Entonces empecemos!

¿Qué es IP o Geolocalización?

Primero, entendamos qué es una IP o dirección IP .

Cada dispositivo que usa Internet tiene una dirección única, al igual que cada casa tiene un número o dirección única. Esta dirección única del dispositivo se llama dirección IP . Ayuda a los dispositivos a comunicarse entre sí a través de Internet.

Aquí, IP significa "Protocolo de Internet" , que es un conjunto de reglas que utilizan los dispositivos para comunicarse entre sí a través de Internet. Ahora entendamos la geolocalización .

La Geolocalización es una combinación de dos palabras. Primero es "Geo" , que significa la tierra y la segunda palabra es " ubicación" , que significa dónde se encuentra algo en la tierra.

Entonces, la "Geolocalización IP" es una forma de encontrar dónde se encuentra físicamente el dispositivo en función de su dirección IP . La precisión de los datos de geolocalización IP depende de diferentes factores, como qué método se utiliza para obtener los datos, la calidad de los datos, el tipo de dispositivo, etc. Los datos pueden ser menos precisos para los dispositivos móviles, ya que estos dispositivos cambian de red con frecuencia. Ahora veamos cómo podemos obtener la dirección IP del usuario en React.

Obtener la ubicación del usuario

Existen varios métodos por los cuales podemos obtener la ubicación del usuario. Para este artículo, vamos a utilizar la API de geolocalización que es compatible con todos los navegadores y no tenemos que instalar ninguna otra biblioteca de terceros para usarla. Para obtener más datos, podemos usar las API de servicios de terceros, como la API de codificación geográfica .

Primero, creemos una aplicación React usando vite . Abra el CMD o la terminal, luego ubique la carpeta de su proyecto y use los siguientes comandos.

• npm create vite@latest your-app-name

Una vez que ejecute el comando anterior, le mostrará una lista de marcos, ahora seleccione Reaccionar de la lista usando las teclas de flecha y presione Entrar.

• Ahora le mostrará una lista de variantes, seleccione Javascript de esas variantes. Luego creará una carpeta con el nombre de su aplicación y agregará todos los archivos necesarios. Ahora use los siguientes comandos para instalar todas las bibliotecas necesarias y ejecutar el servidor de desarrollo.

  
  

  • cd your-app-name Este comando cambiará el directorio actual al directorio de la aplicación
  • npm install Usando este comando instalaremos todas las bibliotecas requeridas
  • npm run dev Este comando iniciará el servidor de desarrollo probablemente en localhost:5173

  
  

Ahora que el servidor de desarrollo está en funcionamiento, obtengamos la dirección IP del usuario.

Obtener información de latitud y longitud del usuario mediante la API de geolocalización

La API de geolocalización permite al usuario proporcionar su ubicación si así lo desea. Este método solo funciona si el usuario da permiso para acceder a su ubicación; de lo contrario, esta API basada en navegador no podrá obtener la dirección IP. Si la característica de su aplicación web realmente requiere la ubicación del usuario, entonces puede indicarle al usuario un buen mensaje de texto y hacerle saber por qué necesita su ubicación.

Se accede a esta API de geolocalización a través de una llamada a navigator.geolocation , que es una propiedad que puede devolver un objeto de geolocalización. Veamos qué es el navegador .

• navegador: Es una interfaz que representa el estado y la identidad del agente de usuario (navegador). Iniciemos sesión en este navegador y veamos qué otras propiedades proporciona.

  
  

  Abra el archivo App.jsx y limpie todo el código dentro de la declaración de devolución y simplemente mantenga el div principal con la App de clase, luego use console.log(navigator) dentro de useEffect como se indica en el siguiente código.

  
  

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

En la pestaña de su servidor de desarrollo, abra la consola presionando F12 o con el botón derecho del mouse. Verá la lista de diferentes propiedades, como appCodeName , Bluetooth , portapapeles , geolocalización , etc. Vamos a registrar la geolocalización. Simplemente agregue la geolocalización en el registro como este console.log(navigator.geolocation) . En la consola verá un objeto vacío porque no tenemos permiso para acceder a la geolocalización por ahora, así que veamos cómo obtener este permiso. Consulte el siguiente código y la explicación.

 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."); } }, []);

En el useEffect anterior, primero verificaremos si hay navegador. geolocalización o no y si es cierto comprobaremos los permisos.

Aquí,

• navigator.permissions: Devuelve un objeto Permisos que se puede utilizar para consultar y actualizar el estado de los permisos.

• consulta: Es un método de Permiso que devuelve el estado del permiso de un usuario. Toma un objeto que tiene una lista separada por comas de pares de nombre-valor. Aquí hemos pasado geolocalización ya que queremos saber el estado del permiso de geolocalización.

  
  

  Aquí obtenemos una Promesa, por eso usaremos then palabra clave y registraremos los resultados. Si revisa la consola del navegador, verá el siguiente objeto.

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

El estado puede tener 3 valores diferentes,

• otorgado: Eso significa que tenemos permiso para acceder a la ubicación para que podamos llamar a la geolocalización directamente.
• aviso: el usuario obtendrá una ventana emergente solicitando permiso.
• denegado: Eso significa que el usuario ha negado compartir su ubicación.

Para los estados "otorgado" y "solicitud", podemos crear una función para obtener la posición actual del usuario, pero para el estado " denegado ", podemos mostrar instrucciones sobre cómo pueden habilitar el permiso de ubicación en su navegador.

NOTA: No hay forma de que pueda volver a solicitar el permiso de ubicación si el usuario ya ha denegado el permiso de ubicación, a menos que el usuario lo habilite manualmente en su navegador.

Usemos 3 condiciones para los 3 estados de permiso de la siguiente manera

 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."); } }, []);

En el estado prompt , usemos la función llamada getCurrentPosition . Esta función toma los siguientes argumentos.

• éxito : una función de devolución de llamada que se llamará si la ubicación se recupera con éxito.
• error : una función de devolución de llamada que se llamará si hay un error al recuperar la ubicación. Esto es opcional.
• opciones : las opciones toman diferentes parámetros, como la edad máxima, el tiempo de espera, enableHighAccuracy, etc. Puede leer más sobre estas opciones en la documentación de MDN . Esto también es opcional.

Implementemos los 3 argumentos. Primero vamos a crear una función de éxito . Antes de useEffect agregue la siguiente función de éxito.

 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 función de devolución de llamada devolverá un objeto de posición que tiene coordenadas , lo que significa coordenadas. Puede obtener valores como latitud , longitud , precisión , etc. a partir de las coordenadas. Ahora agregue la siguiente función de error después de la función de éxito.

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

Declaremos también un objeto de opción ,

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

Ahora pegue la siguiente línea en las condiciones "prompt" y "conceded" y verifique el resultado en su navegador.

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

Puede ver un mensaje en el navegador que le pide permiso de ubicación. Una vez que dé el permiso, podrá ver los valores de las coordenadas en la pestaña de la consola. Aquí está el 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;

Eso es todo. Así es como puede obtener fácilmente el valor de latitud y longitud de cualquier dispositivo. Ahora bien, esta información no es suficiente, así que usemos las API de geocodificación inversa de opencage para obtener más información sobre la ubicación del usuario.

Mejora de los servicios basados en la ubicación con geocodificación inversa

Ya obtuvimos la información de latitud y longitud sobre el dispositivo del usuario, ahora veamos cómo podemos usarlo para obtener más información sobre su ubicación. Usaremos las API de opencage para obtener más información sobre la ubicación. Por lo tanto, asegúrese de registrarse y obtener una clave API. No tiene que pagar nada, ya que opencage proporciona 2500 solicitudes por día en la versión de prueba gratuita. Puede consultar más información sobre el formulario de precios de su sitio web. He usado la API de Opencage ya que tienen una prueba gratuita y tampoco tienen restricciones de CORS. Ahora vamos a crear una función 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)); }

Esta función getLocationInfo toma la latitud y la longitud y luego usa la URL de la documentación de opencage que toma la latitud, la longitud y la clave API. En esta función, hemos utilizado buscar para obtener los datos de la URL y, si el código de estado es 200 , almacenaremos los datos en el estado de ubicación . Puede consultar su consola en el navegador para ver qué tipo de datos está obteniendo. Por ahora, estamos usando el valor de la propiedad formateada . Para obtener más información sobre el objeto de respuesta , puede consultar la documentación. Ahora llamemos a esta función desde la función de éxito que ya hemos definido.

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

Ahora, siempre que el usuario acepte dar su ubicación, se ejecutará la función de éxito y también pasará la información de latitud y longitud a la función getLocationInfo y la ejecutará. Puede usar este estado de ubicación para mostrar la ubicación en su aplicación web.

Aquí está el 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;

También puede implementar un estado de error que muestra el mensaje de error cuando la API o la función no pueden obtener los datos correctamente. También implemente el método de manejo de errores requerido en las funciones también. Así es como puede obtener mucha información sobre la ubicación del dispositivo. Ahora veamos cómo puede obtener la dirección IP del dispositivo.

Obtener la dirección IP del usuario

Para obtener la dirección IP del usuario en el lado del cliente, usaremos ipify , que es una API de dirección IP pública simple. Crearemos otro useEffect y crearemos una función para obtener la dirección IP como se muestra en el siguiente bloque de código.

 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(); }, []);

En el código anterior, hemos creado un estado llamado ipAddress para almacenar la dirección IP. El ipfy es una API pública, por lo que no necesitamos ninguna clave de API y podemos usar directamente la URL. En useEffect hemos creado una función asíncrona llamada fetchIp que buscará y almacenará la dirección IP en el estado ipAddress . No olvide llamar a la función fetchIp en useEffect .

Así es como puede obtener fácilmente la dirección IP del dispositivo. Existen múltiples API que brindan dichos servicios. Por el lado del servidor, generalmente puede obtener la dirección IP de la solicitud que el usuario le envió para obtener la página web o cualquier dato. Sin embargo, no debe confiar únicamente en la dirección IP, ya que algunos ISP usan direcciones IP compartidas, lo que significa que varios usuarios pueden tener la misma dirección IP. Además, algunos usuarios también usan VPN y proxies.

Mejores prácticas para recopilar y manejar datos de ubicación de usuarios

Cuando se trata de los datos del usuario, siempre es una parte crucial en cualquier aplicación. Como desarrollador, nuestro trabajo es crear una aplicación centrada en el usuario y que proteja los datos de los usuarios. Para los datos como la ubicación del dispositivo, el desarrollador puede enfrentar muchos problemas como,

• ¿Qué tan precisos son los datos de IP o geolocalización?
• ¿Qué hacer cuando el usuario no da su consentimiento para usar su ubicación?
• ¿Cómo manejar y proteger los datos de forma segura?

La implementación de funciones basadas en la ubicación puede ser un desafío, pero al seguir las mejores prácticas, puede brindarles a los usuarios una experiencia más personalizada y segura. Tenga en cuenta los siguientes puntos cuando maneje datos basados en la ubicación.

• Precisión: al usar la dirección IP, debe verificarla dos veces usando más de una API y verificar la ubicación. Debe incluir un mecanismo alternativo en los servicios y funciones basados en la ubicación. Es mejor verificar los datos, ya que los datos de ubicación pueden verse afectados por factores como la configuración del dispositivo, las conexiones de red, etc.

  
  

• Privacidad: esta es la principal preocupación al recopilar los datos de cualquier usuario, ya que debe mantenerse al tanto de las diferentes leyes de varios países. Los desarrolladores siempre deben respetar la privacidad del usuario. Es necesario contar con una política de privacidad clara y concisa a la hora de recabar cualquier dato del usuario. Debe informar al usuario siempre que esté recopilando información confidencial. Si hay funciones basadas en la ubicación, debe mostrar claramente por qué y cómo va a utilizar los datos. Además, debe proporcionar una opción de exclusión voluntaria para el usuario, de modo que si no desea compartir sus datos, pueda optar por no participar fácilmente.

  
  

• Seguridad: para la seguridad de los datos, puede implementar mecanismos de autenticación como OAuth o JWT y proteger los puntos finales de la API de cualquier acceso no autorizado. Siempre debe sugerir al usuario que use contraseñas seguras, que actualice los navegadores, etc. Debe cifrar los datos utilizando certificados HTTPS y SSL para garantizar una comunicación segura entre el cliente y el servidor. En el backend, puede implementar un control de acceso basado en roles para que solo los usuarios seleccionados, como solo los administradores, puedan acceder a los datos. Antes de actualizar cualquier dependencia, siempre debe verificar si es de la fuente oficial o no.

  
  

  Conclusión

  Los datos de ubicación juegan un papel importante cuando se trata de la experiencia personalizada de los usuarios, sin embargo, el manejo de estos datos también es una tarea crucial. Hay muchos métodos diferentes que puede usar para obtener los datos de ubicación, pero depende de la cantidad de datos que necesite. Si solo necesita una dirección IP, puede usar las API de ipify y si necesita más datos de geolocalización, puede usar cualquiera opencage o la API de geocodificación inversa de Google también. Si está creando aplicaciones pequeñas, como aplicaciones meteorológicas, no necesita usar ninguna API, ya que puede usar las API de geolocalización del navegador. Cuando se trata de la seguridad y privacidad de estos datos, debe evitar cualquier riesgo potencial asociado con la privacidad del usuario proporcionando una política de privacidad bien escrita. Ese es el final de este artículo, espero que les guste.

  
  

  • Visite mi sitio web llamado DevDreamning .
  • Mi canal de youtube 👇😉