So ermitteln Sie den Standort eines Benutzers in React.js: Ein praktischer Leitfaden

Webanwendungen werden immer personalisierter. Außerdem gibt es aus mehreren Gründen eine Zunahme von Webanwendungen, die standortbasierte Dienste nutzen. Dies kann entweder der Privatsphäre, der Sicherheit oder bestimmten standortbezogenen Funktionen dienen.

Indem Sie den Standort des Benutzers kennen, können Sie problemlos verschiedene Funktionen wie personalisierte Inhalte, gute Sicherheit , Wettervorhersagen, mehr Lokalisierung und ein besseres Benutzererlebnis anbieten. Als Entwickler ist es wichtig zu wissen, wie Sie den Standort des Benutzers für Ihre Webanwendungen ermitteln. In diesem Artikel führen wir Sie durch eine Schritt-für-Schritt-Anleitung, wie Sie mithilfe moderner Webtechnologien wie React.js den Standort des Benutzers ermitteln können. Wir werden verschiedene Methoden behandeln, um die IP-Adresse des Benutzers zu erhalten, und wie wir mehr Geolokalisierungsdaten vom Benutzer erhalten können. Also lasst uns anfangen!

Was ist IP oder Geolocation?

Lassen Sie uns zunächst verstehen, was eine IP oder IP-Adresse ist.

Jedes Gerät, das das Internet nutzt, hat eine eindeutige Adresse, genau wie jedes Haus eine eindeutige Nummer oder Adresse hat. Diese eindeutige Adresse des Geräts wird als IP-Adresse bezeichnet. Es hilft Geräten, über das Internet miteinander zu kommunizieren.

Dabei steht IP für „Internet Protocol“, ein Regelwerk, das Geräte nutzen, um über das Internet miteinander zu kommunizieren. Lassen Sie uns nun die Geolokalisierung verstehen.

Die Geolocation ist eine Kombination aus zwei Wörtern. Das erste ist „Geo“ , was die Erde bedeutet, und das zweite Wort ist „ Standort“, was bedeutet, wo sich etwas auf der Erde befindet.

Die „IP-Geolocation“ ist also eine Möglichkeit, anhand der IP-Adresse herauszufinden, wo sich das Gerät physisch befindet. Die Genauigkeit von IP-Geolocation- Daten hängt von verschiedenen Faktoren ab, z. B. der zum Abrufen der Daten verwendeten Methode, der Qualität der Daten, dem Gerätetyp usw. Bei mobilen Geräten können die Daten weniger genau sein, da diese Geräte häufig das Netzwerk wechseln. Sehen wir uns nun an, wie wir die IP-Adresse des Benutzers in React erhalten können.

Den Standort des Benutzers ermitteln

Es gibt verschiedene Methoden, mit denen wir den Standort des Benutzers ermitteln können. Für diesen Artikel verwenden wir die Geolocation-API , die von allen Browsern unterstützt wird und wir müssen keine andere Bibliothek eines Drittanbieters installieren, um sie zu verwenden. Um mehr Daten zu erhalten, können wir APIs von Drittanbieterdiensten wie der Geocoding-API verwenden.

Lassen Sie uns zunächst eine React-App mit vite erstellen. Öffnen Sie das CMD oder Terminal, suchen Sie dann Ihren Projektordner und verwenden Sie die folgenden Befehle.

• npm create vite@latest your-app-name

Sobald Sie den obigen Befehl ausführen, wird eine Liste der Frameworks angezeigt. Wählen Sie nun mit den Pfeiltasten „Reagieren“ aus der Liste aus und drücken Sie die Eingabetaste.

• Nun wird Ihnen eine Liste mit Varianten angezeigt. Wählen Sie aus diesen Varianten Javascript aus. Anschließend wird ein Ordner mit Ihrem App-Namen erstellt und alle erforderlichen Dateien hinzugefügt. Verwenden Sie nun die folgenden Befehle, um alle erforderlichen Bibliotheken zu installieren und den Entwicklungsserver auszuführen.

  
  

  • cd your-app-name Dieser Befehl ändert das aktuelle Verzeichnis in das App-Verzeichnis
  • npm install Mit diesem Befehl installieren wir alle erforderlichen Bibliotheken
  • npm run dev Dieser Befehl startet den Entwicklungsserver wahrscheinlich unter localhost:5173

  
  

Jetzt ist der Entwicklungsserver betriebsbereit, also ermitteln wir die IP-Adresse des Benutzers.

Abrufen der Breiten- und Längengradinformationen des Benutzers mithilfe der Geolocation-API

