Comment obtenir l'emplacement d'un utilisateur dans React.js : un guide pratique

Les applications Web sont de plus en plus personnalisées. De plus, il y a une augmentation des applications Web qui utilisent des services basés sur la localisation pour de multiples raisons. Il peut s'agir de confidentialité, de sécurité ou de toute fonctionnalité spécifique basée sur la localisation.

En connaissant l'emplacement de l'utilisateur, vous pouvez facilement proposer différentes fonctionnalités telles qu'un contenu personnalisé, une bonne sécurité , des prévisions météorologiques, plus de localisation et une meilleure expérience utilisateur. En tant que développeur, il est crucial de savoir comment obtenir la position de l'utilisateur pour vos applications Web. Dans cet article, nous vous expliquerons étape par étape comment obtenir la position de l'utilisateur à l'aide de technologies Web modernes telles que React.js . Nous couvrirons différentes méthodes pour obtenir l'adresse IP de l'utilisateur et comment nous pouvons obtenir plus de données de géolocalisation de l'utilisateur. Alors, commençons!

Qu'est-ce que l'IP ou la géolocalisation ?

Tout d'abord, comprenons ce qu'est une adresse IP ou IP .

Chaque appareil qui utilise Internet a une adresse unique, tout comme chaque maison a un numéro ou une adresse unique. Cette adresse unique de l'appareil est appelée adresse IP . Il aide les appareils à communiquer entre eux via Internet.

Ici, l' IP signifie "Internet Protocol" qui est un ensemble de règles que les appareils utilisent pour communiquer entre eux sur Internet. Comprenons maintenant la géolocalisation .

La géolocalisation est une combinaison de deux mots. Le premier est "Geo" qui signifie la terre et le deuxième mot est " l'emplacement" qui signifie où quelque chose est situé sur la terre.

Ainsi, la "Géolocalisation IP" est un moyen de trouver où se trouve physiquement l'appareil en fonction de son adresse IP . La précision des données de géolocalisation IP dépend de différents facteurs tels que la méthode utilisée pour obtenir les données, la qualité des données, le type d'appareil, etc. Les données peuvent être moins précises pour les appareils mobiles car ces appareils changent fréquemment de réseau. Voyons maintenant comment obtenir l'adresse IP de l'utilisateur dans React.

Obtenir la position de l'utilisateur

Il existe plusieurs méthodes par lesquelles nous pouvons obtenir l'emplacement de l'utilisateur. Pour cet article, nous allons utiliser l' API de géolocalisation qui est prise en charge par tous les navigateurs et nous n'avons pas besoin d'installer une autre bibliothèque tierce pour l'utiliser. Pour obtenir plus de données, nous pouvons utiliser des API de services tiers comme l'API de géocodage .

Commençons par créer une application React en utilisant vite . Ouvrez le CMD ou le terminal, puis localisez votre dossier de projet et utilisez les commandes suivantes.

• npm create vite@latest your-app-name

Une fois que vous avez exécuté la commande ci-dessus, une liste de frameworks s'affichera. Sélectionnez maintenant React dans la liste à l'aide des touches fléchées et appuyez sur Entrée.

• Maintenant, il vous montrera une liste de variantes, sélectionnez Javascript parmi ces variantes. Ensuite, il créera un dossier avec le nom de votre application et ajoutera tous les fichiers nécessaires. Utilisez maintenant les commandes suivantes pour installer toutes les bibliothèques requises et exécuter le serveur de développement.

  
  

  • cd your-app-name Cette commande changera le répertoire courant en répertoire de l'application
  • npm install En utilisant cette commande, nous allons installer toutes les bibliothèques requises
  • npm run dev Cette commande démarrera probablement le serveur de développement sur localhost:5173

  
  

Maintenant que le serveur de développement est opérationnel, récupérons l'adresse IP de l'utilisateur.

Obtenir les informations de latitude et de longitude de l'utilisateur à l'aide de l'API de géolocalisation

