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

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


IP定位实现

{
  "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
}
{
  "status": "1",
  "info": "OK",
  "infocode": "10000",
  "country": "中国",
  "province": "云南省",
  "city": "昆明市",
  "isp": "电信",
  "location": "102.712251,25.040609",
  "ip": "112.112.201.64"
}
[root@VM-0-8-centos 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

「 希望熬过一切,星光璀璨 」

流年小站,感谢有您的支持

「 道路坎坷,感谢有您 ---来自 anYun 的感谢 」

使用微信扫描二维码完成支付

2023-06-09
已阅:20068 人/次

 
 
 
分享是一种美德 x
打开微信,右上角的"+"选择"扫一扫"
使用“扫一扫”将博文分享至朋友圈吧

本文由 anYun 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3oibnoh9lo6cs

还不快抢沙发

添加新评论

Myssl安全认证