指纹验证

package.json

@@ -12,6 +12,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^3.0.3",
     "axios": "^0.19.0",
     "element-ui": "^2.12.0",
     "jquery": "^3.4.1",

src/components/common/layout/header.vue

@@ -18,9 +18,7 @@
 <script>
 
 import QRCode from 'qrcodejs2'
-import Fingerprint from './../../../../static/js/fingerprint.js'
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
-
-let finger = new Fingerprint()
 
 var that = null
 export default {
@@ -38,14 +36,25 @@ export default {
   methods: {
     // 验证web指纹
     confire_finger () {
-      let finger_code = finger.get()
+      (async () => {
-      this.$api.post(this.$api.phpURL + 'api/Verify/index', {code: finger_code}).then(res => {
+      // We recommend to call `load` at application startup.
-        if (res.msg == 'false') {
+        const fp = await FingerprintJS.load()
+
+        // The FingerprintJS agent is ready.
+        // Get a visitor identifier when you'd like to.
+        const result = await fp.get()
+
+        // This is the visitor identifier:
+        const visitorId = result.visitorId
+        console.log(visitorId)
+        this.$api.post(this.$api.phpURL + 'api/Verify/index', {code: visitorId}).then(res => {
+          if (res.msg == 'false') {
           // eslint-disable-next-line camelcase
-          alert('访问错误！错误码：' + finger_code)
+            alert('访问错误！错误码：' + visitorId)
-          window.location.href = 'http://www.juip.com'
+            window.location.href = 'http://www.juip.com'
-        }
+          }
-      })
+        })
+      })()
     },
     open () {
       console.log(open)

src/components/login/components/login-by-account.vue

@@ -27,9 +27,9 @@
   </section>
 </template>
 <script>
-import Fingerprint from './../../../../static/js/fingerprint.js'
 
-let finger = new Fingerprint()
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+
 export default {
   components: {
 
@@ -65,14 +65,25 @@ export default {
 
     // 验证web指纹
     confire_finger () {
-      let finger_code = finger.get()
+      (async () => {
-      this.$api.post(this.$api.phpURL + 'api/Verify/index', {code: finger_code}).then(res => {
+      // We recommend to call `load` at application startup.
-        if (res.msg == 'false') {
+        const fp = await FingerprintJS.load()
+
+        // The FingerprintJS agent is ready.
+        // Get a visitor identifier when you'd like to.
+        const result = await fp.get()
+
+        // This is the visitor identifier:
+        const visitorId = result.visitorId
+        console.log(visitorId)
+        this.$api.post(this.$api.phpURL + 'api/Verify/index', {code: visitorId}).then(res => {
+          if (res.msg == 'false') {
           // eslint-disable-next-line camelcase
-          alert('访问错误！错误码：' + finger_code)
+            alert('访问错误！错误码：' + visitorId)
-          window.location.href = 'http://www.juip.com'
+            window.location.href = 'http://www.juip.com'
-        }
+          }
-      })
+        })
+      })()
     },
     getMenus () {
       this.$api

static/js/fingerprint.js

@@ -1,267 +0,0 @@
-/*
-* fingerprintJS 0.5.3 - Fast browser fingerprint library
-* https://github.com/Valve/fingerprintjs
-* Copyright (c) 2013 Valentin Vasilyev (valentin.vasilyev@outlook.com)
-* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
-*/
-
-;(function (name, context, definition) {
-  if (typeof module !== 'undefined' && module.exports) { module.exports = definition(); }
-  else if (typeof define === 'function' && define.amd) { define(definition); }
-  else { context[name] = definition(); }
-})('Fingerprint', this, function () {
-  'use strict';
-  
-  var Fingerprint = function (options) {
-    var nativeForEach, nativeMap;
-    nativeForEach = Array.prototype.forEach;
-    nativeMap = Array.prototype.map;
-
-    this.each = function (obj, iterator, context) {
-      if (obj === null) {
-        return;
-      }
-      if (nativeForEach && obj.forEach === nativeForEach) {
-        obj.forEach(iterator, context);
-      } else if (obj.length === +obj.length) {
-        for (var i = 0, l = obj.length; i < l; i++) {
-          if (iterator.call(context, obj[i], i, obj) === {}) return;
-        }
-      } else {
-        for (var key in obj) {
-          if (obj.hasOwnProperty(key)) {
-            if (iterator.call(context, obj[key], key, obj) === {}) return;
-          }
-        }
-      }
-    };
-
-    this.map = function(obj, iterator, context) {
-      var results = [];
-      // Not using strict equality so that this acts as a
-      // shortcut to checking for `null` and `undefined`.
-      if (obj == null) return results;
-      if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
-      this.each(obj, function(value, index, list) {
-        results[results.length] = iterator.call(context, value, index, list);
-      });
-      return results;
-    };
-
-    if (typeof options == 'object'){
-      this.hasher = options.hasher;
-      this.screen_resolution = options.screen_resolution;
-      this.canvas = options.canvas;
-      this.ie_activex = options.ie_activex;
-    } else if(typeof options == 'function'){
-      this.hasher = options;
-    }
-  };
-
-  Fingerprint.prototype = {
-    get: function(){
-      var keys = [];
-      keys.push(navigator.userAgent);
-      keys.push(navigator.language);
-      keys.push(screen.colorDepth);
-      if (this.screen_resolution) {
-        var resolution = this.getScreenResolution();
-        if (typeof resolution !== 'undefined'){ // headless browsers, such as phantomjs
-          keys.push(this.getScreenResolution().join('x'));
-        }
-      }
-      keys.push(new Date().getTimezoneOffset());
-      keys.push(this.hasSessionStorage());
-      keys.push(this.hasLocalStorage());
-      keys.push(!!window.indexedDB);
-      //body might not be defined at this point or removed programmatically
-      if(document.body){
-        keys.push(typeof(document.body.addBehavior));
-      } else {
-        keys.push(typeof undefined);
-      }
-      keys.push(typeof(window.openDatabase));
-      keys.push(navigator.cpuClass);
-      keys.push(navigator.platform);
-      keys.push(navigator.doNotTrack);
-      keys.push(this.getPluginsString());
-      if(this.canvas && this.isCanvasSupported()){
-        keys.push(this.getCanvasFingerprint());
-      }
-      if(this.hasher){
-        return this.hasher(keys.join('###'), 31);
-      } else {
-        return this.murmurhash3_32_gc(keys.join('###'), 31);
-      }
-    },
-
-    /**
-     * JS Implementation of MurmurHash3 (r136) (as of May 20, 2011)
-     * 
-     * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
-     * @see http://github.com/garycourt/murmurhash-js
-     * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
-     * @see http://sites.google.com/site/murmurhash/
-     * 
-     * @param {string} key ASCII only
-     * @param {number} seed Positive integer only
-     * @return {number} 32-bit positive integer hash 
-     */
-
-    murmurhash3_32_gc: function(key, seed) {
-      var remainder, bytes, h1, h1b, c1, c2, k1, i;
-      
-      remainder = key.length & 3; // key.length % 4
-      bytes = key.length - remainder;
-      h1 = seed;
-      c1 = 0xcc9e2d51;
-      c2 = 0x1b873593;
-      i = 0;
-      
-      while (i < bytes) {
-          k1 = 
-            ((key.charCodeAt(i) & 0xff)) |
-            ((key.charCodeAt(++i) & 0xff) << 8) |
-            ((key.charCodeAt(++i) & 0xff) << 16) |
-            ((key.charCodeAt(++i) & 0xff) << 24);
-        ++i;
-        
-        k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff;
-        k1 = (k1 << 15) | (k1 >>> 17);
-        k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff;
-
-        h1 ^= k1;
-            h1 = (h1 << 13) | (h1 >>> 19);
-        h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff;
-        h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16));
-      }
-      
-      k1 = 0;
-      
-      switch (remainder) {
-        case 3: k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16;
-        case 2: k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8;
-        case 1: k1 ^= (key.charCodeAt(i) & 0xff);
-        
-        k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
-        k1 = (k1 << 15) | (k1 >>> 17);
-        k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
-        h1 ^= k1;
-      }
-      
-      h1 ^= key.length;
-
-      h1 ^= h1 >>> 16;
-      h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff;
-      h1 ^= h1 >>> 13;
-      h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff;
-      h1 ^= h1 >>> 16;
-
-      return h1 >>> 0;
-    },
-
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=781447
-    hasLocalStorage: function () {
-      try{
-        return !!window.localStorage;
-      } catch(e) {
-        return true; // SecurityError when referencing it means it exists
-      }
-    },
-    
-    hasSessionStorage: function () {
-      try{
-        return !!window.sessionStorage;
-      } catch(e) {
-        return true; // SecurityError when referencing it means it exists
-      }
-    },
-
-    isCanvasSupported: function () {
-      var elem = document.createElement('canvas');
-      return !!(elem.getContext && elem.getContext('2d'));
-    },
-
-    isIE: function () {
-      if(navigator.appName === 'Microsoft Internet Explorer') {
-        return true;
-      } else if(navigator.appName === 'Netscape' && /Trident/.test(navigator.userAgent)){// IE 11
-        return true;
-      }
-      return false;
-    },
-
-    getPluginsString: function () {
-      if(this.isIE() && this.ie_activex){
-        return this.getIEPluginsString();
-      } else {
-        return this.getRegularPluginsString();
-      }
-    },
-
-    getRegularPluginsString: function () {
-      return this.map(navigator.plugins, function (p) {
-        var mimeTypes = this.map(p, function(mt){
-          return [mt.type, mt.suffixes].join('~');
-        }).join(',');
-        return [p.name, p.description, mimeTypes].join('::');
-      }, this).join(';');
-    },
-
-    getIEPluginsString: function () {
-      if(window.ActiveXObject){
-        var names = ['ShockwaveFlash.ShockwaveFlash',//flash plugin
-          'AcroPDF.PDF', // Adobe PDF reader 7+
-          'PDF.PdfCtrl', // Adobe PDF reader 6 and earlier, brrr
-          'QuickTime.QuickTime', // QuickTime
-          // 5 versions of real players
-          'rmocx.RealPlayer G2 Control',
-          'rmocx.RealPlayer G2 Control.1',
-          'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)',
-          'RealVideo.RealVideo(tm) ActiveX Control (32-bit)',
-          'RealPlayer',
-          'SWCtl.SWCtl', // ShockWave player
-          'WMPlayer.OCX', // Windows media player
-          'AgControl.AgControl', // Silverlight
-          'Skype.Detection'];
-          
-        // starting to detect plugins in IE
-        return this.map(names, function(name){
-          try{
-            new ActiveXObject(name);
-            return name;
-          } catch(e){
-            return null;
-          }
-        }).join(';');
-      } else {
-        return ""; // behavior prior version 0.5.0, not breaking backwards compat.
-      }
-    },
-
-    getScreenResolution: function () {
-      return [screen.height, screen.width];
-    },
-
-    getCanvasFingerprint: function () {
-      var canvas = document.createElement('canvas');
-      var ctx = canvas.getContext('2d');
-      // https://www.browserleaks.com/canvas#how-does-it-work
-      var txt = 'http://valve.github.io';
-      ctx.textBaseline = "top";
-      ctx.font = "14px 'Arial'";
-      ctx.textBaseline = "alphabetic";
-      ctx.fillStyle = "#f60";
-      ctx.fillRect(125,1,62,20);
-      ctx.fillStyle = "#069";
-      ctx.fillText(txt, 2, 15);
-      ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
-      ctx.fillText(txt, 4, 17);
-      return canvas.toDataURL();
-    }
-  };
-
-
-  return Fingerprint;
-
-});

yarn.lock

@@ -87,6 +87,13 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@fingerprintjs/fingerprintjs@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.npm.taobao.org/@fingerprintjs/fingerprintjs/download/@fingerprintjs/fingerprintjs-3.0.3.tgz#0c8720dc851dccc15021ea1b8f90b7908c5f745c"
+  integrity sha1-DIcg3IUdzMFQIeobj5C3kIxfdFw=
+  dependencies:
+    tslib "^2.0.1"
+
 "@types/json-schema@^7.0.5":
   version "7.0.6"
   resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.6.tgz?cache=0&sync_timestamp=1598910575756&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
@@ -7260,6 +7267,11 @@ tslib@^1.10.0:
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha1-yIHhPMcBWJTtkUhi0nZDb6mkcEM=
 
+tslib@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1602286632196&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"