L' API de géolocalisation permet à l'utilisateur de fournir sa position s'il le souhaite. Cette méthode ne fonctionne que si l'utilisateur autorise l'accès à son emplacement, sinon cette API basée sur un navigateur ne pourra pas obtenir l'adresse IP. Si la fonctionnalité de votre application Web nécessite vraiment l'emplacement de l'utilisateur, vous pouvez inviter l'utilisateur avec un bon message texte et lui faire savoir pourquoi vous avez besoin de son emplacement.

Cette API de géolocalisation est accessible via un appel à navigator.geolocation qui est une propriété qui peut renvoyer un objet Geolocation. Voyons ce qu'est navigator .

• navigateur : C'est une interface qui représente l'état et l'identité de l'agent utilisateur (navigateur). Consignons ce navigateur et voyons quelles autres propriétés il fournit.

  
  

  Ouvrez le fichier App.jsx et nettoyez tout le code à l'intérieur de l'instruction de retour et conservez simplement la div parente avec la classe App , puis utilisez console.log(navigator) dans un useEffect comme indiqué dans le code suivant.

  
  

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

Dans l'onglet de votre serveur de développement ouvrez la console en appuyant sur F12 ou avec le clic droit de la souris. Vous verrez la liste des différentes propriétés telles que appCodeName , Bluetooth , presse-papiers , géolocalisation , etc. Enregistrons la géolocalisation. Ajoutez simplement la géolocalisation dans le journal comme ceci console.log(navigator.geolocation) . Dans la console, vous verrez un objet vide car nous n'avons pas la permission d'accéder à la géolocalisation pour l'instant alors voyons comment obtenir cette permission. Consultez le code suivant et l'explication.

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

Dans useEffect ci-dessus, nous allons d'abord vérifier s'il y a un navigateur. géolocalisation ou non et si c'est vrai, nous vérifierons les autorisations.

Ici,

• navigator.permissions : il renvoie un objet Permissions qui peut être utilisé pour interroger et mettre à jour le statut des autorisations.

• query : C'est une méthode de Permission qui renvoie l'état de la permission d'un utilisateur. Il prend un objet qui a une liste séparée par des virgules de paires nom-valeur. Ici, nous avons dépassé la géolocalisation puisque nous voulons connaître l'état de l'autorisation de géolocalisation.

  
  

  Ici, nous obtenons une promesse, c'est pourquoi nous utiliserons then un mot-clé et enregistrerons les résultats. Si vous vérifiez la console du navigateur, vous verrez l'objet suivant.

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

L'état peut avoir 3 valeurs différentes,

• accordé : cela signifie que nous avons l'autorisation d'accéder à l'emplacement afin que nous puissions appeler directement la géolocalisation.
• invite : l'utilisateur recevra une fenêtre contextuelle demandant l'autorisation.
• refusé : cela signifie que l'utilisateur a refusé de partager sa position.

Pour les états "accordé" et "invite" , nous pouvons créer une fonction pour obtenir la position actuelle de l'utilisateur, mais pour l'état " refusé ", nous pouvons montrer des instructions sur la façon dont ils peuvent activer l'autorisation de localisation dans leur navigateur.

REMARQUE : Il est impossible de demander à nouveau l'autorisation de localisation si l'utilisateur a déjà refusé l'autorisation de localisation, à moins que l'utilisateur ne l'active manuellement dans son navigateur.

Utilisons 3 conditions pour les 3 états d'autorisation comme suit

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

Dans l'état prompt , utilisons la fonction appelée getCurrentPosition . Cette fonction prend les arguments suivants.

• success : Une fonction de rappel qui sera appelée si l'emplacement est récupéré avec succès.
• error : Une fonction de rappel qui sera appelée s'il y a une erreur lors de la récupération de l'emplacement. Ceci est facultatif.
• options : Les options prennent différents paramètres tels que maximumAge, timeout, enableHighAccuracy etc. Vous pouvez en savoir plus sur ces options dans la documentation MDN . Ceci est également facultatif.

Implémentons les 3 arguments. Commençons par créer une fonction de réussite . Avant useEffect ajoutez la fonction de réussite suivante.

 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.`); }

Cette fonction de rappel renverra un objet de position qui a des coordonnées, ce qui signifie des coordonnées. Vous pouvez obtenir des valeurs telles que la latitude , la longitude , la précision , etc. à partir des coordonnées. Ajoutez maintenant la fonction d'erreur suivante après la fonction de réussite.

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

Déclarons également un objet option ,

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

Collez maintenant la ligne suivante dans les conditions "invite" et "accordée" et vérifiez la sortie dans votre navigateur.

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

Vous pouvez voir une invite dans le navigateur vous demandant l'autorisation de localisation. Une fois que vous avez donné l'autorisation, vous pouvez voir les valeurs de coordonnées dans l'onglet de la console. Voici le code complet.

 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;

C'est ça. C'est ainsi que vous pouvez facilement obtenir la valeur de latitude et de longitude de n'importe quel appareil. Maintenant, ces informations ne suffisent pas, alors utilisons les API de géocodage inversé d'opencage pour obtenir plus d'informations sur l'emplacement de l'utilisateur.

Améliorer les services basés sur la localisation grâce au géocodage inversé

Nous avons déjà obtenu les informations de latitude et de longitude sur l'appareil de l'utilisateur. Voyons maintenant comment nous pouvons les utiliser pour obtenir plus d'informations sur son emplacement. Nous utiliserons les API d' opencage pour obtenir plus d'informations sur l'emplacement. Alors, assurez-vous de vous inscrire et d'obtenir une clé API. Vous n'avez rien à payer puisque opencage fournit 2 500 requêtes/jour dans l'essai gratuit. Vous pouvez consulter plus d'informations sur les prix sur leur site Web. J'ai utilisé l'API d'Opencage car ils ont un essai gratuit et aucune restriction CORS également. Créons maintenant une fonction pour utiliser cette 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)); }

Cette fonction getLocationInfo prend la latitude et la longitude puis elle utilise l'URL de la documentation d'opencage qui prend la latitude, la longitude et la clé API. Dans cette fonction, nous avons utilisé fetch pour obtenir les données de l'URL et si le code d'état est 200 , nous stockerons les données dans l'état de l'emplacement . Vous pouvez vérifier votre console sur le navigateur pour voir quel type de données vous obtenez. Pour l'instant, nous utilisons la valeur de la propriété formatée . Pour obtenir plus d'informations sur l' objet de réponse, vous pouvez consulter la documentation. Appelons maintenant cette fonction à partir de la fonction success que nous avons déjà définie.

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

Désormais, chaque fois que l'utilisateur accepte de donner son emplacement, la fonction de réussite s'exécutera et transmettra également les informations de latitude et de longitude à la fonction getLocationInfo et l'exécutera. Vous pouvez utiliser cet état d'emplacement pour afficher l'emplacement dans votre application Web.

Voici le code complet :

 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;

Vous pouvez également implémenter un état d'erreur qui affiche le message d'erreur lorsque l'API ou la fonction ne peut pas récupérer les données correctement. Implémentez également la méthode de gestion des erreurs requise sur les fonctions. C'est ainsi que vous pouvez obtenir beaucoup d'informations sur l'emplacement de l'appareil. Voyons maintenant comment obtenir l'adresse IP de l'appareil.

Obtenir l'adresse IP de l'utilisateur

Pour obtenir l'adresse IP de l'utilisateur côté client, nous utiliserons ipify qui est une simple API d'adresse IP publique. Nous allons créer un autre useEffect et créer une fonction pour récupérer l'adresse IP comme indiqué dans le bloc de code suivant.

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

Dans le code ci-dessus, nous avons créé un état appelé ipAddress pour stocker l'adresse IP. L' ipfy est une API publique, nous n'avons donc pas besoin de clé API et nous pouvons utiliser directement l'URL. Dans useEffect nous avons créé une fonction asynchrone appelée fetchIp qui récupère et stocke l'adresse IP dans l'état ipAddress . N'oubliez pas d'appeler la fonction fetchIp dans useEffect .

C'est ainsi que vous pouvez facilement obtenir l'adresse IP de l'appareil. Il existe plusieurs API qui fournissent de tels services. Pour le côté serveur, vous pouvez généralement obtenir l'adresse IP à partir de la demande que l'utilisateur vous a envoyée pour obtenir la page Web ou des données. Cependant, vous ne devez pas vous fier uniquement à l'adresse IP car certains FAI utilisent des adresses IP partagées, ce qui signifie que plusieurs utilisateurs peuvent avoir la même adresse IP. De plus, certains utilisateurs utilisent également des VPN et des proxys.

Meilleures pratiques pour la collecte et la gestion des données de localisation des utilisateurs

En ce qui concerne les données de l'utilisateur, elles constituent toujours un élément crucial de toute application. En tant que développeur, notre travail consiste à créer une application centrée sur l'utilisateur et qui protège les données des utilisateurs. Pour les données telles que le développeur de l'emplacement de l'appareil peut faire face à de nombreux problèmes tels que,

• Quelle est la précision des données IP ou de géolocalisation ?
• Que faire lorsque l'utilisateur ne donne pas son consentement pour utiliser sa localisation ?
• Comment gérer et protéger les données en toute sécurité ?

La mise en œuvre de fonctionnalités basées sur la localisation peut être difficile, mais en suivant les meilleures pratiques, vous pouvez offrir aux utilisateurs une expérience plus personnalisée et sécurisée. Gardez les points suivants à l'esprit lorsque vous manipulez des données basées sur la localisation.

• Précision : Lorsque vous utilisez l'adresse IP, vous devez la vérifier en utilisant plusieurs API et vérifier l'emplacement. Vous devez inclure un mécanisme de secours dans les services et fonctionnalités basés sur la localisation. Il est préférable de vérifier les données car les données de localisation peuvent être affectées par des facteurs tels que les paramètres de l'appareil, les connexions réseau, etc.

  
  

• Confidentialité : il s'agit de la principale préoccupation lors de la collecte des données d'un utilisateur, car vous devez respecter les différentes lois de plusieurs pays. Les développeurs doivent toujours respecter la vie privée de l'utilisateur. Il est nécessaire d'avoir une politique de confidentialité claire et concise lorsqu'il s'agit de collecter des données de l'utilisateur. Vous devez informer l'utilisateur chaque fois que vous collectez des informations sensibles. S'il existe des fonctionnalités basées sur la localisation, vous devez clairement indiquer pourquoi et comment vous allez utiliser les données. En outre, vous devez fournir une option de désactivation à l'utilisateur afin que s'il ne souhaite pas partager ses données, il puisse facilement se désinscrire.

  
  

• Sécurité : pour la sécurité des données, vous pouvez implémenter des mécanismes d'authentification tels que OAuth ou JWT et sécuriser les points de terminaison de l'API contre tout accès non autorisé. Vous devez toujours suggérer à l'utilisateur d'utiliser des mots de passe forts, de mettre à jour les navigateurs, etc. Vous devez crypter les données à l'aide de certificats HTTPS et SSL pour garantir une communication sécurisée entre le client et le serveur. Dans le backend, vous pouvez implémenter un contrôle d'accès basé sur les rôles afin que seuls les utilisateurs sélectionnés, tels que seuls les administrateurs, puissent accéder aux données. Avant de mettre à jour une dépendance, vous devez toujours vérifier si elle provient de la source officielle ou non.

  
  

  Conclusion

  Les données de localisation jouent un rôle majeur en ce qui concerne l'expérience personnalisée des utilisateurs, mais la gestion de ces données est également une tâche cruciale. Il existe de nombreuses méthodes différentes que vous pouvez utiliser pour obtenir les données de localisation, mais cela dépend de la quantité de données dont vous aurez besoin si vous n'avez besoin que d'une adresse IP, vous pouvez utiliser les API ipify et si vous avez besoin de plus de données de géolocalisation, vous pouvez utiliser soit opencage ou l'API de géocodage inversé de google également. Si vous créez de petites applications telles que des applications météo, vous n'avez pas besoin d'utiliser d'API puisque vous pouvez utiliser les API de géolocalisation du navigateur. En ce qui concerne la sécurité et la confidentialité de ces données, vous devez éviter tout risque potentiel associé à la confidentialité de l'utilisateur en fournissant une politique de confidentialité bien rédigée. C'est la fin de cet article j'espère qu'il vous plaira.

  
  

  • Commander mon site Web appelé DevDreamning .
  • Ma chaîne youtube👇😉