Mit der Geolocation-API kann der Benutzer seinen Standort angeben, wenn er dies möchte. Diese Methode funktioniert nur, wenn der Benutzer die Erlaubnis zum Zugriff auf seinen Standort erteilt, andernfalls kann diese browserbasierte API die IP-Adresse nicht abrufen. Wenn die Funktion Ihrer Webanwendung wirklich den Standort des Benutzers erfordert, können Sie den Benutzer mit einer guten Textnachricht auffordern und ihm mitteilen, warum Sie seinen Standort benötigen.

Der Zugriff auf diese Geolocation-API erfolgt über einen Aufruf von navigator.geolocation , einer Eigenschaft, die ein Geolocation-Objekt zurückgeben kann. Mal sehen, was Navigator ist.

• Navigator: Es handelt sich um eine Schnittstelle, die den Status und die Identität des Benutzeragenten (Browsers) darstellt. Lassen Sie uns diesen Navigator protokollieren und sehen, welche anderen Eigenschaften er bietet.

  
  

  Öffnen Sie die Datei App.jsx und bereinigen Sie den gesamten Code in der Return-Anweisung. Behalten Sie einfach das übergeordnete div mit der Klasse App bei und verwenden Sie dann console.log(navigator) in einem useEffect , wie im folgenden Code angegeben.

  
  

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

Öffnen Sie in Ihrem Entwicklungsserver-Tab die Konsole, indem Sie F12 drücken oder mit der rechten Maustaste klicken. Sie sehen die Liste verschiedener Eigenschaften wie appCodeName , Bluetooth , Zwischenablage , Geolokalisierung usw. Lassen Sie uns die Geolokalisierung protokollieren. Fügen Sie einfach die Geolokalisierung wie folgt in das Protokoll ein console.log(navigator.geolocation) . In der Konsole sehen Sie ein leeres Objekt, da wir derzeit keine Berechtigung zum Zugriff auf die Geolokalisierung haben. Sehen wir uns also an, wie wir diese Berechtigung erhalten. Schauen Sie sich den folgenden Code und die Erklärung an.

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

Im obigen useEffect prüfen wir zunächst, ob ein Navigator vorhanden ist. Geolokalisierung oder nicht und wenn es wahr ist, werden wir die Berechtigungen überprüfen.

Hier,

• navigator.permissions: Es gibt ein Permissions-Objekt zurück, mit dem der Berechtigungsstatus abgefragt und aktualisiert werden kann.

• Abfrage: Es handelt sich um eine Berechtigungsmethode, die den Status einer Benutzerberechtigung zurückgibt. Es wird ein Objekt benötigt, das über eine durch Kommas getrennte Liste von Name-Wert-Paaren verfügt. Hier haben wir die Geolokalisierung durchlaufen, da wir den Status der Geolokalisierungserlaubnis wissen möchten.

  
  

  Hier erhalten wir ein Versprechen, weshalb wir das Schlüsselwort then verwenden und die Ergebnisse protokollieren. Wenn Sie die Konsole des Browsers überprüfen, sehen Sie das folgende Objekt.

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

Der Zustand kann 3 verschiedene Werte haben,

• gewährt: Das bedeutet, dass wir die Berechtigung haben, auf den Standort zuzugreifen, sodass wir die Geolokalisierung direkt aufrufen können.
• Eingabeaufforderung: Der Benutzer erhält ein Popup, in dem er um Erlaubnis gebeten wird.
• verweigert: Das bedeutet, dass der Benutzer die Weitergabe seines Standorts verweigert hat.

Für die Zustände „gewährt“ und „aufgefordert“ können wir eine Funktion erstellen, um die aktuelle Position des Benutzers zu ermitteln, aber für den Zustand „ verweigert “ können wir Anweisungen anzeigen, wie er die Standortberechtigung in seinem Browser aktivieren kann.

HINWEIS: Es gibt keine Möglichkeit, die Standortberechtigung erneut anzufordern, wenn der Benutzer die Standortberechtigung bereits verweigert hat, es sei denn, der Benutzer aktiviert sie manuell in seinem Browser.

Lassen Sie uns die folgenden drei Bedingungen für alle drei Berechtigungszustände verwenden

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

Im prompt verwenden wir die Funktion getCurrentPosition . Diese Funktion akzeptiert die folgenden Argumente.

• success : Eine Rückruffunktion, die aufgerufen wird, wenn der Standort erfolgreich abgerufen wurde.
• Fehler : Eine Rückruffunktion, die aufgerufen wird, wenn beim Abrufen des Standorts ein Fehler auftritt. Dies ist optional.
• Optionen : Die Optionen akzeptieren unterschiedliche Parameter wie MaximumAge, Timeout, EnableHighAccuracy usw. Weitere Informationen zu diesen Optionen finden Sie in der MDN- Dokumentation. Auch dies ist optional.

Lassen Sie uns alle drei Argumente implementieren. Lassen Sie uns zunächst eine Erfolgsfunktion erstellen. Fügen Sie vor dem useEffect die folgende Erfolgsfunktion hinzu.

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

Diese Rückruffunktion gibt ein Positionsobjekt zurück, das Koordinaten hat, also Koordinaten. Sie können Werte wie Breitengrad , Längengrad , Genauigkeit usw. aus Koordinaten ermitteln. Fügen Sie nun nach der Erfolgsfunktion die folgende Fehlerfunktion hinzu.

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

Lassen Sie uns auch ein Optionsobjekt deklarieren,

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

Fügen Sie nun die folgende Zeile in die Bedingungen „prompt“ und „granted“ ein und überprüfen Sie die Ausgabe in Ihrem Browser.

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

Im Browser wird eine Eingabeaufforderung angezeigt, in der Sie um eine Standortberechtigung gebeten werden. Sobald Sie die Berechtigung erteilt haben, können Sie die Koordinatenwerte auf der Konsolenregisterkarte sehen. Hier ist der vollständige Code.

 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;

Das ist es. Auf diese Weise können Sie ganz einfach den Breiten- und Längengradwert jedes Geräts ermitteln. Da diese Informationen nicht mehr ausreichen, nutzen wir die Reverse-Geokodierungs-APIs von Opencage , um weitere Informationen zum Standort des Benutzers zu erhalten.

Verbesserung standortbasierter Dienste durch umgekehrte Geokodierung

Wir haben bereits die Breiten- und Längengradinformationen über das Gerät des Benutzers erhalten. Sehen wir uns nun an, wie wir diese nutzen können, um weitere Informationen über seinen Standort zu erhalten. Wir werden APIs von opencage verwenden, um weitere Informationen zum Standort zu erhalten. Stellen Sie also sicher, dass Sie sich anmelden und einen API-Schlüssel erhalten. Sie müssen für nichts bezahlen, da opencage in der kostenlosen Testversion 2.500 Anfragen/Tag bereitstellt. Weitere Informationen zu den Preisen finden Sie auf der Website. Ich habe die API von Opencage verwendet, da es eine kostenlose Testversion und auch keine CORS-Einschränkungen gibt. Jetzt erstellen wir eine Funktion zur Verwendung dieser 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)); }

Diese getLocationInfo- Funktion benötigt Breiten- und Längengrade und verwendet dann die URL aus der Opencage- Dokumentation , die Breiten- und Längengrade sowie den API-Schlüssel verwendet. In dieser Funktion haben wir fetch verwendet, um die Daten von der URL abzurufen. Wenn der Statuscode 200 ist, speichern wir die Daten im Standortstatus . Sie können Ihre Konsole im Browser überprüfen, um zu sehen, welche Art von Daten Sie erhalten. Im Moment verwenden wir den Wert aus der formatierten Eigenschaft. Weitere Informationen zum Antwortobjekt finden Sie in der Dokumentation. Rufen wir nun diese Funktion aus der Erfolgsfunktion auf, die wir bereits definiert haben.

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

Wenn der Benutzer nun zustimmt, seinen Standort anzugeben, wird die Erfolgsfunktion ausgeführt und außerdem die Informationen zum Breiten- und Längengrad an die Funktion getLocationInfo übergeben und ausgeführt. Sie können diesen Standortstatus verwenden, um den Standort in Ihrer Web-App anzuzeigen.

Hier ist der vollständige Code:

 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;

Sie können auch einen Fehlerstatus implementieren, der die Fehlermeldung anzeigt, wenn die API oder Funktion die Daten nicht ordnungsgemäß abrufen kann. Implementieren Sie auch die erforderliche Fehlerbehandlungsmethode für die Funktionen. So erhalten Sie viele Informationen über den Standort des Geräts. Sehen wir uns nun an, wie Sie die IP-Adresse des Geräts erhalten.

Abrufen der IP-Adresse des Benutzers

Um die IP-Adresse des Benutzers auf der Clientseite zu erhalten, verwenden wir ipify , eine einfache API für öffentliche IP-Adressen. Wir erstellen einen weiteren useEffect und erstellen eine Funktion zum Abrufen der IP-Adresse, wie im folgenden Codeblock gezeigt.

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

Im obigen Code haben wir einen Status namens ipAddress erstellt, um die IP-Adresse zu speichern. Da ipfy eine öffentliche API ist, benötigen wir keinen API-Schlüssel und können die URL direkt verwenden. In useEffect haben wir eine asynchrone Funktion namens fetchIp erstellt, die die IP-Adresse im Status ipAddress abruft und speichert. Vergessen Sie nicht, die Funktion fetchIp im useEffect aufzurufen.

