Je travaille sur une application basée sur react.js. L'une des exigences de l'application est de détecter l'emplacement (pays) à partir duquel il est ouvert, puis de pré-remplir le champ du numéro de téléphone sur un formulaire avec le drapeau de ce pays.
Je pense que cela serait fait plus efficacement en détectant d'abord l'adresse IP, puis en trouvant le nom du pays à l'aide de cette adresse IP. Pour cela, j'ai essayé de nombreuses bibliothèques, par exemple "iplocation", "geoip-country-lite", "ip" etc mais ceux-ci ne sont pas compatibles avec mon application. Quelqu'un peut-il me suggérer une autre bibliothèque à l'aide de laquelle je peux obtenir le nom du pays?
Ou il existe une autre solution efficace au lieu de détecter l'adresse IP, par exemple obtenir des informations du navigateur qui peuvent me donner le nom du pays? Veuillez guider.
3 Réponses :
Vous pouvez utiliser une API externe pour obtenir les détails de l'emplacement à partir de l'adresse IP du client.
J'ai refait cela pour utiliser http://api.hostip.info , qui est gratuit utiliser, et j'utilise Fetch plutôt que jQuery pour extraire les données.
<div style="text-align:center;line-height:30px;"> <button onclick="getIpAddress()">Click me to get IP AddressInfo </button> <div id="output">Location:</div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
function getElementText(response, elementName) {
return response.getElementsByTagName(elementName)[0].innerHTML;
}
function getIpAddress() {
fetch('http://api.hostip.info').then(response => {
return response.text();
}).then(xml => {
return (new window.DOMParser()).parseFromString(xml, "text/xml");
}).then(xmlDoc => {
countryName = getElementText(xmlDoc , "countryName");
countryCode = getElementText(xmlDoc , "countryAbbrev");
$("#output").html("Country name: " + countryName + "<br>" + "Country code: " + countryCode);
});
}
Ce sont des services payants. J'en ai déjà rencontré beaucoup. Je ne veux pas utiliser de tels services. Y a-t-il une autre solution?
Eh bien, le service de géolocalisation HTML5 peut également être utilisé, mais l'utilisateur devra accorder une approbation pour donner son emplacement. Si vous pouvez trouver un service de recherche IP entièrement gratuit, l'approche API fonctionnera toujours! De plus, ipapi.co autorisera un certain nombre de demandes gratuitement (je pense que c'est 30000 par mois), si vous n'avez pas besoin d'une quantité énorme, cela fonctionnera très bien.
Jetez également un œil à hostip.info/use.html , il semble qu'ils soient un service gratuit.
Vous pouvez le faire sans utiliser jQuery.
Installer et importer axios à partir de npm
render() {
return (
<div>
<p>Country Name: {this.state.countryName}</p>
<p>Country Code: {this.state.countryCode}</p>
</div>
)
}
Initialiser l'état de votre composant avec le nom et le code du pays
XXX
Ajoutez cette fonction à votre composant
componentDidMount(){
this.getGeoInfo();
}
Et appelez this.getGeoInfo () pour définir le nom du pays et le code du pays dans votre état. J'ai appelé cela depuis componentDidMount()
getGeoInfo = () => {
axios.get('https://ipapi.co/json/').then((response) => {
let data = response.data;
this.setState({
countryName: data.country_name,
countryCode: data.country_calling_code
});
}).catch((error) => {
console.log(error);
});
};
Et vous pouvez lire l'état pour obtenir le nom et le code du pays
constructor(props) {
super(props);
this.state = {
countryName: '',
countryCode: ''
}
}
Avec les hooks React, cela peut être fait comme ci-dessous:
import React, { useEffect } from 'react';
useEffect(() => {
fetch('https://extreme-ip-lookup.com/json/')
.then( res => res.json())
.then(response => {
console.log("Country is : ", response);
})
.catch((data, status) => {
console.log('Request failed:', data);
});
},[])