• laurent@lioncoding.com

Nous découvrirons dans cet article, comment détecter l’emplacement(spécialement le pays) d’un internaute de notre site web grâce à un certain nombre d’API et à JQuery.

Sujet

Nous rencontrons souvent les situations suivantes sur le Net:

Mais comment est-ce possible ?

C’est simplement parce-qu’ils ont pu déterminer votre adresse IP. Grâce à votre adresse IP sur Internet, on peut avoir tout un tas d’informations notamment le FAI, le pays, la région, la ville…

Le but de cet article est de vous montrer comment déterminer le pays d’un internaute en se basant sur son adresse IP.

Les ressoucres à notre disposition

Les infomations sensibles sur les captures d’écran seront cachées.

L’API ipify

C’est cette API qui nous permettra de récupérer l’adresse IP de l’internaute. Faites un test en cliquant sur ce lien; vous verrez votre adresse IP s’afficher au format JSON.

Voici le test de cette API que j’ai effectué avec Postman:

Figure 1: Test de L’API ipify avec Postman.

Nous utiliserons plus tard la méthode getJSON() de JQuery pour récupérer la valeur de la propriété ip.

L’API ipapi

L’API ipapi nous donnera le nom du pays, la ville, le FAI et bien d’autres informations. L’adresse IP doit être précisée dans l’URI de l’API ipapi, nous passerons sans doute l’IP obtenue grâce à ipify en paramètre de l’URI.

Figure 2: Test de L’API ipapi avec Postman.

La propriété qui nous interesse ici est country ou country_name.

L’on pourrait s’arrêter à cette API pour cet article et passer directement au code mais nous irons un peu plus loin pour obtenir le drapeau du pays en se basant sur le nom retourné par ipapi.

L’API restcountries

Rescountries est une API qui fournie des informations complètes sur les pays et ce qui nous intéresse ici est seulement le lien vers le drapeau du pays que nous voulons. L’URI de cette API prend en paramètre le nom complet du pays ou le code de 2 lettres. Nous allons nous servir du nom retourné par lAPI présentée précédemment.

Il faut remarquer j’ai présenté les API dans un ordre donné. La deuxième(ipapi) utilisera le résultat de la première(ipify) et la troisième(restcountries), celui de la deuxième.

Figure 3: Test de L’API restcountries avec Postman.

Nous avons la propriété flag qui nous donne un lien vers le logo du drapeau.

Toutes les données figurant sur les figures sont relatives à mon adresse IP et à mon emplacement. Vous n’aurez donc pas les même informations si vous vous situez dans un autre pays.

Mise en œuvre

Nous allons mettre en place une page html très simple qui affichera le drapeau et le nom du pays de l’internaute.

Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Your location based on ip address</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/location.css">
</head>
<body class="location-page">
    <section class="h-100 center">
        <div class="container h-100">
            <div class="row justify-content-md-center h-100">
                <div class="card-wrapper">
                    <div class="brand">                        
                    </div>
                    <div class="card fat">
                        <div class="card-body">
                            <h4 class="card-title">Your location</h4>
                            <img id="flag" style="height: 20px;width: 30px;" />
                            <span> </span>
                            <span id="country"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="js/location.js"></script>
</body>
</html>

Le code javascript qui sera dans le fichier js/location.js se chargera de renseigner les balises img dont l’id est flag et la balise span dont l’id est country.

Code CSS pour styliser un tout petit peu la page html(fichier css/location.css)
html,body {
    height: 100%;
}

body.location-page {
    background-color: #f7f9fb;
    font-size: 14px;
}

.location-page .brand {
    margin: 20px auto;
}

.location-page .card-wrapper {
    width: 400px;
}

.location-page .card {
    border-color: transparent;
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

.location-page .card.fat {
    padding: 10px;
}

.location-page .card .card-title {
    margin-bottom: 30px;
}

.card-body{
    text-align: center;
}
#country{
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width: 425px) {
    .location-page .card-wrapper {
        width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 320px) {
    .location-page .card.fat {
        padding: 0;
    }

    .location-page .card.fat .card-body {
        padding: 15px;
    }
}
Code JavaScript(fichier js/location.js)
$(function() {
    $.getJSON("https://api.ipify.org/?format=json", function (data_ip) {
        var ip = data_ip.ip;
        $.getJSON("https://ipapi.co/" + ip + "/json/", function (country) {
            if (country.country !== null) {
                $.getJSON("https://restcountries.eu/rest/v2/name/" + country.country, function(data_country) {                          
                    $("#flag").attr("src",data_country[0].flag);
                    $("#country").html(data_country[0].name);                   
                });
            }else{
                alert("Please, reload the page !");
            }
        });
    });
});

Voici le résultat que j’obtiens en me rendant sur la page HTML.

Voici la Démo et le Code source.