指纹

指纹 Pro Angular SDK 是方便整合的方法 指纹 Pro 输入您的角应用程序。 见 src 文件夹 一个完整的用法例子.

目录

• 所需资源
• 安装
• 开始
• 藏匿战略
• 文档
• 支助和反馈
• 许可证

所需资源

需要下列依赖关系:

• 类型脚本 QQ4.6
• 节点16+
• 角 15+ 单相

这个软件包是商业的 指纹平台。它与可用源不相容 指纹JS库。学习更多关于 指纹和指纹之间的区别。 。 。 .

安装

使用 无数字 :

npm install @fingerprintjs/fingerprintjs-pro-angular

使用 线条数字 :

yarn add @fingerprintjs/fingerprintjs-pro-angular

开始

为了识别访客,你需要一个指纹 Pro账户(你可以) 免费报名) (中文(简体) ). 要得到你的 API 密钥并开始,看看 文档中的快速启动指南。 。 。 .

1. 添加 FingerprintjsProAngularModule.forRoot() 到您的根应用程序模块中的导入部分,然后通过 loadOptions 配置对象。 您可以指定多个配置选项。 设置 a 区域 如果您在注册时选择了非全球区域。 设定 endpoint 财务报告和审定财务报表 scriptUrlPattern 如果您正在使用 我们的代理集成之一 提高准确性 游客身份认证的有效性. 更多信息:其他 为 Root () 参数 见下文.

import { NgModule } from '@angular/core'
import { FingerprintjsProAngularModule, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-angular'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FingerprintjsProAngularModule.forRoot({
      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"
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 弹出 FingerprintjsProAngularService 在您的组件的构造器。 现在你可以使用 getVisitorData() 方法.

import { Component } from '@angular/core'
import { FingerprintjsProAngularService } from '@fingerprintjs/fingerprintjs-pro-angular'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  constructor(private fingerprintjsProAngularService: FingerprintjsProAngularService) {}
  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  visitorId = 'Press "Identify" button to get visitorId'
  extendedResult: null | ExtendedGetResult | GetResult = null

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintjsProAngularService.getVisitorData()
    //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    this.visitorId = data.visitorId
    this.extendedResult = data
  }
}

带有 Angular Universal 的服务器侧渲染( SSR)

库可与Angular Universal一起使用. 记住访客身份只在浏览器中是可能的,所以您的访客身份代码只应运行客户端. 详情见执行实例.

链接和标记信息

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

将你的数据与访问者身份相连接 linkedId 或者说 tag 选项对象的参数 useVisitorData() 钩子或 getData 函数 :

// ...

import { Component } from '@angular/core'
import { FingerprintjsProAngularService } from '@fingerprintjs/fingerprintjs-pro-angular'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  constructor(private fingerprintjsProAngularService: FingerprintjsProAngularService) {}

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintjsProAngularService.getVisitorData({
      linkedId: 'user_1234',
      tag: {
        userAction: 'login',
        analyticsId: 'UA-5555-1111-1',
      },
    })

    // ...
  }
}

藏匿战略

指纹 Pro使用费按API呼叫计费. 为了避免不必要的API呼叫 缓存识别结果。默认情况下, SDK 使用 sessionStorage 到缓存结果.

• 指定 cacheLocation 编辑 FingerprintjsProAngularModule.forRoot 用于存储结果的道具 memory 或者说 localStorage启用 none 完全禁用缓存.
• 指定 cache 编辑 FingerprintjsProAngularModule.forRoot 使用您的自定义缓存执行的道具 。 详情见 创建自定义缓存 在指纹 Pro SPA 寄存器中(这个 SDK 使用的下等指纹库).
• 过 {ignoreCache: true} 页:1 getVisitorData() 函数以忽略特定 API 调用时的缓存结果.

[注] 如果您使用来自 extendedResult注意你的隐蔽策略. 一些领域,例如, ip 或者说 lastSeenAt,可能会随着时间而改变 同一访客。 使用 getVisitorData({ ignoreCache: true }) 以获取最新的识别结果.

文档

这个库在引擎盖下使用指纹Pro JavaScript代理. 见我们的文件全文 JavaScript 代理 API 引用联合国

FingerprintjsProAngularModule

该模块只是初始化了指纹 Pro JS代理 带有负载选项,配置缓存策略,并提供 FingerprintjsProAngularService 转编.

FingerprintjsProAngularModule.forRoot 道具

loadOptions: FingerprintJS.LoadOptions

指纹JS JS Pro代理商的选项 load() 方法。 选项 代理初始化属性。 。 。 .

cacheLocation?: CacheLocation

定义客户端应当使用的内置缓存机制 。 缓存选项遵循 指纹- pro- spa 存储器。 。 。 .

cache?: ICache

自定义缓存执行 。 优先于 cacheLocation 属性。 缓存选项遵循 指纹- pro- spa 存储器。 。 。 .

cacheTimeInSeconds?: number

数据存储在缓存中的秒数。 不能超过86 400(24h),因为缓存数据超过24小时会对识别准确性产生不利影响. 缓存选项遵循 指纹- pro- spa 存储器。 。 。 .

cachePrefix?: string

自定义本地Storage和会话Storage缓存密钥的前缀 。 如果 cache 提供。 缓存选项遵循 指纹- pro- spa 存储器。 。 。 .

FingerprintjsProAngularService 方法

getVisitorData(ignoreCache?: boolean, options?: GetOptions<TExtended>)

这种方法与指纹JS Pro API一起执行识别请求. 返回对象包含关于装入状态、错误和 访客。 。 。 .

• getOptions: GetOptions<TExtended> 参数遵循指纹JS Pro的参数 get 函数。 。 。 .
• ignoreCache: boolean - 准备 true 总是向 API 提出请求,即使数据存在于缓存中.

clearCache

为当前缓存策略清除缓存.

解析应用程序

此寄存器包含一个实例 Angular 应用程序 。 要在当地运行演示 :

1. 用 Clone 复制存储器 git clone [email protected]:fingerprintjs/fingerprintjs-pro-angular.git。 。 。 .
2. 在根文件夹内运行 pnpm install 以安装依赖.
3. 创建 Dev 环境文件 cp src/environments/environment.ts src/environments/environment.dev.ts内部替换 FingerprintJS Pro public key 用你的公用钥匙.
4. 运行 pnpm generate:version 创建 SDK 版本文件.
5. 运行 pnpm build 用于构建SDK包.
6. 运行 pnpm start 以启动演示应用程序.

该应用程序将在http://localhost:4200上启动.

支助和反馈

提问或提供反馈,使用 问题如果您需要私人支援,请发电子邮件至 [email protected]。如果您想有一个类似的角包装器,用于 来源可用指纹JS,考虑在主要方面创建一个问题 指纹JS仓库。 。 。 .

API 参考

见全 生成 API 引用。 。 。 .

许可证

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