VisitorAPI를 사용하여 React에서 사용자 위치 및 자동 채우기 양식을 감지하는 방법

거의 모든 주소 양식에서 사용자는 긴 국가 목록에서 국가를 선택해야 합니다. 이상적인 사용자 경험은 IP 주소를 기반으로 사용자의 위치를 ​​감지하고 도시, 주 및 국가 필드를 자동으로 채우는 것입니다. 그러나 이것은 JavaScript가 브라우저에서 IP 주소를 얻을 수 없기 때문에 Reactjs에게는 어려운 일입니다. 이 문제를 해결하려면 서버측 API의 약간의 도움이 필요합니다 - VisitorAPI .

방문자 API 설치

npm을 사용하여 VisitorAPI를 설치할 수 있습니다.

npm install visitorapi        

VisitorAPI를 호출하여 위치 상태 자동 채우기

위치 변수를 저장하기 위해 양식 필드의 상위 구성 요소에 국가, 주 및 도시와 같은 상태가 있다고 가정합니다.

const [country, setCountry] = useState("");
const [state, setState] = useState("");
const [city, setCity] = useState("");

이제 useEffect 함수에서 VisitorAPI를 호출하여 사용자의 IP 주소를 기반으로 변수를 설정할 수 있습니다. 그러면 React 구성 요소가 로드될 때 사용자의 위치, 통화, 언어 및 장치 정보를 검색하기 위해 API를 호출합니다.

const VisitorAPI = require("visitorapi");

const [country, setCountry] = useState("");
const [state, setState] = useState("");
const [city, setCity] = useState("");

useEffect(() => {
  VisitorAPI(
    "<project id>",
    data => {
      setCountry(data.countryCode);
      setState(data.region);
      setCity(data.city);
    }
  );
},[]);

예제 코드에서 <project id>를 대체할 프로젝트 ID를 얻으려면 VisitorAPI에서 무료 프로젝트를 생성해야 합니다.

VisitorAPI 인증 도메인 목록에 도메인을 추가하는 것을 잊지 마세요. 그렇지 않으면 API가 403 오류를 반환합니다. API는 프런트엔드에서 사용하도록 설계되었기 때문에 API 키나 토큰이 없습니다. 리퍼러 도메인을 사용하여 API 호출을 승인합니다.

API 반환 데이터

API는 사용자의 위치 데이터 이상을 반환합니다. 다음은 반환된 JSON의 모든 속성 이름과 해당 설명 목록입니다.


JSON 경로
설명


IP 주소
방문자의 IP 주소입니다.

국가 코드
ISO 3166-1 alpha-2 국가 코드로 방문자가 위치한 국가.

나라 이름
방문자가 위치한 국가의 전체 이름입니다.

통화
방문자가 위치한 국가의 공식 통화 배열입니다.

언어
방문자가 위치한 국가의 공식 언어 배열입니다.

지역
방문자가 있는 지역, 주 또는 지방의 이름입니다. 유효한 지역 값의 전체 목록은 ISO-3166-2 표준에서 찾을 수 있습니다.

도시
방문자가 위치한 도시의 이름입니다.

도시위도경
방문자가 위치한 도시의 위도와 경도.

브라우저
방문자가 사용하는 브라우저 이름입니다.

브라우저 버전
방문자가 사용하는 브라우저 버전입니다.

장치 브랜드
방문자가 사용하는 장치의 브랜드입니다. 모바일 장치에만 적용됩니다.

deviceModel
방문자가 사용하는 장치의 모델입니다. 모바일 장치에만 적용됩니다.

deviceFamily
방문자가 사용하는 장치의 제품군입니다. 모바일 장치에만 적용됩니다.

OS
방문자가 사용하는 장치의 운영 체제 이름입니다.

osVersion
방문자가 사용하는 장치의 운영 체제 버전입니다.