Пару месяцев назад для 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!