我是如何获取到前端用户的IP,并根据IP来获取地理定位的
大家好,我是冰茶,容我开场先讲个故事。
故事的经过是这样的:
有一天,产品同学突发奇想,他想获取到下单用户的地理位置分布,以便来统计用户群的分布,进而为后期的按地区精确推广活动来做准备。
- me:这个简单啊,下单的时候,给个地理定位的请求,来获取用户所在位置就行啊,这样的话还准确......
- 产品兄:这个方案需要考虑下,如果要是请求用户的定位信息,首先呢,可能会引起用户的反感,毕竟咱们这个产品,从头到尾都没有用到过定位,突然啪的一下来个弹窗,用户肯定一是蒙逼,说你从头到尾都没有定位功能,要个定位权限有毛用,二是隐私意识强点,就直接拒绝掉了,这样直接就拿不到信息,无法达到预设的效果了。其次呢,咱们能少打扰用户,就少打扰用户,有句话说,悄悄地进村,打枪的不要。就是说呢,让用户流畅的使用下来整个流程,让用户用的爽,一直是咱们的原则......
- 产品兄:我听说有个IP定位,这东西蛮爽的,也不打扰用户,再说IP这个东西,只要用户访问我们的服务,绝对有这个东西能拿到,我们就拿他这个东西来反查下,这样咱们要的省市信息就这样到手了,而且这样的成功几率高,不用担心用户拒绝定位导致数据统计不全......
- 后端同学:IP这个东西的确可以,但是呢,我们的服务都在负载均衡/反向代理服务后面,后端直接拿到的IP也是前端服务器的IP,而不是用户直连我们前端服务器的IP,所以这个东西难办啊~
- 后端同学:想当初我们的项目还不是前后端分离的时候,的确是可以直接拿到IP的......
- 另外的前端同学:嗯,我这边也了解一些,我之前看到有前端获取IP的方法:
//创建RTCPeerConnection接口 let conn = new RTCPeerConnection({ iceServers: [] }) let noop = function(){} conn.onicecandidate = function(ice){ if (ice.candidate){ //使用正则获取ip let ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/ let ip_addr = ip_regex.exec(ice.candidate.candidate)[1]; console.log(ip_addr) conn.onicecandidate = noop } } //随便创建一个叫狗的通道(channel) conn.createDataChannel('dog') //创建一个SDP协议请求 conn.createOffer(conn.setLocalDescription.bind(conn),noop) 作者:Illgo 链接:https://www.zhihu.com/question/20675353/answer/335325619 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
之后用 WebRTC获取IP
等关键词找了几篇类似的文章。这个比较全面。
根据类似的文章,亲自试验了下,有两个问题:
- 我们有微信站的业务,在微信环境下获取不到IP。这个方法在Chrome和Firefox下面很好用。
- 获取的是用户的内网IP,用拿到的IP去反查,得到的结论是局域网地址。
这还查个毛线的查,于是......这个方案被放弃了......
- me:在Google找了一些方案,大多数方案都是通过前端调取一个接口,接口返回地理定位等信息。和后端同学说的一致,只要用户发请求,服务器能直接拿到用户网络出口的IP信息,然后咱们就调接口查一下就可以了。关于后端接口拿不到IP的问题,微信支付这边有类似的解决方案。
备注:获取用户IP指引
- me:咱们服务器相当于在代理后面,只要找运维去配置下,应该就可以了。
- 后端同学:这个可以考虑,稍后我这边和运维联系下,让他们那边配置下,把用户请求代理服务器获取到的IP传递给我这边,这样就可以了。
于是问题解决,大功告成~
开玩笑,要真是这样的话,这篇文章就不会出现了
相关推荐
liduote 2020-11-13
chenhaotao 2020-11-13
localhost0 2020-11-12
小秋 2020-11-12
lxhuang 2020-11-03
学习web前端 2020-10-27
小焊猪web前端 2020-10-24
杏仁技术站 2020-10-23
南昌千网科技 2020-10-18
liduote 2020-10-16
BlueSkyUSC 2020-10-15
Doniet 2020-10-08
zjutzmh 2020-09-25
PncLogon 2020-09-24
趣IT 2020-09-22
杏仁技术站 2020-09-18
拾光璇旅 2020-09-17
kiven 2020-09-11
lfbooo 2020-09-09