前端如何获取电脑唯一编码

在前端开发中，出于安全和隐私的考虑，浏览器不允许直接获取硬件的唯一标识（如 MAC 地址、CPU 序列号等）。但可以通过以下方法生成设备指纹（Device Fingerprint），近似实现设备唯一标识：

---

1. 组合浏览器特性生成指纹

通过收集浏览器和系统的多种信息，生成唯一性较高的字符串：

const fingerprint = {userAgent: navigator.userAgent,language: navigator.language,screen: {width: screen.width,height: screen.height,colorDepth: screen.colorDepth,},timezone: new Date().getTimezoneOffset(),plugins: Array.from(navigator.plugins).map(p => p.name).join(','),webglVendor: (() => {const canvas = document.createElement('canvas');const gl = canvas.getContext('webgl');return gl?.getParameter(gl.VENDOR);})(),fonts: (() => {const fonts = [];const testString = "abcdefghijklmnopqrstuvwxyz";const testFont = "Comic Sans MS";const ctx = document.createElement('canvas').getContext('2d');ctx.font = '72px monospace';const defaultWidth = ctx.measureText(testString).width;ctx.font = `72px ${testFont}, monospace`;if (ctx.measureText(testString).width !== defaultWidth) {fonts.push(testFont);}return fonts;})(),
};// 生成哈希（例如使用 SHA-256）
const hash = async (data) => {const encoder = new TextEncoder();const hashBuffer = await crypto.subtle.digest('SHA-256', encoder.encode(JSON.stringify(data)));return Array.from(new Uint8Array(hashBuffer)).map(b => b.toString(16).padStart(2, '0')).join('');
};hash(fingerprint).then(console.log); // 输出设备指纹

---

2. 使用第三方库

一些开源库（如 FingerprintJS）封装了更复杂的指纹生成逻辑：

# 安装 FingerprintJS
npm install @fingerprintjs/fingerprintjs

import FingerprintJS from '@fingerprintjs/fingerprintjs';(async () => {const fp = await FingerprintJS.load();const result = await fp.get();console.log(result.visitorId); // 生成的设备指纹
})();

---

3. Canvas 指纹

通过 Canvas 渲染的微小差异生成唯一标识：

function getCanvasFingerprint() {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');ctx.textBaseline = 'top';ctx.font = '14px Arial';ctx.fillStyle = '#f60';ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = '#069';ctx.fillText('Hello, Fingerprint', 2, 15);return canvas.toDataURL();
}

---

4. WebRTC 泄露本地 IP

（注意：部分浏览器已限制此行为）

const getLocalIP = (callback) => {const pc = new RTCPeerConnection({ iceServers: [] });pc.createDataChannel('');pc.createOffer().then(offer => pc.setLocalDescription(offer));pc.onicecandidate = (ice) => {if (ice.candidate?.candidate?.match(/(\d+\.\d+\.\d+\.\d+)/)) {callback(RegExp.$1);}};
};getLocalIP(ip => console.log('Local IP:', ip));

---

注意事项：

1. 隐私合规：收集设备信息需遵循 GDPR、CCPA 等隐私法规，明确告知用户并获取同意。
2. 不可靠性：设备指纹可能因浏览器设置、系统更新或用户行为（如隐私模式）而变化。
3. 结合后端：可结合 IP、登录会话或 Cookie 增强识别稳定性。

---

替代方案

• 持久化存储：使用 localStorage 或 IndexedDB 存储生成的 UUID。
• 用户登录系统：通过账号体系追踪用户而非设备。

如果需要真正的硬件级唯一标识，通常需通过原生应用（如 Electron、React Native）或与后端配合实现。