How do I use browser fingerprint in my website?

Question

I want to identify users accessing my API even if they clear the cookies or localstorage wherever I am storing the current session information. I see that browser fingerprinting is one of the ways to achieve this up to some accuracy. I am working on an angular2 project for the frontend. I have the following questions:

1. Are there any libraries available for angular2 which creates the browser fingerprint? (I have seen ng2-device-detector. This doesn't give much info and also no hashed fingerprint. So, do I have to hash it myself? )
2. Have seen fingerprintjs2 this does take a lot of info but has no implementation for angular2, but I wonder how would the hashed fingerprint actually matter? For a Request in my API, I will check if the payload contained a fingerprint which already existed in any of the existing sessions? (Really payload? It will just be a POST request. The user can simply send a random long string as the hashed fingerprint and the API will treat the request as if it came from a different person.)
3. I guess then I will have to use some API which not only generates a hashed fingerprint in the frontend but also validates after the request has reached the API, something like Google's reCaptcha. Are there any APIs like such?
4. If there aren't any APIs as such then I guess I will have to implement such functionality in my API itself?

Please write your suggestions.

Answer 1

1. It seems there isn't any library(ported or otherwise) especially for Angular2.

2. You don't need an Angular2 version of it, just inject the source file in your index.html and you can use it like this, PLUNKER

declare var Fingerprint2: any;

@Component({
  selector: 'my-app',
  template: `Hello`,
})
export class App {
  constructor() {
    new Fingerprint2().get(function(result, components){
      console.log(result); // a hash, representing your device fingerprint
      console.log(components); // an array of FP components
    });
  }
}

You have to treat this hash as any other token like JWT, exclusively or inclusively. But you do need to store it somewhere, just like any other token, that's how you will be able check it's authenticity. If a user tempers with the request and hash, JWT has a validation mechanism that makes it invalid on tampering, but I suppose fingerprinting hash can't provide that safety.

3. No, none (IMK).

4. If no.-2 works for you I suppose you'll be far better off.

Answer 2

Ankit pretty much answered in relation to Angular. Here is an API that provides a fingerprint so you do not need to implement it yourself:

Browser Fingerprint API

Although this solution is not an Angular component (or what-have-you), you can make an AJAX call to get the fingerprint and submit it to your server.

Full Disclosure: I am the developer of this service.