브라우저에서 JavaScript를 사용하여 사용자 IP 주소, 위치 및 장치 정보를 얻는 방법

JavaScript는 브라우저에서 실행할 때 사용자 IP 주소를 얻을 수 없습니다. 그러나 서버 측 API 호출을 사용하면 가능합니다. VisitorAPI 이라는 API 서비스를 사용하면 단 몇 줄의 JavaScript로 이를 실현할 수 있습니다.

VisitorAPI는 REST API 호출을 통해 사용자의 IP 주소, 위치, 통화, 언어 및 장치 정보를 반환합니다. 다음 코드는 API를 로드합니다.

var VisitorAPI=function(t,e,a){var s=new XMLHttpRequest;s.onreadystatechange=function(){var t;s.readyState===XMLHttpRequest.DONE&&(200===(t=JSON.parse(s.responseText)).status?e(t.data):a(t.status,t.result))},s.open("GET","https://visitorapi-dev.uc.r.appspot.com/api/?pid="+t),s.send(null)};

API가 로드되면 다음 구문을 사용하여 API를 호출할 수 있습니다.

new VisitorAPI(projectID, successHandler, errorHandler);

API 호출에는 3개의 매개변수가 있습니다.

projectID: VisitorAPI UI에서 무료로 생성할 수 있는 VisitorAPI 프로젝트의 고유 식별자입니다.

successHandler: API 호출 성공 시 방문자 데이터를 처리하는 기능입니다. 여기에서 응답 데이터 형식을 참조하십시오.

errorHandler: API 호출이 오류를 반환할 때 오류 코드 및 오류 메시지를 처리하는 기능입니다. 이 함수는 오류 코드와 오류 메시지라는 두 가지 매개변수를 가질 수 있습니다.

다음은 브라우저 콘솔에서 사용자 데이터를 인쇄하는 예입니다.

VisitorAPI(
    "om61tWZOjuBBPxTdDlpy",
    function(data){console.log(data)},
    function(errorCode, errorMessage){console.log(errorCode, errorMessage)}
);

현재 사용자의 실제 IP 주소 및 장치 데이터를 기반으로 아래 예와 유사한 JSON 개체를 인쇄합니다.

{
    "ipAddress":"118.211.184.103",
    "countryCode":"AU",
    "countryName":"Australia",
    "currencies":["AUD"],
    "languages":["eng"],
    "region":"nsw",
    "city":"sydney",
    "cityLatLong":"-33.868820,151.209295",
    "browser":"Chrome Mobile iOS",
    "browserVersion":"100",
    "deviceBrand":"Apple",
    "deviceModel":"iPad",
    "deviceFamily":"iPad",
    "os":"iOS",
    "osVersion":"15"
}

VisitorAPI은 API 호출을 인증하는 데 API 키를 사용하지 않는다는 점에 유의해야 합니다. 모든 API 키가 공개적으로 노출되어 키의 목적을 무효화하기 때문입니다. 대신 API 엔드포인트를 호출할 수 있는 승인된 도메인 목록을 입력할 수 있으므로 다른 사람이 API 엔드포인트를 호출하고 API 할당량을 사용할 수 없습니다.