Guide : how to implement device fingerprinting in Angular

Prerequisites

Prerequisites

Step 1: Create an Angular Project

ng new fingerprinting-angular
cd fingerprinting-angular
npm install axios


Step 2: Create a Service for API Calls

Generate a service using Angular CLI.

ng generate service fingerprint

Modify fingerprint.service.ts:

import { Injectable } from '@angular/core';
import axios from 'axios';

@Injectable({
  providedIn: 'root'
})
export class FingerprintService {
  private API_KEY = 'your_api_key';
  private API_URL = 'https://api.fingerprinting-api.com';

  async getFingerprint() {
    try {
      const response = await axios.get(`${this.API_URL}/visitors`, {
        headers: { Authorization: `Bearer ${this.API_KEY}` }
      });
      return response.data;
    } catch (error) {
      console.error('Error fetching fingerprint:', error);
      return null;
    }
  }
}

Step 3: Display Data in a Component (optional)

If you wish to display data in a component, modify app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FingerprintService } from './fingerprint.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  fingerprint: any;

  constructor(private fingerprintService: FingerprintService) {}

  async ngOnInit() {
    this.fingerprint = await this.fingerprintService.getFingerprint();
  }
}

If you struggle with implementing device fingerprinting with FP-API, do not hesitate to reach out !

Eric Tremblay

Feb 28, 2025

Latest posts

Discover other pieces of writing in our blog

Fingerprinting.API

Advanced browser fingerprinting for seamless security

© Copyright 2024. All rights reserved.

Fingerprinting.API

Advanced browser fingerprinting for seamless security

© Copyright 2024. All rights reserved.