JS (webRTC) / Vue (Nuxt & Node) 获取用户本机 IP

获取用户本机 IP,偶尔前端小伙伴会遇到这样奇(e)葩(xin)的需求,当然是极其偶尔。

第一种:JS 通过 webRTC 获取

这就是网上大多数的解法:

function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
    //compatibility for firefox and chrome
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({
        iceServers: []
    }),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    }

     //create a bogus data channel
    pc.createDataChannel("");

    // create offer and set local description
    pc.createOffer().then(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });
        
        pc.setLocalDescription(sdp, noop, noop);
    }).catch(function(reason) {
        // An error occurred, so handle the failure to connect
    });

    //listen for candidate events
    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

// Usage

getUserIP(function(ip){
    alert("Got IP! :" + ip);
});

当我兴(hao)高(wu)采(biao)烈(qing)的粘过来使用后发现在 Chrome 中真的好用诶。
但是一拿到 FireFox 下,没错,他没获取到。

于是一番苦找,终于发现 Chrome 下的 iceice.candidate.candidate ,就是下面这段代码:

//listen for candidate events
pc.onicecandidate = function(ice) {
	console.log(ice)
    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
    ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};

Chrome 中的输出 确实携带了 IP,但 FireFox 相对应的位置却是 localhost

后来查了下原因,原来 FireFox 原来也是能获取的,但是后来因为这会泄露用户的隐私,所以后来隐藏掉了 IP。

So,只需兼容 Chrome 的小伙伴还可以用这种方法。

第二种:Vue Nuxt 下通过 Node 获取并保存到客户端

第一种方法无果,我只能寻找他法

无意中发现 Node 可以获取用户本机 IP,而我正好使用的是 Vue SSR 框架 Nuxt。

nuxt 中可在 nuxt.config.js 中调用

// nuxt.config.js 最上面获取下 IP
function getIPAddress() {
  const interfaces = require('os').networkInterfaces()
  for (let devName in interfaces) {
    const iface = interfaces[devName]
    for (let i = 0; i < iface.length; i++) {
      const alias = iface[i]
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address
      }
    }
  }
}
const ipAddress = getIPAddress()

// nuxt.config.js 中多配置(传入客户端)
env: {
    NODE_ENV: process.env.NODE_ENV,
    IP: ipAddress
},

// 页面中使用
process.env.IP

码字不易,觉得有帮助的小伙伴右上角点个赞鼓励下~

在这里插入图片描述

扫描上方二维码关注我的订阅号~

你可能感兴趣的:(js,vue)