This guide shows how to migrate your code from FingerprintJS version 2 to version 3.
The support of Internet Explorer 10 and older has been dropped. Some old browsers like Internet Explorer 11 and Android Browser 4.1 require a Promise polyfill; see the browser support guide to learn more about usage with these browsers.
The migration process depends on the way you install the library.
Use the new URL: https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js
Bower support is dropped, choose another installation method.
Update the package version:
npm install @fingerprintjs/fingerprintjs
# or
yarn add @fingerprintjs/fingerprintjs
Remove the type declaration package. You don't need it because the type declaration is embedded into the main package in v3:
npm remove @types/fingerprintjs__fingerprintjs
# or
yarn remove @types/fingerprintjs__fingerprintjs
Version 3 doesn't require you to call requiestIdleCallback
or setTimeout
manually.
Instead, you must call FingerprintJS.load()
.
This function returns a promise that resolves with an agent object.
The agent has a get
method that you will use instead of calling Fingerprint2.get
directly:
- requestIdleCallback(() => {
- Fingerprint2.get(result => {
+ const fpPromise = FingerprintJS.load()
+ fpPromise
+ .then(fp => fp.get()){
+ .then(result => {
// Handle the result
})
- })
Version 3 emits a complete visitor identifier, you don't need to derive it from the components by yourself:
fp.get().then(result => {
- const values = result.map(function (component) { return component.value })
- const visitorId = Fingerprint2.x64hash128(values.join(''), 31)
+ const visitorId = result.visitorId
})
If you need to get raw components, you can, but the format is different:
const result = await fp.get()
console.log(result)
- [
- { key: 'ordinaryComponent', value: 'Some value' },
- { key: 'componentWithError', value: 'error' },
- { key: 'notAvailableComponent', value: 'not available' },
- { key: 'excludedComponent', value: 'excluded' },
- ],
+ {
+ visitorId: 'aStringWithAnIdentifier',
+ components: {
+ ordinaryComponent: { value: 'some value', duration: 4 },
+ componentWithError: { error: { message: 'This is the error object' }, duration: 2 },
+ notAvailableComponent: { value: undefined, duration: 1 },
+ excludedComponent: { value: 'Exclusion is not supported', duration: 10 },
+ }
+ }
Version 3 has no options for customization, it provides a good built-in setup. Nevertheless, you can exclude built-in entropy components and add custom entropy components manually. See the extending guide to learn more.