Get browser fingerprint example (fingerprintjs2)

fingerprint.md

Get browser fingerprint example (fingerprintjs2)

import * as Fingerprint2 from 'fingerprintjs2'
import * as UAParser from 'ua-parser-js'

function _getFingerprint () {
  return new Promise((resolve, reject) => {
    async function getHash () {
      const options = {
        excludes: {
          plugins: true,
          localStorage: true,
          adBlock: true,
          screenResolution: true,
          availableScreenResolution: true,
          enumerateDevices: true,
          pixelRatio: true,
          doNotTrack: true
        },
        preprocessor: (key, value) => {
          if (key === 'userAgent') {
            const parser = new UAParser(value)
            // return customized user agent (without browser version)
            return `${parser.getOS().name} :: ${parser.getBrowser().name} :: ${parser.getEngine().name}`
          }
          return value
        }
      }

      try {
        const components = await Fingerprint2.getPromise(options)
        const values = components.map(component => component.value)
        console.log('fingerprint hash components', components)

        return String(Fingerprint2.x64hash128(values.join(''), 31))
      } catch (e) {
        reject(e)
      }
    }

    if (window.requestIdleCallback) {
      console.log('requestIdleCallback')
      requestIdleCallback(async () => resolve(await getHash()))
    } else {
      console.log('setTimeout')
      setTimeout(async () => resolve(await getHash()), 500)
    }
  })
}

brilliant

Hi, Im workning with the fingerprint library, the example is useful but Im not sure why Im getting "getPromise is not a function", not sure why? Im using the library in a react application and Im also using webpack to compile my app.
Can you help me with that?

Thanks!

@mauridirecta24
At first take a look you have to use https://github.com/fingerprintjs/fingerprintjs2
Then check probably you can change import approach

@zmts
Thanks for your replay. Yes of course I read that.
What do you mean by change import approach?
I change a little bit the example beacause I only need to execute one time in order to get the hash for send to the api:

export const getFingerPrint = async () => {
  const options = {
    excludes: {
      plugins: true,
      localStorage: true,
      adBlock: true,
      screenResolution: true,
      availableScreenResolution: true,
      enumerateDevices: true,
      pixelRatio: true,
      doNotTrack: true,
    },
    preprocessor: (key, value) => {
      if (key === 'userAgent') {
        const parser = new UAParser(value);
        // return customized user agent (without browser version)
        return `${parser.getOS().name} :: ${parser.getBrowser().name} :: ${
          parser.getEngine().name
        }`;
      }
      return value;
    },
  };

  try {
    const fingerprintInstance = new Fingerprint2();
    const components = await Fingerprint2.getPromise(options);
    const values = components.map(component => component.value);
    console.log('fingerprint hash components', components);

    return String(Fingerprint2.x64hash128(values.join(''), 31));
  } catch (e) {
    console.error(e);
  }
};

I know that the documentation mention:
Must use requestIdleCallback You should not run fingerprinting directly on or after page load.

I put the call of the getFingerPrint function waiting several minutes and same result.

Thanks! and hope you can catch what Im trying to do.

@mauridirecta24

What do you mean by change import approach?

For example

import * as Fingerprint2 from 'fingerprintjs2'

to

const Fingerprint2 = required('fingerprintjs2')

Anyway you can check my working example >> https://github.com/zmts/beauty-vuejs-boilerplate/blob/master/src/services/auth.service.js

@zmts

I took your working code:

import * as UAParser from 'ua-parser-js';
const Fingerprint2 = require('fingerprintjs2')

export const _getFingerprint = () => {
  return new Promise((resolve, reject) => {
    async function getHash () {
      const options = {
        excludes: {
          plugins: true,
          localStorage: true,
          adBlock: true,
          screenResolution: true,
          availableScreenResolution: true,
          enumerateDevices: true,
          pixelRatio: true,
          doNotTrack: true,
          preprocessor: (key, value) => {
            if (key === 'userAgent') {
              const parser = new UAParser(value)
              // return customized user agent (without browser version)
              return `${parser.getOS().name} :: ${parser.getBrowser().name} :: ${parser.getEngine().name}`
            }
            return value
          }
        }
      }

      try {
        console.log(Fingerprint2);
        console.log('Fingerprint2.getPromise');
        console.log(Fingerprint2.getPromise)
        const components = await Fingerprint2.getPromise(options)
        const values = components.map(component => component.value)
        console.log('fingerprint hash components', components)

        return String(Fingerprint2.x64hash128(values.join(''), 31))
      } catch (e) {
        reject(e)
      }
    }

    console.log('get fp hash @ setTimeout')
      setTimeout(async () => resolve(await getHash()), 500)
  })
}

 getFingerprint = async () => {
     console.log('fingerprint called');
    const fingerprint = await _getFingerprint();
    console.log(fingerprint)
    return fingerprint;
  }

But when I call the function:

Uncaught (in promise) TypeError: Fingerprint2.getPromise is not a function

I still not understand.

Thanks again for your advice !

@mauridirecta24 Did you install package npm i fingerprintjs2 ?

@zmts
Of course I did, in fact when I do:

console.log(Fingerprint2);

That is what I see on the console.

So it seems that the library is there.

Thanks again for your help!

@zmts

Got it working!

The issue was that when you run npm i fingerprint2 it install the version 1.8 those functions are in newer version 2.x.

I found that on this post:
fingerprintjs/fingerprintjs#409

It shouldnt install last version when you run npm i fingerprint2 ?

In any case I fix my issue.

Thanks a lot for your help much appreciated!

@mauridirecta24

You have to run npm i fingerprintjs2 I mentioned it before =)
Anyway I glad that you find way to solve it

p.s.
I will clean our discussion

@zmts
I did it. But if you do that It insall an older version. Not the one that support that.

Check your package.json for sure you have version 2.somethig but if you run npm i fingerprintjs2 it will instal a version 1.8

I also encountered this problem and later solved it.
The reason is that the default installation is version 1.8. The 1.8 version does not support this method. See which version is in your package.json file. You need to install the latest version 2.0.
Use the command: npm install fingerprintjs2@2 --save

@mauridirecta24

Looks weird, in my repo all fine 2.* version
In you case it could be related with old package-lock.json