Comment obtenir l'adresse IP du client en JavaScript

JavaScript dans le navigateur ne peut pas lire directement l’adresse IP publique d’un appareil. Il peut envoyer une requête à un service de recherche d’IP, qui signale l’adresse publique qu’il observe pour cette requête. Celle-ci diffère d’une adresse privée utilisée sur un réseau local. La requête partage également l’adresse IP du visiteur avec le fournisseur tiers, choisissez donc un service dont les pratiques en matière de données conviennent à votre application.

Les exemples ci-dessous utilisent fetch, disponible dans les navigateurs modernes. Ils couvrent trois fournisseurs : ipify pour une réponse contenant uniquement l’IP, ipinfo pour les champs d’IP et de localisation, et Abstract pour les données de géolocalisation. Choisissez en fonction des champs dont votre application a besoin, du fait que le fournisseur exige ou non des identifiants, et de la manière dont vous protégerez ces identifiants. Ces requêtes s’exécutent depuis le navigateur du visiteur, le fournisseur voit donc l’IP publique du visiteur. La disponibilité du fournisseur, les champs de réponse et les règles d’accès peuvent changer ; consultez la documentation actuelle du fournisseur avant le déploiement.

Obtenir une adresse IP publique avec ipify

ipify fournit un point de terminaison JSON à l’adresse https://api.ipify.org?format=json. La réponse contient une propriété ip. Cet exemple lit cette valeur et l’affiche. Le dépôt de l’API ipify contient le code source du projet.

// 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 requête vérifie le statut HTTP avant d’analyser le JSON, puis lit le champ ip. En cas d’échec, inspectez le panneau réseau du navigateur pour les détails de connectivité, de service ou de politique de sécurité du contenu. Cette méthode renvoie l’adresse observée par ipify ; elle ne révèle pas l’adresse LAN privée de l’appareil. Utilisez-la lorsqu’une réponse contenant uniquement l’IP suffit et qu’aucun champ de localisation supplémentaire n’est nécessaire.

Obtenir les données d’IP et de localisation avec ipinfo

ipinfo renvoie un champ ip et peut fournir des champs liés à la localisation tels que city, region, country et loc. L’exemple utilise une réponse représentative pour montrer comment lire ces champs ; son substitut local de fetch rend la démonstration indépendante de l’accès au réseau. Pour une requête réelle, utilisez le point de terminaison JSON indiqué ci-dessous. Les champs disponibles et l’accès peuvent dépendre de la requête et des exigences actuelles du fournisseur, consultez donc la documentation du fournisseur pour les identifiants et les limites des offres au lieu de vous fier à des chiffres de quota fixes.

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

Utilisez le champ ip lorsque vous n’avez besoin que de l’adresse observée. Les champs supplémentaires peuvent permettre un affichage régional large, mais les données de localisation sont approximatives et dépendent des données du fournisseur ; elles n’identifient pas un emplacement précis de l’appareil. Si la requête échoue, vérifiez la réponse réseau et si les exigences d’accès actuelles du point de terminaison s’appliquent à votre utilisation.

Obtenir les données d’IP et de géolocalisation avec Abstract

Abstract fournit un point de terminaison de géolocalisation IP. Sa requête utilise une clé API, créez donc une clé auprès du fournisseur et remplacez l’espace réservé ci-dessous. L’API URL encode la clé comme paramètre de requête. Cet exemple utilise une réponse représentative et affiche ses champs d’IP et de localisation ; le substitut local de fetch rend l’exemple d’analyse déterministe. Pour une requête réelle, consultez la documentation actuelle du fournisseur sur l’accès au compte, les quotas et le schéma de réponse avant de sélectionner des champs pour votre interface. Une clé intégrée dans le JavaScript du navigateur est visible par les visiteurs ; utilisez un proxy côté serveur si la clé doit rester privée.

// 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’exemple lit les champs d’IP et de localisation de l’objet renvoyé. L’échantillon local démontre uniquement l’analyse ; il ne vérifie pas une réponse réelle du service. Une clé API manquante, rejetée ou restreinte peut entraîner une réponse d’erreur ; des défaillances du réseau et du service peuvent également empêcher un résultat. Gérez ces cas dans l’application et inspectez la réponse et la documentation du fournisseur lorsque vous adaptez l’exemple pour afficher des champs particuliers. Choisissez Abstract lorsque sa réponse actuelle et ses conditions d’accès correspondent aux données de localisation dont votre application a besoin.