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

      [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/POSTJson位置信息、经纬度IPv4/IPv6IPv6收费
高德GETJson位置信息、经纬度、运营商IPv4
IT小圈POSTJson位置信息、经纬度、运营商、鸡汤语句IPv4/IPv6网站所有权、邮箱地址验证

客户端信息实现

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


弹窗实现

  • 客户端信息展示

    • 这个不涉及隐私因为客户端访问你的站点,正常情况下请求头部都会携带客户信息:系统版本、浏览器版本、IP等信息;
  • IP定位实现

    • 根据客户端信息获取到访问的IP地址;
    • 向IP接口方查询位置信息,比如 IT小圈;
    • 根据返回的信息加上客户端信息展示到网页上即可;
      QQ拼音截图20230608163937.webp

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

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

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

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

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

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

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

还不快抢沙发

添加新评论

Myssl安全认证