Skip to content

Instantly share code, notes, and snippets.

@zmts
Last active July 26, 2023 08:12
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save zmts/b26ba9a61aa0b93126fc6979e7338ca3 to your computer and use it in GitHub Desktop.
Save zmts/b26ba9a61aa0b93126fc6979e7338ca3 to your computer and use it in GitHub Desktop.
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)
    }
  })
}
@zmts
Copy link
Author

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
Copy link

@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
Copy link
Author

zmts commented Jun 30, 2020

@mauridirecta24 Did you install package npm i fingerprintjs2 ?

@mauridirecta24
Copy link

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
Copy link

@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
Copy link
Author

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
Copy link

@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
Copy link
Author

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