JQuery

 

1  .  [jQuery]jQuery를 이용한 접속 국가 ip 체크

 

간혹, 글로벌 기업의 웹사이트를 관리하다보면

국가별로 언어 설정을 해서 해당 국가의 언어로 번역된 페이지에 이동을 해야할 때가 있습니다.

jQuery를 이용해서 접속 국가의 ip 정보를 확인해보겠습니다.

 

일단은, <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 를 html 소스의 <head></head> 태그 사이에 넣어서

import 합니다. (jQuery 를 사용 시에 필요한 라이브러리)

 

lang.html (View 페이지)

 

<!DOCTYPE html>
<html>
<head>
    <title>LANGUAGE TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lang.js"></script>
</head>
<body>
    <div id="kr" style="display: none;">대한민국 ip로 접속 하셨습니다.</div>
    <div id="us" style="display: none;">미국 ip로 접속 하셨습니다.</div>
    <div id="cn" style="display: none;">중국 ip로 접속 하셨습니다.</div>
    <div id="jp" style="display: none;">일본 ip로 접속 하셨습니다.</div>
</body>
</html>

 

 

div 태그에 display: none 속성을 주어 일단은 전부 안보이게끔 해놨습니다.

 

 lang.js

var ip = "";
    var hostname = "";
    var city = "";
    var region = "";
    var country = "";
    var loc = "";
    var org = "";
 
    $.getJSON("http://ipinfo.io", function(data) {
        ip = data.ip // 접속자 ip
        hostname = data.hostname // 접속자 hostname
        city = data.city // 접속자 도시
        region = data.region // 접속자 지역
        country = data.country // 접속자 국가
        loc = data.loc // 접속 위도, 경도
        org = data.org // ISP (인터넷 서비스 제공사업자)
 
        if(country == "KR"){
            console.log(data);
            $("#kr").show();
        }else if(country == "US"){
            console.log(data);
            $("#us").show();
        }else if(country == "CN"){
            console.log(data);
            $("#cn").show();
        }else if(country == "JP"){
            console.log(data);
            $("#jp").show();
        }
    });

 

9번 라인을 보시면 jQuery를 통해 JSON 형식으로 데이터를 받아옵니다. (ipinfo.io 라는 사이트 이용)

그 중에서, ip, hostname, city, region, country, loc, org 에 대한 정보를 따로따로 불러낼 수 있습니다.

 

가장 중요한 것은 접속자의 국가를 받아오는 'country' 인데

data.country로 데이터를 받아오면 해당 국가 코드(ex. 대한민국 - KR, 미국 - US 등)가 나옵니다. 

(국가 코드 명부 사이트 - https://ko.ipshu.com/country_code_list)

 

국가 코드를 변수에 넣고 if로 분기시켜서 처리할 내용을 코딩하시면 됩니다.

 

위의 소스는 국가가 KR(대한민국)일 경우 'kr' 이라고 되어있는 id 속성을 .show() 보여주는 로직으로 구성되어 있습니다.

그리고 console.log로 찍어본 데이터를 크롬의 개발자 도구를 이용해 확인해보면

 

 

ㅇㅇㅇ

 

 

접속자에 대한 ip 정보를 JSON형식으로 모두 다 불러오고 있습니다.

제 ip 정보를 보니 Korea Telecom(KT)라는 ISP(인터넷 서비스 제공사업자) 에서 인터넷을 받아오기 때문에 KT의 정보가 불러와집니다.

 

그리고 실행결과입니다.

 

 

 

이를 통해, ip로 접속 국가별로 해당 언어 페이지를 보여줄 뿐만아니라, 해당 국가의 접속을 차단할 수 있습니다.

 

자세한 내용은 https://ipinfo.io/developers 에서 확인해주시면 되겠습니다.

 

https://goodlife-coding.tistory.com/entry/jQueryjQuery를-이용한-접속-국가-ip-체크

 

 

 

 ipinfodb API 사용

http://www.ipinfodb.com/

 

1.가입.

2.  api_key 로 바로 사용.

 

javascript 예

function geolocate(ip,type,cityPrecision){
  var key = '발급받은키';
  var api = (cityPrecision) ? "ip-city" : "ip-country";
  var domain = 'api.ipinfodb.com';
  var version = 'v3';
  var url = "http://" + domain + "/" + version + "/" + api + "/?key=" + key + "&ip=" + ip + "&format=" + type + "&callback=?";
   
  $.getJSON(url, function(data){
  alert(data.countryCode);
  })
}
 
geolocate("체크할ip","json",false); //체크할아이피,타입(json,xml등),true:도시별 false:국가별

 

http://www.songtory.com/post/001006/1/92

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

아이들을 가르친다는 것은 어떠한 것인가. 그것은 백지에 무엇을 그리는 것과 같은 것이다. 노인에게 가르친다는 것은 어떠한 것과 같은 것일까. 이미 많이 씌어진 종이에 여백을 찾아서 써넣으려고 하는 것과 같은 것이다. -탈무드

댓글 ( 5)

댓글 남기기

작성

JQuery 목록    more