Angular SDK

The Fingerprint Angular SDK is an easy way to integrate Fingerprint into your Angular application. It supports all capabilities of the JS agent and provides a built-in caching mechanism.

How to install

Add @fingerprintjs/fingerprintjs-pro-angular as a dependency to your application via npm or yarn.

npm install @fingerprintjs/fingerprintjs-pro-angular

yarn add @fingerprintjs/fingerprintjs-pro-angular

Add FingerprintjsProAngularModule.forRoot() to the imports sections in your root application module. You need to specify your public API key and other configuration options based on your chosen region and active integration.

// src/app/app.module.ts
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 {}

Inject the FingerprintjsProAngularService in your component's constructor. Now you can identify visitors using the getVisitorData() method from the service.

// src/app/home/home.component.ts
import {Component} from '@angular/core'
import {
  ExtendedGetResult,
  FingerprintjsProAngularService,
  GetResult,
} from '@fingerprintjs/fingerprintjs-pro-angular'

@Component({
  selector: 'app-home',
  template: `
    <div>
      <button (click)="onIdentifyButtonClick()">Identify</button>
      <p>VisitorId: {{ visitorId }}</p>
    </div>
  `,
})
export class HomeComponent {
  constructor(
    private fingerprintService: FingerprintjsProAngularService
  ) {}

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

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

Documentation

You can find the full documentation in the official GitHub repository. The repository also contains an example app demonstrating the usage of the library.

Updated 5 months ago