Fingerprintjs的使用与说明

曹臻

2023-12-01

关于Fingerprintjs这个库的具体使用方法

仓库地址
关于Fingerprintjs这个库的具体使用，有一些文章已经讲了，但是按照他们的流程走下来运行不通，可能是因为库更新的缘故。这里我对成功使用这个库的使用说明。
环境：

腾讯云服务器
Ubuntu18.04

安装

这里先不要安装，我先把文档中的安装方法和我首先使用的命令作个介绍。
它的文档中介绍了几种安装方法，这里我采用了npm安装的方法。
这时它给的安装命令：

npm i @fingerprintjs/fingerprintjs

我用这个也安装成功了：

npm install @fingerprintjs/fingerprintjs

应该是一个意思吧，没有深究。
等在“使用”中，本地安装在项目中比较好。

使用

使用我用了webpack。

本地安装webpack

mkdir fingerprintjs-demo && cd fingerprintjs-demo
npm init -y
npm install webpack webpack-cli --save-dev

–save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
所以一定要在这个文件夹下使用这个命令，这样的好处是不影响其他的项目。

创建目录结构、文件和内容

project

  webpack-demo
  |- package.json
+|- /dist
+	|-index.html
+|- /src
+	|-index.js

src/index.js

import FingerprintJS from '@fingerprintjs/fingerprintjs';
(async () => {
  const fp = await FingerprintJS.load({screen_resolution:true});

  const result =await fp.get();

  const visitorId = result.visitorId;
  console.log(visitorId);
})();

index.html

<!doctype html>
<html>
 <head>
    <title>起步</title>
 </head>
<body>
  <h1>Fingerprinting</h1>
  <script src="main.js"></script>
</body>
</html>

调整package.json

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

**注意：**上面的文件命名最好都用index，其他的名字需要更改配置。

这时再安装Fingerprintjs包

npm install --save @fingerprintjs/fingerprintjs

–save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

编译打包运行

npx webpack

有一个warning问题不大。
然后在浏览器打开index.html，浏览器检查，在console中应该可以看到一串字符串，就是浏览器的指纹。

参考资料

https://github.com/fingerprintjs/fingerprintjs#open-source-version-reference
https://blog.csdn.net/bhq1711617151/article/details/85235461
https://www.webpackjs.com/guides/