给你的网站做个访问信息弹窗

爱技术的小黄鸭

发布于 2023-06-15 15:20:58

2680

发布于 2023-06-15 15:20:58

文章被收录于专栏：IT小圈IT小圈

www.alltoall.net_qq拼音截图20230320095234_aCNm9oZAWd.webp

如果您也想给您的网站做这样的效果，首先你需要解决的是IP定位问题。目前提供这样的接口有百度地图、高德地图，以及博主维护的 IT小圈IP接口。不管是百度地图还是高德地图，目前个人开发者都不支持IPv6查询，但IT小圈IP接口目前是支持的。如果想自己体验开发过程，可以尝试去申请百度或者高德的key，然后进行调用。当然也欢迎测试使用IT小圈接口。

IP定位实现

百度

IPv4

{
"address": "CN|云南省|昆明市|None|None|100|100",
"content": {
"address_detail": {
  "province": "云南省",
  "city": "昆明市",
  "district": "",
  "street": "",
  "street_number": "",
  "city_code": 104,
  "adcode": "530100"
},
"address": "云南省昆明市",
"point": {
  "x": "102.83299803",
  "y": "24.87998038"
}
},
"status": 0
}

高德

IPv4

{
"status": "1",
"info": "OK",
"infocode": "10000",
"country": "中国",
"province": "云南省",
"city": "昆明市",
"isp": "电信",
"location": "102.712251,25.040609",
"ip": "112.112.201.64"
}

IT小圈

IPv4

[[email protected]/* <![CDATA[ */!function(t,e,r,n,c,a,p,m,o){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',o=0,r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2){m=('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);if((a.length-n)<=6&&a.length>=128)o=(parseInt(m)<=191)?1:o*2;if(o>1)break;e+='%'+m;}p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */ getip]# bash getip_test.sh '112.112.201.64'
{
"Code": "Good",
"iptype": "IPv4",
"ip": "112.112.201.64",
"isp": "中国电信",
"ip_location": "中国云南省昆明市",
"lat": "102.712251,25.040609",
"data_src": "IT小圈API",
"jzstr": "生命的意义在于,人与人的相互照亮",
"Datatime": "2023-03-20 10:03:21"
}

IPv6

{
"Code": "Good",
"iptype": "IPv6",
"ip": "240e:450:740a:6b8b:3892:63e1:bb67:3f22",
"isp": "中国电信无线基站网络",
"ip_location": "中国广西区贵港市港北区",
"data_src": "IT小圈API",
"jzstr": "很幸运,你没有回头,我没有沦陷",
"Datatime": "2023-03-20 10:05:18"
}

IT小圈请求Json

参数说明：

dtime : 请求时间

ukey : 用户key，需要注册

ip : 查询的IP地址

md5 : dtime+ukey+ip 拼接后计算的MD5值（中间无拼接符）

{
"dtime": "2023-03-20 11:18:18",
"ukey": "ceec89e2e17df4786424fd2e2ff2789d0b15619912faf95b69ce32824426f06f",
"ip": "112.112.201.64",
"md5": "0546677beae3a65e792ae9a85a25049d"
}

差异对比

接口	请求方式	返回格式	返回数据项	是否注册	IP支持	备注
百度	GET/POST	Json	位置信息、经纬度	√	IPv4/IPv6	IPv6收费
高德	GET	Json	位置信息、经纬度、运营商	√	IPv4
IT小圈	POST	Json	位置信息、经纬度、运营商、鸡汤语句	√	IPv4/IPv6	网站所有权、邮箱地址验证

客户端信息实现

客户端信息需要用到第三方JS库，当然也可以自己从零开始写，我个人是比较偏向第三方库的，至少我调试时间会减少很多。 browser.js 是我目前在用的一个JS库，而且这个源代码是在GitHub上的开源，也可以根据自己的需求进行二开，具体用法请参考官方说明文档。

弹窗实现

客户端信息展示
- 这个不涉及隐私因为客户端访问你的站点，正常情况下请求头部都会携带客户信息：系统版本、浏览器版本、IP等信息；
IP定位实现
- 根据客户端信息获取到访问的IP地址；
- 向IP接口方查询位置信息，比如 IT小圈；
- 根据返回的信息加上客户端信息展示到网页上即可；
QQ拼音截图20230608163937.webp