Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get browser fingerprint example (fingerprintjs2)

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)
    }
  })
}
@wheelo

This comment has been minimized.

Copy link

@wheelo wheelo commented Apr 29, 2020

brilliant

@mauridirecta24

This comment has been minimized.

Copy link

@mauridirecta24 mauridirecta24 commented Jun 30, 2020

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!

@zmts

This comment has been minimized.

Copy link
Owner Author

@zmts zmts commented Jun 30, 2020

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

@mauridirecta24

This comment has been minimized.

Copy link

@mauridirecta24 mauridirecta24 commented Jun 30, 2020

@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.

@zmts

This comment has been minimized.

Copy link
Owner Author

@zmts zmts commented Jun 30, 2020

@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

@mauridirecta24

This comment has been minimized.

Copy link

@mauridirecta24 mauridirecta24 commented Jun 30, 2020

@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 !

@zmts

This comment has been minimized.

Copy link
Owner Author

@zmts zmts commented Jun 30, 2020

@mauridirecta24 Did you install package npm i fingerprintjs2 ?

@mauridirecta24

This comment has been minimized.

Copy link

@mauridirecta24 mauridirecta24 commented Jun 30, 2020

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

console.log(Fingerprint2);

image

That is what I see on the console.

So it seems that the library is there.

Thanks again for your help!

@mauridirecta24

This comment has been minimized.

Copy link

@mauridirecta24 mauridirecta24 commented Jul 1, 2020

@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!

@zmts

This comment has been minimized.

Copy link
Owner Author

@zmts zmts commented Jul 1, 2020

@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

@mauridirecta24

This comment has been minimized.

Copy link

@mauridirecta24 mauridirecta24 commented Jul 1, 2020

@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
@zmts

This comment has been minimized.

Copy link
Owner Author

@zmts zmts commented Jul 1, 2020

@mauridirecta24

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment