Wie man die IP-Adresse des Clients in JavaScript erhält

JavaScript im Browser kann die öffentliche IP-Adresse eines Geräts nicht direkt auslesen. Es kann eine Anfrage an einen IP-Lookup-Dienst senden, der die öffentliche Adresse meldet, die er für diese Anfrage beobachtet. Diese unterscheidet sich von einer privaten Adresse, die in einem lokalen Netzwerk verwendet wird. Die Anfrage teilt die IP-Adresse des Besuchers auch mit dem Drittanbieter, wählen Sie daher einen Dienst, dessen Datenpraktiken zu Ihrer Anwendung passen.

Die folgenden Beispiele verwenden fetch, das in modernen Browsern verfügbar ist. Sie behandeln drei Anbieter: ipify für eine Antwort nur mit der IP, ipinfo für IP- und Standortfelder und Abstract für Geolokalisierungsdaten. Wählen Sie nach den Feldern, die Ihre Anwendung benötigt, danach, ob der Anbieter Zugangsdaten erfordert, und danach, wie Sie etwaige Zugangsdaten schützen. Diese Anfragen laufen aus dem Browser des Besuchers, sodass der Anbieter die öffentliche IP des Besuchers sieht. Verfügbarkeit der Anbieter, Antwortfelder und Zugriffsregeln können sich ändern; konsultieren Sie vor der Bereitstellung die aktuelle Dokumentation des Anbieters.

Eine öffentliche IP-Adresse mit ipify abrufen

ipify stellt einen JSON-Endpunkt unter https://api.ipify.org?format=json bereit. Die Antwort enthält eine ip-Eigenschaft. Dieses Beispiel liest diesen Wert aus und zeigt ihn an. Das ipify-API-Repository enthält den Quellcode des Projekts.

// Use a representative response so the parsing path is deterministic.
globalThis.fetch = async () => ({
  ok: true,
  json: async () => ({ ip: '203.0.113.42' }),
});

(async () => {
  try {
    const response = await fetch('https://api.ipify.org?format=json');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log(data.ip);
  } catch (error) {
    console.log('Could not retrieve the public IP:', error.message);
  }
})();

203.0.113.42

Die Anfrage prüft den HTTP-Status, bevor sie JSON parst, und liest dann das Feld ip. Schlägt sie fehl, prüfen Sie im Netzwerkbereich des Browsers Details zu Konnektivität, Dienst oder Content-Security-Policy. Diese Methode gibt die von ipify beobachtete Adresse zurück; sie offenbart nicht die private LAN-Adresse des Geräts. Verwenden Sie sie, wenn eine Antwort nur mit der IP ausreicht und keine zusätzlichen Standortfelder benötigt werden.

IP- und Standortdaten mit ipinfo abrufen

ipinfo gibt ein Feld ip zurück und kann standortbezogene Felder wie city, region, country und loc bereitstellen. Das Beispiel verwendet eine repräsentative Antwort, um zu zeigen, wie diese Felder gelesen werden; sein lokaler fetch-Ersatz hält die Demonstration unabhängig vom Netzwerkzugriff. Verwenden Sie für eine Live-Anfrage den unten gezeigten JSON-Endpunkt. Verfügbare Felder und Zugriff können von der Anfrage und den aktuellen Anforderungen des Anbieters abhängen, prüfen Sie daher die Dokumentation des Anbieters zu Zugangsdaten und Tarifgrenzen, statt sich auf feste Kontingentzahlen zu verlassen.

// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
  ok: true,
  json: async () => ({
    ip: '203.0.113.42',
    city: 'Austin',
    region: 'Texas',
    country: 'US',
    loc: '30.2672,-97.7431',
  }),
});

(async () => {
  try {
    const response = await fetch('https://ipinfo.io/json');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log('IP:', data.ip);
    console.log('Location:', data.city, data.region, data.country);
  } catch (error) {
    console.log('Could not retrieve IP information:', error.message);
  }
})();

IP: 203.0.113.42
Location: Austin Texas US

Verwenden Sie das Feld ip, wenn Sie nur die beobachtete Adresse benötigen. Die zusätzlichen Felder können eine grobe regionale Anzeige unterstützen, aber Standortdaten sind ungefähr und hängen von den Daten des Anbieters ab; sie identifizieren keinen genauen Gerätestandort. Schlägt die Anfrage fehl, prüfen Sie die Netzwerkantwort und ob die aktuellen Zugriffsanforderungen des Endpunkts für Ihre Verwendung gelten.

IP- und Geolokalisierungsdaten mit Abstract abrufen

Abstract stellt einen Endpunkt für IP-Geolokalisierung bereit. Seine Anfrage verwendet einen API-Schlüssel, erstellen Sie daher einen Schlüssel beim Anbieter und ersetzen Sie den Platzhalter unten. Die URL-API codiert den Schlüssel als Abfrageparameter. Dieses Beispiel verwendet eine repräsentative Antwort und gibt ihre IP- und Standortfelder aus; der lokale fetch-Ersatz macht das Parsing-Beispiel deterministisch. Prüfen Sie für eine Live-Anfrage die aktuelle Dokumentation des Anbieters zu Kontozugriff, Kontingenten und Antwortschema, bevor Sie Felder für Ihre Oberfläche auswählen. Ein in Browser-JavaScript eingebetteter Schlüssel ist für Besucher sichtbar; verwenden Sie einen serverseitigen Proxy, wenn der Schlüssel privat bleiben muss.

// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
  ok: true,
  json: async () => ({
    ip_address: '203.0.113.42',
    city: 'Austin',
    region: 'Texas',
    country: 'United States',
    latitude: 30.2672,
    longitude: -97.7431,
  }),
});

(async () => {
  const apiKey = 'YOUR_ABSTRACT_API_KEY';
  const url = new URL('https://ipgeolocation.abstractapi.com/v1/');
  url.searchParams.set('api_key', apiKey);

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log('IP:', data.ip_address);
    console.log('Location:', data.city, data.region, data.country);
    console.log('Coordinates:', data.latitude, data.longitude);
  } catch (error) {
    console.log('Could not retrieve geolocation data:', error.message);
  }
})();

IP: 203.0.113.42
Location: Austin Texas United States
Coordinates: 30.2672 -97.7431

Das Beispiel liest die IP- und Standortfelder aus dem zurückgegebenen Objekt. Das lokale Beispiel demonstriert nur das Parsen; es verifiziert keine Live-Antwort des Dienstes. Ein fehlender, abgelehnter oder eingeschränkter API-Schlüssel kann zu einer Fehlerantwort führen; auch Netzwerk- und Dienstfehler können ein Ergebnis verhindern. Behandeln Sie diese Fälle in der Anwendung und prüfen Sie die Antwort und die Dokumentation des Anbieters, wenn Sie das Beispiel anpassen, um bestimmte Felder anzuzeigen. Wählen Sie Abstract, wenn dessen aktuelle Antwort und Zugriffsbedingungen zu den Standortdaten passen, die Ihre Anwendung benötigt.