Fingerprint Pro Angular

Fingerprint Pro Angular SDK is an easy way to integrate Fingerprint into your Angular application. See the src folder for a full usage example.

This SDK supports v4 of the Fingerprint JavaScript agent. See the v3 to v4 migration guide for more information.

Table of contents

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

Requirements

The following dependencies are required:

• TypeScript >=4.6
• Node 16+
• Angular 15+

This package works with the commercial Fingerprint platform. It is not compatible with the source-available FingerprintJS library. Learn more about the differences between Fingerprint and FingerprintJS.

Installation

Using npm:

npm install @fingerprint/angular

Using pnpm:

pnpm add @fingerprint/angular

Using yarn:

yarn add @fingerprint/angular

Getting started

To identify visitors, you'll need a Fingerprint Pro account (you can sign up for free). To get your API key and get started, see the Quick Start guide in our documentation.

1. Add FingerprintModule.forRoot() to the imports sections in your root application module and pass it the startOptions configuration object. You can specify multiple configuration options. Set a region if you have chosen a non-global region during registration. Set endpoints if you are using one of our proxy integrations to increase accuracy and effectiveness of visitor identification. Read more about other forRoot() parameters below.

import { NgModule } from '@angular/core'
import { FingerprintModule, Fingerprint } from '@fingerprint/angular'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FingerprintModule.forRoot({
      startOptions: {
        apiKey: '<PUBLIC_API_KEY>',
        endpoints: ['https://metrics.yourwebsite.com'],
        // region: "eu"
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Inject FingerprintService in your component's constructor. Now you can identify visitors using the getVisitorData() method.

import { Component } from '@angular/core'
import { FingerprintService } from '@fingerprint/angular'

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

  eventId = 'Press "Identify" button to get eventId'

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.FingerprintService.getVisitorData()
    //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    this.eventId = data.event_id
  }
}

Server-side rendering (SSR) with Angular Universal

The library can be used with Angular Universal. Keep in mind that visitor identification is only possible in the browser, so your visitor identification code should only run client-side. See the example implementation for more details.

Linking and tagging information

The event_id provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the linkedId and tag, see Linking and tagging information.

Associate your data with an identification event using the linkedId or tag parameter of the options object passed into the getVisitorData() method:

// ...

import { Component } from '@angular/core'
import { FingerprintService } from '@fingerprint/angular'

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

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

    // ...
  }
}

Caching strategy

Fingerprint Pro usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. By default, the SDK does not use caching.

• Specify cache on the FingerprintModule.forRoot props to enable and configure caching.
• For more details, see Caching results.

Note

If you use data from extendedResult, pay additional attention to your caching strategy. Some fields, for example, ip or lastSeenAt, might change over time for the same visitor. Use getVisitorData({ ignoreCache: true }) to fetch the latest identification results.

Documentation

This library uses Fingerprint Pro JavaScript agent under the hood. See our documentation for the full JavaScript Agent API reference.

FingerprintModule

The module just initializes the Fingerprint Pro JS agent with start options and provides FingerprintService to DI.

FingerprintModule.forRoot props

startOptions: Fingerprint.StartOptions

Options for the FingerprintJS JS Pro agent start() method. Options follow the agent's initialization properties.

FingerprintService methods

getVisitorData(options?: GetOptions)

This method performs identification requests with the FingerprintJS Pro API.

• options: GetOptions parameter follows the parameters of the FingerprintJS Pro's get function.

collectData(options?: GetOptions)

This method collects on demand fingerprint data.

• options: GetOptions parameter follows the parameters of the FingerprintJS Pro's collect function.

Demo application

This repository contains an example Angular application. To run the demo locally:

1. Clone the repository with git clone git@github.com:fingerprintjs/angular.git.
2. Inside the root folder, run pnpm install to install the dependencies.
3. Create a dev environment file with cp src/environments/environment.ts src/environments/environment.dev.ts, and inside, replace FingerprintJS Pro public key with your actual public key.
4. Run pnpm generate:version to create an SDK version file.
5. Run pnpm start to start the demo application. (The app will now use the internal library source directly).

The application will start on http://localhost:4200.

Support and feedback

To ask questions or provide feedback, use Issues. If you need private support, please email us at oss-support@fingerprint.com. If you'd like to have a similar Angular wrapper for the source-available FingerprintJS, consider creating an issue in the main FingerprintJS repository.

API Reference

See the full generated API reference.

License

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