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

  • A+
所属分类:系统文档

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

如果您也想给您的网站做这样的效果,首先你需要解决的是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] 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小圈;
    • 根据返回的信息加上客户端信息展示到网页上即可;
      给你的网站做个访问信息弹窗
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: