JavaScript: Как с помощью Dadata определить город по IP?

На работе потребовалось запилить задачу для автоматического определения города при совершении заказа. Было решено сделать это на фронте, ибо бек был занят.

Как известно, фронт не умеет определять IP и город. В первом случае, он без бека не сможет получить IP, во втором случае, ему нужно запрашивать разрешение на определение геолокации юзера, где всплывает бесящее окно с просьбой дать разрешение.

Метод костыльный, но рабочий (на 80%). Почему 80%? Дело в том, что точно определить город юзера практически невозможно и сервисы могут ошибаться. Например, я живу в г. Назрань, а мне выдает г. Сунжа (~30 км. от моего города).

# Получение города и IP

Для того, чтобы определить город юзера, нужно определить его IP. Определить IP не сложно, есть множество бесплатных сервисов, например ipify.org. Также, нужно получить API-ключ от сервиса Dadata, чтобы работать с их API. После регистрации (там есть бесплатная), вы получите ключ. Пихните его в код ниже.

Можно также не передавать параметр ip и не отправлять лишний запрос для получения IP адреса.

function getUserCity() {
  return new Promise((resolve, reject) => {
    fetch('https://api.ipify.org?format=json')
      .then(res => res.json())
      .then(({ ip }) => {
        fetch(
          `https://suggestions.dadata.ru/suggestions/api/4_1/rs/iplocate/address?ip=${ip}&token=ВАШ_ТОКЕН_ДАДАТА`
        )
          .then(res => res.json())
          .then(json => {
            if (
              {}.hasOwnProperty.call(json, 'family') &&
              json.family.toLowerCase().indexOf('err')
            ) {
              return reject(json);
            }
            const {
              location: {
                data: { city },
              },
            } = json;
            resolve({ city, ip });
          });
      });
  });
}

getUserCity()
  .then(({ city, ip }) => {
    console.log(city, ip);
  })
  .catch(err => {
    console.log(err);
  });

Функция getUserCity возвращает объект с city и ip. Далее, вместо console.log, вы можете вставить эти данные, куда вам нужно. В итоге получаем: