제이쿼리로 접속 국가 ip 체크

[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 페이지)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
Colored by Color Scripter
cs

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

lang.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    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();
        }
    });
Colored by Color Scripter
cs

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 에서 확인해주시면 되겠습니다.

원문 출처 : http://goodlife-coding.tistory.com/entry/jQueryjQuery%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%A0%91%EC%86%8D-%EA%B5%AD%EA%B0%80-ip-%EC%B2%B4%ED%81%AC

저작자표시

'[ Web 관련 ] > jQuery' 카테고리의 다른 글

readonly, disabled (0)	2018.11.16
제이쿼리 차트(Chart) 라이브러리 링크 (0)	2018.09.19
특정 레이어 보이기, 안보이기 간단하게 (0)	2018.09.14
제이쿼리 CDN, 제이쿼리 최신 버전 CDN (0)	2018.09.13
radio 라디오 버튼의 체크 유무 및 체크된 값을 검사 (0)	2018.08.24

만들고, 퍼오고, 공유하고