FingerprintJS Pro Angular

FingerprintJS Pro Angular is an easy-to-use Angular library for FingerprintJS Pro. An example usage is located in the src folder. This package works with FingerprintJS Pro, it is not compatible with open-source FingerprintJS. You can learn more about the difference between FingerprintJS Pro and open-source FingerprintJS in the official documentation.

Table of contents

• Installation
• Getting started
• Caching strategy
• Documentation
• Support and feedback
• License

Installation

Using npm:

npm install @fingerprintjs/fingerprintjs-pro-angular

Using yarn:

yarn add @fingerprintjs/fingerprintjs-pro-angular

Getting started

To identify visitors, you'll need a FingerprintJS Pro account (you can sign up for free). You can learn more about API keys in the official FingerprintJS Pro documentation.

1. Add FingerprintjsProAngularModule.forRoot() to the imports sections in your root application module and pass the loadOptions configuration object. Set up your public key in the apiKey option. Set a region if you have chosen a non-global region during registration. Please refer to the Regions page. More information about .forRoot() arguments you can find below.

import { NgModule } from '@angular/core';
import { FingerprintjsProAngularModule } from 'fingerprintjs-pro-angular';
// ...

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FingerprintjsProAngularModule.forRoot({loadOptions: {apiKey: 'your-fpjs-public-api-key'}})
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

  constructor(private fingerprintjsProAngularService: FingerprintjsProAngularService) { }
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  visitorId = 'Press "Identify" button to get visitorId';

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

Server-side rendering (SSR) with Angular Universal

The library is tested with an SSR scenario and the demo showcases this use case.

Caching strategy

⚠️ WARNING If you use data from extendedResult, please pay additional attention to caching strategy.

FingerprintJS Pro uses API calls as the basis for billing. Our best practices strongly recommend using cache to optimise API calls rate. The Library uses the SessionStorage cache strategy by default.

Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need exact current data, it is recommended to pass ignoreCache=true inside getVisitorData function.

Documentation

This library uses FingerprintJS Pro agent internally. The documentation for the FingerprintJS Pro agent is available at https://dev.fingerprintjs.com/docs.

FingerprintjsProAngularModule

The module just initializes the FingerprintJS Pro agent with load options, configure caching strategy, and provides FingerprintjsProAngularService to DI.

FingerprintjsProAngularModule.forRoot props

loadOptions: FingerprintJS.LoadOptions

Options for the FingerprintJS JS Pro agent load() method. Options follow the agent's initialisation properties.

cacheLocation?: CacheLocation

Defines which built-in cache mechanism the client should use. Caching options follow properties defined in the fingerprintjs-pro-spa repository.

cache?: ICache

Custom cache implementation. Takes precedence over the cacheLocation property. Caching options follow properties defined in the fingerprintjs-pro-spa repository.

cacheTimeInSeconds?: number

Duration in seconds for which data is stored in the cache. Cannot exceed 86_400 (24h) because caching data for longer than 24 hours can negatively affect identification accuracy. Caching options follow properties defined in the fingerprintjs-pro-spa repository.

cachePrefix?: string

Custom prefix for localStorage and sessionStorage cache keys. Will be ignored if the cache is provided. Caching options follow properties defined in the fingerprintjs-pro-spa repository.

FingerprintjsProAngularService methods

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

This method performs identification requests with the FingerprintJS Pro API. The returned object contains information about loading status, errors, and visitor.

• getOptions: GetOptions<TExtended> parameter follows parameters of the FingerprintJS Pro's get function.
• ignoreCache: boolean always make a request to the API, even if the data is present in the cache.

clearCache

Method clears the cache for current caching strategy.

Support and feedback

For support or to provide feedback, please raise an issue on our issue tracker. If you require private support, please email us at oss-support@fingerprintjs.com. If you'd like to have a similar Angular library for the open-source FingerprintJS, consider raising an issue in our issue tracker.

License

This project is licensed under the MIT license. See the LICENSE file for more info.