Захват местоположения IP-адреса

Пару месяцев назад для 12-часового хакатона я создал https://geochattr.netlify.app/ вместе с Мэгги Лю и Гаутамом Паранджапе.

Проект представляет собой способ общения с помощью рисунков, и вы можете общаться с людьми в своем городе.

Способ, с помощью которого мы получаем местоположение для размещения в чате города, — это использование вашего IP.

Руководство

Чтобы сделать это, нам придется использовать API для получения информации о местоположении.

Как правило, я обнаружил, что большинство из них имеют какой-то премиум-план, но IpAPI достаточно хорош и имеет хорошую точность для работы.

Быстрый метод

Чтобы узнать свое местоположение, просто сделайте GET-запрос на https://ipapi.co/json/ от клиента. Это даст нам всю необходимую информацию для получения местоположения пользователя.

Вы можете использовать любую библиотеку, которую вы хотите получить от клиента. Я склонен придерживаться axios, поэтому здесь приведен пример на axios:

axios.get("https://ipapi.co/json/").then(location => {
    console.log(location.data)
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Однако, если вы делаете это с помощью обычного HTML, CSS, JS, вам нужно использовать API fetch браузера.

fetch("https://ipapi.co/json/").then(data=>data.json()).then(location=>{
   console.log(location);
})
Вход в полноэкранный режим Выход из полноэкранного режима

После этого у вас будет что-то похожее на это (очевидно, я использую VPN):

{
    "ip": "89.238.130.72",
    "version": "IPv4",
    "city": "Manchester",
    "region": "England",
    "region_code": "ENG",
    "country": "GB",
    "country_name": "United Kingdom",
    "country_code": "GB",
    "country_code_iso3": "GBR",
    "country_capital": "London",
    "country_tld": ".uk",
    "continent_code": "EU",
    "in_eu": false,
    "postal": "M32",
    "latitude": 53.4507,
    "longitude": -2.3186,
    "timezone": "Europe/London",
    "utc_offset": "+0100",
    "country_calling_code": "+44",
    "currency": "GBP",
    "currency_name": "Pound",
    "languages": "en-GB,cy-GB,gd",
    "country_area": 244820.0,
    "country_population": 66488991,
    "asn": "AS9009",
    "org": "M247 Ltd"
}
Вход в полноэкранный режим Выход из полноэкранного режима

Более безопасный метод

Конечно, клиент всегда может отключить JavaScript, когда захочет, что означает, что он может отключить GET-запрос к API. Однако мы все равно можем получить IP на сервере.

Например, если пользователь хочет загрузить пост, а вы хотите разделить его на категории в зависимости от того, в каком городе он его сделал, вы можете получить IP таким образом. Мы можем получить IP от пользователя следующим образом:

app.post("/upload", (req,res)=>{
    /* ... */
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  console.log(ip); // ip address of the user

})
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем мы можем снова сделать GET-запрос к ipapi.co, но на этот раз мы отправим немного другой запрос.

Вместо запроса на https://ipapi.co/json, мы отправим запрос на https://ipapi.co/{ip}/json, где {ip} — это IP, который вы извлекли из запроса входящего пользователя. Это будет выглядеть, например, как https://ipapi.co/89.238.130.72/json/. Для запросов на стороне сервера, вероятно, следует использовать axios, поэтому следуйте приведенному выше примеру, как сделать GET-запрос.

Заключение

Надеюсь, вы узнали что-то новое о том, как это сделать. Я помню, как во время хакатона я застрял на час или два на том, как именно это сделать, и я хотел помочь предотвратить эту путаницу для других в будущем.

Если вы хотите посмотреть классную демонстрацию, загляните на сайт https://ip-grabber-demo.shubhampatilsd.repl.co/, где представлена интерактивная карта.

Исходный код находится по адресу https://replit.com/@ShubhamPatilsd/ip-grabber-demograbber-demo#index.html.

В любом случае, оставьте отзыв слева, если вам понравился этот блог, и следуйте за мной в Twitter!

Оцените статью
Procodings.ru
Добавить комментарий