SPA 指纹

指纹 是一个设备智能平台,提供行业领先的准确性

这个库是一个框架不可知的包装 围绕指纹 Pro Java 脚本代理,添加多个内置缓存机制,并设置了推荐的默认设置.

• 如果你只需要指纹 JS代理人 无需缓冲,你可以直接使用.
• 如果你想要一个特定框架的集成, 我们有专门的SDK用于 反应( 包括 Next, Preact), (中文(简体) ), 阴道, (中文(简体) ), 丝绒 财务报告和审定财务报表 角质。 。 。 .
• 如果您拥有一个需要缓存的单页网页应用程序,但比特定框架的SDK提供更低级的代理控制,这个库是适合您的.

[注] 这个库假设你有一个指纹 Pro订阅或测试, 它不符合 来源可用指纹JS。见我们的文件,以便更多地了解 指纹Pro和指纹JS之间的差异。 。 。 .

目录

• 所需资源
• 安装
• 开始
• 缓存
• 支助和反馈
• 文档
• 许可证

所需资源

• 对于 TypeScript 用户: Typescript 4.5 以上

安装

使用 无数字 :

npm install @fingerprintjs/fingerprintjs-pro-spa

使用 线条数字 :

yarn add @fingerprintjs/fingerprintjs-pro-spa

使用 小时数字 :

pnpm add @fingerprintjs/fingerprintjs-pro-spa

开始

1. 获取指纹 Pro 公共 API 密钥

为了识别访客,你需要一个指纹 Pro账户(你可以) 免费报名) (中文(简体) ).

• 转到 指纹板 > 翻译: 应用程序设置 > 翻译: API 密钥。 。 。 .
• 找到您的公共 API 密钥 .

2. 创建客户端

创建一个 FpjsClient 在提交或初始化您的申请之前。 你只应该有一个客户的例子。 您需要根据您选择的区域和活动集成指定您的公共 API 密钥和其他配置选项 .

