Как получить местоположение пользователя в React.js: практическое руководство

ПРИМЕЧАНИЕ. Вы не сможете снова запросить разрешение на определение местоположения, если пользователь уже отклонил разрешение на определение местоположения, если пользователь не разрешит его вручную в своем браузере.

Давайте используем 3 условия для всех 3 состояний разрешений следующим образом

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.permissions
        .query({ name: "geolocation" })
        .then(function (result) {
          console.log(result);
          if (result.state === "granted") {
            //If granted then you can directly call your function here
          } else if (result.state === "prompt") {
            //If prompt then the user will be asked to give permission
          } else if (result.state === "denied") {
            //If denied then you have to show instructions to enable location
          }
        });
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  }, []);

В состоянии prompt воспользуемся функцией getCurrentPosition. Эта функция принимает следующие аргументы.

* успех: функция обратного вызова, которая будет вызвана, если местоположение будет успешно получено. * ошибка: функция обратного вызова, которая будет вызываться в случае ошибки при получении местоположения. Это необязательно. * options: опции принимают разные параметры, такие как maxAge, timeout, enableHighAccuracy и т. д. Подробнее об этих опциях можно прочитать на странице документация MDN. Это также необязательно.

Давайте реализуем все 3 аргумента. Сначала давайте создадим функцию success. Перед useEffect добавьте следующую функцию успеха.

  function success(pos) {
    var crd = pos.coords;
    console.log("Your current position is:");
    console.log(`Latitude : ${crd.latitude}`);
    console.log(`Longitude: ${crd.longitude}`);
    console.log(`More or less ${crd.accuracy} meters.`);
  }

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

 function errors(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

Давайте также объявим объект option,

  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };

Теперь вставьте следующую строку в условия "prompt" и "granted" и проверьте вывод в браузере.

navigator.geolocation.getCurrentPosition(success, errors, options)

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

import { useEffect } from "react";
import "./App.css";

function App() {
  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };
  function success(pos) {
    var crd = pos.coords;
    console.log("Your current position is:");
    console.log(`Latitude : ${crd.latitude}`);
    console.log(`Longitude: ${crd.longitude}`);
    console.log(`More or less ${crd.accuracy} meters.`);
  }

  function errors(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.permissions
        .query({ name: "geolocation" })
        .then(function (result) {
          console.log(result);
          if (result.state === "granted") {
            //If granted then you can directly call your function here
            navigator.geolocation.getCurrentPosition(success, errors, options);
          } else if (result.state === "prompt") {
            //If prompt then the user will be asked to give permission
            navigator.geolocation.getCurrentPosition(success, errors, options);
          } else if (result.state === "denied") {
            //If denied then you have to show instructions to enable location
          }
        });
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  }, []);

  return <div className="App"></div>;
}

export default App;

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

Улучшение геолокационных сервисов с обратным геокодированием

Мы уже получили информацию о широте и долготе устройства пользователя, теперь давайте посмотрим, как мы можем использовать ее, чтобы получить больше информации о его местонахождении. Мы будем использовать API из opencage, чтобы получить больше информации о местоположении. Итак, убедитесь, что вы зарегистрировались и получили ключ API. Вам не нужно ни за что платить, так как opencage предоставляет 2500 запросов в день в рамках бесплатной пробной версии. Вы можете получить дополнительную информацию о ценах на их веб-сайте. Я использовал API Opencage, так как у них есть бесплатная пробная версия и нет ограничений CORS. Теперь давайте создадим функцию для использования этого API.

  const [location, setLocation] = useState();

  function getLocationInfo(latitude, longitude) {
    const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`;
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        if (data.status.code === 200) {
          console.log("results:", data.results);
          setLocation(data.results[0].formatted);
        } else {
          console.log("Reverse geolocation request failed.");
        }
      })
      .catch((error) => console.error(error));
  }

Эта функция getLocationInfo принимает широту и долготу, а затем использует URL-адрес из документации opencage, которая принимает широту, долготу и API-ключ. В этой функции мы использовали выборку для получения данных из URL-адреса, и если код состояния равен 200, мы будем хранить данные в состоянии местоположение. Вы можете проверить свою консоль в браузере, чтобы увидеть, какой тип данных вы получаете. Сейчас мы используем значение из свойства formatted. Чтобы получить дополнительные сведения об объекте ответа, см. документацию. Теперь давайте вызовем эту функцию из функции success, которую мы уже определили.

  function success(pos) {
    var crd = pos.coords;
    ...
    ...
    getLocationInfo(crd.latitude, crd.longitude);
  }

Теперь всякий раз, когда пользователь соглашается указать свое местоположение, будет запущена функция success, а также она передаст информацию о широте и долготе в функцию getLocationInfo и выполнит ее. Это состояние местоположения можно использовать для отображения местоположения в веб-приложении.

Вот полный код:

import { useEffect, useState } from "react";
import "./App.css";

const APIkey = "Enter-your-api-key";

function App() {
  const [location, setLocation] = useState();

  function getLocationInfo(latitude, longitude) {
    const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`;
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        if (data.status.code === 200) {
          console.log("results:", data.results);
          setLocation(data.results[0].formatted);
        } else {
          console.log("Reverse geolocation request failed.");
        }
      })
      .catch((error) => console.error(error));
  }
  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };
  function success(pos) {
    var crd = pos.coords;
    console.log("Your current position is:");
    console.log(`Latitude : ${crd.latitude}`);
    console.log(`Longitude: ${crd.longitude}`);
    console.log(`More or less ${crd.accuracy} meters.`);

    getLocationInfo(crd.latitude, crd.longitude);
  }

  function errors(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.permissions
        .query({ name: "geolocation" })
        .then(function (result) {
          console.log(result);
          if (result.state === "granted") {
            //If granted then you can directly call your function here
            navigator.geolocation.getCurrentPosition(success, errors, options);
          } else if (result.state === "prompt") {
            //If prompt then the user will be asked to give permission
            navigator.geolocation.getCurrentPosition(success, errors, options);
          } else if (result.state === "denied") {
            //If denied then you have to show instructions to enable location
          }
        });
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  }, []);

  return (
    <div className="App">
      {location ? <>Your location: {location}</> : null}
    </div>
  );
}

