Ottieni l'indirizzo IP del client in JavaScript

JavaScript nel browser non può leggere direttamente l’indirizzo IP pubblico di un dispositivo. Può inviare una richiesta a un servizio di ricerca IP, che segnala l’indirizzo pubblico che osserva per quella richiesta. Questo è diverso da un indirizzo privato utilizzato su una rete locale. La richiesta condivide inoltre l’indirizzo IP del visitatore con il fornitore di terze parti, quindi scegli un servizio le cui pratiche sui dati siano adatte alla tua applicazione.

Gli esempi seguenti utilizzano fetch, disponibile nei browser moderni. Coprono tre fornitori: ipify per una risposta con solo IP, ipinfo per i campi IP e di posizione e Abstract per i dati di geolocalizzazione. Scegli in base ai campi di cui la tua applicazione ha bisogno, al fatto che il fornitore richieda o meno credenziali e a come proteggerai eventuali credenziali. Queste richieste vengono eseguite dal browser del visitatore, quindi il fornitore vede l’IP pubblico del visitatore. La disponibilità del fornitore, i campi di risposta e le regole di accesso possono cambiare; consulta la documentazione corrente del fornitore prima della distribuzione.

Ottenere un indirizzo IP pubblico con ipify

ipify fornisce un endpoint JSON all’indirizzo https://api.ipify.org?format=json. La risposta contiene una proprietà ip. Questo esempio legge quel valore e lo visualizza. Il repository dell’API ipify contiene il codice sorgente del progetto.

// 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

La richiesta controlla lo stato HTTP prima di analizzare il JSON, quindi legge il campo ip. Se fallisce, ispeziona il pannello di rete del browser per i dettagli su connettività, servizio o politica di sicurezza dei contenuti. Questo metodo restituisce l’indirizzo osservato da ipify; non rivela l’indirizzo LAN privato del dispositivo. Usalo quando è sufficiente una risposta con solo IP e non sono necessari campi di posizione aggiuntivi.

Ottenere dati IP e di posizione con ipinfo

ipinfo restituisce un campo ip e può fornire campi relativi alla posizione come city, region, country e loc. L’esempio utilizza una risposta rappresentativa per mostrare come leggere tali campi; il suo sostituto locale di fetch mantiene la dimostrazione indipendente dall’accesso alla rete. Per una richiesta reale, utilizza l’endpoint JSON mostrato di seguito. I campi disponibili e l’accesso possono dipendere dalla richiesta e dai requisiti correnti del fornitore, quindi consulta la documentazione del fornitore per credenziali e limiti del piano invece di affidarti a cifre di quota fisse.

// 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

Usa il campo ip quando ti serve solo l’indirizzo osservato. I campi aggiuntivi possono supportare una visualizzazione regionale ampia, ma i dati di posizione sono approssimativi e dipendono dai dati del fornitore; non identificano una posizione precisa del dispositivo. Se la richiesta fallisce, controlla la risposta di rete e se i requisiti di accesso correnti dell’endpoint si applicano al tuo utilizzo.

Ottenere dati IP e di geolocalizzazione con Abstract

Abstract fornisce un endpoint di geolocalizzazione IP. La sua richiesta utilizza una chiave API, quindi crea una chiave tramite il fornitore e sostituisci il segnaposto di seguito. L’API URL codifica la chiave come parametro di query. Questo esempio utilizza una risposta rappresentativa e ne stampa i campi IP e di posizione; il sostituto locale di fetch rende l’esempio di analisi deterministico. Per una richiesta reale, consulta la documentazione corrente del fornitore su accesso all’account, quote e schema di risposta prima di selezionare i campi per la tua interfaccia. Una chiave incorporata in JavaScript nel browser è visibile ai visitatori; utilizza un proxy lato server se la chiave deve rimanere privata.

// 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

L’esempio legge i campi IP e di posizione dall’oggetto restituito. Il campione locale dimostra solo l’analisi; non verifica una risposta reale del servizio. Una chiave API mancante, rifiutata o limitata può portare a una risposta di errore; anche guasti di rete e del servizio possono impedire un risultato. Gestisci questi casi nell’applicazione e ispeziona la risposta e la documentazione del fornitore quando adatti l’esempio per visualizzare campi particolari. Scegli Abstract quando la sua risposta corrente e le sue condizioni di accesso si adattano ai dati di posizione di cui la tua applicazione ha bisogno.