import { FpjsClient, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-spa'

const fpjsClient = new FpjsClient({
  // You can also pass these options later in `.init()` method
  loadOptions: {
    apiKey: '<PUBLIC_API_KEY>',
    endpoint: [
      //'https://metrics.yourwebsite.com',
      FingerprintJSPro.defaultEndpoint,
    ],
    scriptUrlPattern: [
      // 'https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js',
      FingerprintJSPro.defaultScriptUrlPattern,
    ],
    // region: "eu"
  },
})

[注] 您必须提供 loadOptions 包含您的公共 API 密钥, 无论是在构建器中还是在 init 方法。 否则SDK会出错的 您可以在这里更多地了解不同的负载选项 JS代理文件。 。 。 .

3. 启动联合来文代理人

在你开始向指纹 Pro API提出身份请求之前,你需要初始化JS探员. 此从 Fingerprint CDN 下载最新的客户端侧逻辑 。 打电话 init() 之前 getVisitorData() 避免出错的方法.

// with async/await
await fpjsClient.init()

const visitorData = await fpjsClient.getVisitorData()

// with promises
const visitorData = fpjsClient.init().then(() => {
  return fpjsClient.getVisitorData()
})

你也可以通过 loadOptions 输入 init 方法在这里。 它们将与转给建筑商的选项合并.

await fpjsClient.init({
  apiKey: '<PUBLIC_API_KEY>',
  // endpoint: ["<CUSTOM_ENDPOINT>", FingerprintJSPro.defaultEndpoint],
  // scriptUrlPattern: ["<CUSTOM_SCRIPT_URL>", FingerprintJSPro.defaultScriptUrlPattern],
  // region: "eu"
})

4. 确定来访者

这个 getVisitorData 根据请求返回访客身份数据 选项。 。 。 . 设定 ignoreCache 改为 true 以调用 API ,即使数据存在于缓存中.

// with async/await
const visitorData = await fpjsClient.getVisitorData({ extendedResult: true }, false)

// with promises
const visitorData = fpjsClient.getVisitorData({ extendedResult: true }).then((visitorData) => {
  // use visitor data in your fraud prevention logic
  checkIfFingerprintIsFraudulent(visitorData.visitorId) // this method is just an example, this SDK doesn't actually supply it
})

见 JS探员 API参考 更多细节.

链接和标记信息

这个 visitorId 由指纹识别提供,与您已经了解的用户信息相结合,例如账户ID,订单ID等,尤其有用. 更多地了解《公约》的各种应用 linkedId 财务报告和审定财务报表 tag,参见 链接和标记信息。 。 。 .

const visitorData = await fpjsClient.getVisitorData({
  linkedId: 'user_1234',
  tag: {
    userAction: 'login',
    analyticsId: 'UA-5555-1111-1',
  },
})

缓存

指纹 Pro 使用量按API呼叫计费. 为了避免不必要的API呼叫,缓存识别结果是一种好的做法. SDK提供了三种将访客数据从盒子中缓存的方法:

• 会话存储( 默认) - sessionStorage
• 本地存储 - localStorage
• 记忆 - memory
• 没有缓存 - nocache

您可以指定 cacheLocation 选项 FpjsClient数字 :

const fpjsClient = new FpjsClient({
  loadOptions: {
    apiKey: 'your-fpjs-public-api-key',
  },
  cacheLocation: 'localstorage',
  // You can also use the provided TypeScript enum
  // cacheLocation: CacheLocation.LocalStorage
})

缓存密钥基于组合 获取选项。例如,API对电话的响应 extendedResult: true 财务报告和审定财务报表 extendedResult: false 独立存储.

[注] 如果您使用来自 extendedResult注意你的隐蔽策略 一些领域,例如, ip 或者说 lastSeenAt,可能会随着时间而改变 同一访客.

您可以忽略特定 API 调用和使用的缓存结果 { ignoreCache: true }数字 :

const visitorData = await fpjsClient.getVisitorData({ ignoreCache: true })

检查您是否使用返回的缓存获取了响应 cacheHit 旗帜 :

const { cacheHit, ...visitorData } = await fpjsClient.getVisitorData()

使用 getVisitorDataFromCache 从缓存直接获取响应 :

// Checks if request matching given options is present in cache
await fpjsClient.isInCache({ extendedResult: true })

// Returns cached visitor data based on the request options, or undefined if the data is not present in cache
const cachedResult = await fpjsClient.getVisitorDataFromCache({ extendedResult: true })

您也可以使用下面描述的您的自定义缓存执行 .

创建自定义缓存

SDK可以使用您应用程序内执行的自定义缓存存储 。 当不同的数据存储在您的环境中更方便时,例如混合移动应用程序,此功能是有用的.

您可以为 cache 用于执行以下功能的 SDK 配置的属性。 所有函数都可以返回一个承诺或静态值.

[注] 这个 cache 属性优先于 cacheLocation 如果两者都设定好了。 如果发生这种情况, 在控制台上显示警告 .

我们出口内部 InMemoryCache, (中文(简体) ), LocalStorageCache, (中文(简体) ), SessionStorageCache,以及 CacheStub 执行,因此如果您愿意,您可以将这些自定义缓存绕过这些执行.

缓存时间

使用 cacheTimeInSeconds 客户端构造器设置自定义缓存时间选项 。 为了确保识别的准确性,我们建议在24小时之内不缓存访客数据。 如果超过86400(60 x 60 x 24),则 FpjsClient 构造器会丢出一个错误 .

支助和反馈

报告问题、提问或反馈,请使用 问题。如果你需要私人支持,你可以发电子邮件给我们 oss- support@指印.com。 。 。 .

文档

此库使用 指纹 Pro 在引擎盖下.

• 为了了解更多的指纹 Pro读了我们 产品文档。 。 。 .
• 为了多了解这个SDK,有一个 Typedoc 生成的 SDK 引用 可用.

许可证

这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 文档以获取更多信息.