原文：
1、设备指纹技术方案
2、Fingerprintjs2 实现浏览器指纹采集器 获取用户唯一标识码

需求

最主要的需求就是判断本次请求的用户到底是新用户还是老用户还是机器人。通过request去分析ip、ua、mac地址都有各种缺点导致不准确。
Fingerprintjs2 是通过纯前端原生js实现的浏览器指纹采集器，通过获取浏览器中所有能获取到的信息(部分通过base64转成String)，最后生成出md5，用于该用户在该设备上的唯一标识码，官方宣称准确度高达99.5%

测试代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Fingerprint2 TEST</title>
  6. <style>
  7. body {
  8. color: #555;
  9. }
  10. #info {
  11. font-size: 12px;
  12. }
  13. #control span {
  14. color: #333;
  15. margin-left: 10px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="info">
  21. <p>Fingerprint2 Github: <a href="https://github.com/Valve/fingerprintjs2" target="_blank">https://github.com/Valve/fingerprintjs2</a>
  22. </p>
  23. <p>纯前端实现的浏览器指纹采集器，通过获取浏览器中所有能获取到的信息(部分通过base64转成String)，最后生成出md5，用于该用户在该设备上的唯一标识码，官方宣称准确度高达99.5%</p>
  24. </div>
  25. <div id="control">
  26. <button onclick="start()">开始</button>
  27. <span>userAgent:</span><input type="checkbox" id="userAgent" checked="checked">
  28. <span>fonts:</span><input type="checkbox" id="fonts" checked="checked">
  29. <span>fontsFlash:</span><input type="checkbox" id="fontsFlash" checked="checked">
  30. <span>canvas:</span><input type="checkbox" id="canvas" checked="checked">
  31. <span>webgl:</span><input type="checkbox" id="webgl" checked="checked">
  32. <span>audio:</span><input type="checkbox" id="audio" checked="checked">
  33. <span>enumerateDevices:</span><input type="checkbox" id="enumerateDevices" checked="checked">
  34. </div>
  35. <div id="view">
  36. </div>
  37. <script src="https://cdn.staticfile.org/fingerprintjs2/2.1.0/fingerprint2.min.js"></script>
  38. <script>
  39. function start() {
  40. const start = new Date().getTime();
  41. let view = document.querySelector('#view');
  42. view.innerHTML = '';
  43. let excludes = {};
  44. if (!document.querySelector('#userAgent').checked) {
  45. excludes.userAgent = true;
  46. }
  47. if (!document.querySelector('#audio').checked) {
  48. excludes.audio = true;
  49. }
  50. if (!document.querySelector('#enumerateDevices').checked) {
  51. excludes.enumerateDevices = true;
  52. }
  53. if (!document.querySelector('#fonts').checked) {
  54. excludes.fonts = true;
  55. }
  56. if (!document.querySelector('#fontsFlash').checked) {
  57. excludes.fontsFlash = true;
  58. }
  59. if (!document.querySelector('#webgl').checked) {
  60. excludes.webgl = true;
  61. }
  62. if (!document.querySelector('#canvas').checked) {
  63. excludes.canvas = true;
  64. }
  65. let options = {excludes: excludes}
  67. Fingerprint2.get(options, function (components) {
  68. // 参数
  69. const values = components.map(function (component) {
  70. return component.value
  71. });
  72. // 指纹
  73. const murmur = Fingerprint2.x64hash128(values.join(''), 31);
  74. view.innerHTML += '<p>指纹 : ' + murmur + '</p>';
  75. view.innerHTML += '<p>消耗 : ' + (new Date().getTime() - start) + ' 毫秒</p>';
  76. view.innerHTML += '<p>使用的参数 : </p>';
  77. for (const c of components) {
  78. view.innerHTML += '<p>' + c.key + ' : ' + c.value + '</p>';
  79. }
  80. });
  81. }
  82. </script>
  83. </body>
  84. </html>

    效果演示

    测试地址:https://tczmh.gitee.io/fingerprint2demo/
    最终效果:

    指纹 : 959c35da0972771684b62c210fee5438 消耗 : 351 毫秒 使用的参数 : userAgent : Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 webdriver : not available language : zh-CN colorDepth : 24 deviceMemory : 4 pixelRatio : 1 hardwareConcurrency : 4 screenResolution : 900,1600 availableScreenResolution : 900,1600 timezoneOffset : -480 timezone : Asia/Shanghai sessionStorage : true localStorage : true indexedDb : true addBehavior : false openDatabase : true cpuClass : not available platform : Linux x86_64 doNotTrack : 1 plugins : Chrome PDF Plugin,Portable Document Format,application/x-google-chrome-pdf,pdf,Chrome PDF Viewer,,application/pdf,pdf,Native Client,,application/x-nacl,,application/x-pnacl (后面太长省略)…

END

演示代码:https://gitee.com/tczmh/Fingerprint2Demo
Fingerprintjs2 Github：https://github.com/Valve/fingerprintjs2

使用：main.js：
import Fingerprint2 from ‘fingerprintjs2’
if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
const str = JSON.stringify(components)
console.log(md5(str), ‘缓存’)
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
const str = JSON.stringify(components)
console.log(md5(str), ‘首次’)
})
}, 500)
}