如何从网页获取用户IP、所在地信息、并按IP限制访问

想在网页上显示下用户的IP信息和地址信息，或限制下访问，指定IP用户可访问，又不想搞得太复杂，直接使用别人发明好的轮子，稍加利用下不失为一个好的办法。

1.获取用户IP和所在地信息：利用国外cloudflare的公开接口

国外的 CDN 加速服务商cloudflare，还是很有名气的，有一个获取用户信息的地址：https://www.cloudflare.com/cdn-cgi/trace 打开后的信息还是比较全的：

fl=23f420
h=www.cloudflare.com
ip=157.119.235.**
ts=1641553735.987
visit_scheme=https
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
colo=HKG
http=http/2
loc=HK
tls=TLSv1.3
sni=plaintext
warp=off
gateway=off

JS获取IP和地区信息：

    <span id="ipaddress"></span> <span id="local"></span> <!--输出位置-->

    <script type="text/javascript">
        //定义text
        text = (url) => {
            return fetch(url).then(res => res.text());
        }

        //从接口信息里提取所需数据
        text('https://www.cloudflare.com/cdn-cgi/trace').then(data => {  //获取信息到data

            let ipRegex = /[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}/  //IP规则
            let ip = data.match(ipRegex)[0]; //匹配出IP地址
            document.getElementById('ipaddress').innerHTML = `IP Address: ${ip} `; //输出IP到指定的ipaddress标签

            let localRegex = /loc=([A-Z]+)/ig;  //地区编码定位规则
            let local = data.match(localRegex)[0]; //匹配出loc=***
            let reg = /([A-Z]+)/ //地区编码值规则
            local.replace(reg, function () {
                // alert(arguments[1]);
                document.getElementById('local').innerHTML = `Local: ${arguments[1]} `; //输出地区编码到指定的ipaddress标签
            });           

        });

    </script>

2.获取用户IP和所在地信息：利用sohu的公开接口

在国内使用Sohu的接口，可以获取到IP和城市名字，地址：http://pv.sohu.com/cityjson?ie=utf-8 ，打开后的信息是这样：

var returnCitySN = {"cip": "111.59.248.**", "cid": "450000", "cname": "广西壮族自治区"};

JS获得IP地址和地区名：

    <span id="ipdizhi"></span> <span id="cityname"></span><!-- 输出位置 -->

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
    var cip = returnCitySN["cip"];  //获取IP
    var cityid = returnCitySN["cid"]; //获取城市ID
    var cityname = returnCitySN["cname"]; //获取城市名
    document.getElementById('ipdizhi').innerHTML = `IP地址: ${cip} `; //输出IP到指定的ipdizhi标签
    document.getElementById('cityname').innerHTML = `地址: ${cityname} `; //输出城市名到指定的cityname标签
</script>

3.设置IP禁止，指定访问IP

简单的IP限制，还是利用Sohu那个公开的地址，获取用户IP，看这个IP看不在允许规则里，来实现访问限制。在页面上添加以下代码：

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script>
        var ip = returnCitySN["cip"]; //获取用户IP
        var allowIP = ['111.***.***.4','121.***.***.5', '131.***.***.6', '141.***.***.7']; //列出可以访问的
        var flag = false;

        console.log(ip)
        for(var i=0; i<allowIP.length; i++){
            if (ip == allowIP[i]){
                flag = true;
                break;
            }
        }
        if(!flag){
            alert("Sorry, you are not allowed to access this page!"); //提示语
            closewin();
        }

        //设置提示框    
        function closewin(){
            if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") !=-1) {
                window.location.href="about:blank";
                window.close();
            } else {
                window.opener = null;
                window.open("", "_self");
                window.close();
            }
        }

    </script>