export default App;

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

Получение IP-адреса пользователя

Чтобы получить IP-адрес пользователя на стороне клиента, мы будем использовать ipify, который представляет собой простой API общедоступного IP-адреса. Мы создадим еще один useEffect и создадим функцию для получения IP-адреса, как показано в следующем блоке кода.

  const [ipAddress, setIpAddress] = useState('');

  useEffect(() => {
    const fetchIp = async () => {
      try {
        const response = await fetch('https://api.ipify.org?format=json');
        const data = await response.json();
        setIpAddress(data.ip);
      } catch (error) {
        console.error(error);
      }
    };
    fetchIp();
  }, []);

В приведенном выше коде мы создали одно состояние с именем ipAddress для хранения IP-адреса. ipfy — это общедоступный API, поэтому нам не нужен ключ API, и мы можем напрямую использовать URL-адрес. В useEffect мы создали одну асинхронную функцию с именем fetchIp, которая будет извлекать и сохранять IP-адрес в состоянии ipAddress. Не забудьте вызвать функцию fetchIp в useEffect.

Вот как вы можете легко получить IP-адрес устройства. Есть несколько API, которые предоставляют такие услуги. На стороне сервера вы обычно можете получить IP-адрес из запроса, который пользователь отправил вам для получения веб-страницы или любых данных. Однако не следует полагаться исключительно на IP-адрес, поскольку некоторые интернет-провайдеры используют общие IP-адреса, что означает, что несколько пользователей могут иметь один и тот же IP-адрес. Кроме того, некоторые пользователи также используют VPN и прокси-серверы.

Рекомендации по сбору и обработке данных о местоположении пользователей

Что касается данных пользователя, то они всегда являются важной частью любого приложения. Наша работа как разработчика — создать приложение, ориентированное на пользователя и защищающее данные пользователей. Для данных, таких как местоположение устройства, разработчик может столкнуться со многими проблемами, такими как,

* Насколько точны данные IP или геолокации? * Что делать, если пользователь не дает согласия на использование своего местоположения? * Как безопасно обращаться с данными и защищать их?

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

* Точность: при использовании IP-адреса вы должны дважды проверить его, используя более одного API, и перепроверить местоположение. Вы должны включить резервный механизм в службы и функции, основанные на местоположении. Лучше проверить данные, так как на данные о местоположении могут повлиять такие факторы, как настройки устройства, сетевые подключения и т. д.

* Конфиденциальность: это основная проблема при сборе данных любого пользователя, поскольку вам необходимо соблюдать различные законы разных стран. Разработчики всегда должны уважать конфиденциальность пользователя. Необходимо иметь четкую и краткую политику конфиденциальности, когда речь идет о сборе любых данных от пользователя. Вы должны сообщать пользователю всякий раз, когда вы собираете какую-либо конфиденциальную информацию. Если есть какие-либо функции, основанные на местоположении, вы должны четко показать, почему и как вы собираетесь использовать данные. Кроме того, вы должны предоставить пользователю возможность отказа, чтобы, если он не хочет делиться своими данными, он мог легко отказаться.

* Безопасность: для безопасности данных вы можете реализовать механизмы аутентификации, такие как OAuth или JWT, и защитить конечные точки API от любого несанкционированного доступа. Вы всегда должны предлагать пользователю использовать надежные пароли, обновлять браузеры и т. д. Вы должны шифровать данные с помощью сертификатов HTTPS и SSL, чтобы обеспечить безопасную связь между клиентом и сервером. В серверной части вы можете реализовать управление доступом на основе ролей, чтобы только выбранный пользователь, например, только администраторы, мог получить доступ к данным. Перед обновлением какой-либо зависимости вы всегда должны проверять, получена ли она из официального источника или нет.

## Заключение

Данные о местоположении играют важную роль, когда речь идет о персонализированном опыте пользователей, однако обработка этих данных также является важной задачей. Существует множество различных методов, которые вы можете использовать для получения данных о местоположении, но это зависит от того, сколько данных вам потребуется, если вам нужен только IP-адрес, вы можете использовать ipify API, и если вам нужно больше данных о геолокации, вы можете использовать либо opencage, либо API обратного геокодирования Google. Если вы создаете небольшие приложения, такие как приложения погоды, вам не нужно использовать какие-либо API, поскольку вы можете использовать API геолокации браузера. Когда дело доходит до безопасности и конфиденциальности этих данных, вы должны избегать любых потенциальных рисков, связанных с конфиденциальностью пользователя, предоставив хорошо написанную политику конфиденциальности. Это конец этой статьи, надеюсь, она вам понравится.

* Зайдите на мой веб-сайт под названием DevDreamning. * Мой канал на ютубе👇😉

https://youtube.com/codebucks?embedable=true