So können Sie ganz einfach die IP-Adresse des Geräts ermitteln. Es gibt mehrere APIs, die solche Dienste bereitstellen. Auf der Serverseite können Sie die IP-Adresse im Allgemeinen aus der Anfrage ermitteln, die der Benutzer Ihnen gesendet hat, um die Webseite oder andere Daten abzurufen. Sie sollten sich jedoch nicht ausschließlich auf die IP-Adresse verlassen, da einige ISPs gemeinsame IP-Adressen verwenden, was bedeutet, dass mehrere Benutzer möglicherweise dieselbe IP-Adresse haben. Darüber hinaus verwenden einige Benutzer auch VPNs und Proxys.

Best Practices für die Erfassung und Verarbeitung von Benutzerstandortdaten

Wenn es um die Daten des Benutzers geht, sind diese immer ein entscheidender Teil jeder Anwendung. Als Entwickler ist es unsere Aufgabe, eine Anwendung zu erstellen, die benutzerzentriert ist und die Daten der Benutzer schützt. Bei Daten wie dem Standort des Geräts kann der Entwickler mit vielen Problemen konfrontiert sein, wie zum Beispiel:

• Wie genau sind die IP- oder Geolocation-Daten?
• Was ist zu tun, wenn der Benutzer der Nutzung seines Standorts nicht zustimmt?
• Wie gehen und schützen Sie die Daten sicher?

Die Implementierung standortbasierter Funktionen kann eine Herausforderung sein, aber durch die Befolgung der Best Practices können Sie Benutzern ein personalisierteres und sichereres Erlebnis bieten. Beachten Sie beim Umgang mit standortbezogenen Daten die folgenden Punkte.

• Genauigkeit: Wenn Sie die IP-Adresse verwenden, sollten Sie diese noch einmal überprüfen, indem Sie mehr als eine API verwenden und den Standort gegenprüfen. Sie müssen einen Fallback-Mechanismus in standortbasierte Dienste und Funktionen integrieren. Es ist besser, die Daten zu überprüfen, da Standortdaten durch Faktoren wie Geräteeinstellungen, Netzwerkverbindungen usw. beeinflusst werden können.

  
  

• Datenschutz: Dies ist das Hauptanliegen bei der Erfassung von Benutzerdaten, da Sie die unterschiedlichen Gesetze mehrerer Länder im Auge behalten müssen. Entwickler sollten stets die Privatsphäre des Benutzers respektieren. Für die Erfassung jeglicher Daten des Benutzers ist eine klare und prägnante Datenschutzrichtlinie erforderlich. Sie müssen den Benutzer informieren, wann immer Sie vertrauliche Informationen sammeln. Wenn es standortbezogene Funktionen gibt, sollten Sie klar darlegen, warum und wie Sie die Daten verwenden werden. Außerdem sollten Sie dem Benutzer eine Opt-out-Option zur Verfügung stellen, sodass er sich problemlos abmelden kann, wenn er seine Daten nicht weitergeben möchte.

  
  

• Sicherheit: Für die Sicherheit der Daten können Sie Authentifizierungsmechanismen wie OAuth oder JWT implementieren und die API-Endpunkte vor unbefugtem Zugriff schützen. Sie sollten Benutzern immer empfehlen, sichere Passwörter zu verwenden, Browser zu aktualisieren usw. Sie müssen die Daten mit HTTPS- und SSL-Zertifikaten verschlüsseln, um eine sichere Kommunikation zwischen dem Client und dem Server zu gewährleisten. Im Backend können Sie eine rollenbasierte Zugriffskontrolle implementieren, sodass nur ausgewählte Benutzer, beispielsweise nur Administratoren, auf die Daten zugreifen können. Bevor Sie eine Abhängigkeit aktualisieren, sollten Sie immer prüfen, ob sie von der offiziellen Quelle stammt oder nicht.

  
  

  Abschluss

  Für das personalisierte Nutzererlebnis spielen die Standortdaten eine große Rolle, allerdings ist auch der Umgang mit diesen Daten eine entscheidende Aufgabe. Es gibt viele verschiedene Methoden, mit denen Sie die Standortdaten abrufen können, aber es hängt davon ab, wie viele Daten Sie benötigen. Wenn Sie nur eine IP-Adresse benötigen, können Sie die ipify- APIs verwenden, und wenn Sie mehr Geolokalisierungsdaten benötigen, können Sie beide verwenden opencage oder Googles Reverse-Geokodierungs-API . Wenn Sie kleine Anwendungen wie Wetter-Apps erstellen, müssen Sie keine APIs verwenden, da Sie die Geolocation-APIs des Browsers verwenden können. Wenn es um die Sicherheit und den Datenschutz dieser Daten geht, sollten Sie potenzielle Risiken im Zusammenhang mit der Privatsphäre des Benutzers durch die Bereitstellung einer gut formulierten Datenschutzrichtlinie vermeiden. Das ist das Ende dieses Artikels. Ich hoffe, er gefällt Ihnen.

  
  

  • Schauen Sie sich meine Website namens DevDreamning an.
  • Mein YouTube-Kanal👇😉