Generic JS Agent Wrapper for SPAs
The fingerprintjs-pro-spa
open-source library is a framework-agnostic wrapper over the Fingerprint JS Agent with a built-in caching mechanism. It is used by our other frontend libraries under the hood.
SDKs tailor-made for your framework
If you are using React (including Next, Preact), Vue, Svelte or Angular, we recommend using the SDK made for your specific framework.
If you are using vanilla JavaScript, a different framework, or you simply prefer a lower-level library, feel free to use
fingerprintjs-pro-spa
to integrate Fingerprint into your website.
Installation
Install using your favorite package manager:
npm install @fingerprintjs/fingerprintjs-pro-spa
yarn add @fingerprintjs/fingerprintjs-pro-spa
Create the client
Create a FpjsClient
instance before rendering or initializing your application. You should only have one instance of the client. You need to specify your public API key and other configuration options based on your chosen region and active integration.
import {
FpjsClient,
FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-spa';
// It can receive multiple parameters but the only required one is `loadOptions`,
// which contains the public API key
const fpjsClient = new FpjsClient({
loadOptions: {
apiKey: "<PUBLIC_API_KEY>",
endpoint: [
// "https://metrics.yourwebsite.com",
FingerprintJSPro.defaultEndpoint
],
scriptUrlPattern: [
// "https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js",
FingerprintJSPro.defaultScriptUrlPattern
],
// region: "eu"
}
});
You can learn more about different load options in the JavaScript agent reference.
Initialise the JS agent
Before you start making identification requests to the Fingerprint API, you need to initialize the Agent
to allow it to gather browser signals.
Make sure the initialization has been completed before calling the getVisitorData
method to avoid errors.
// with async/await
await fpjsClient.init()
const visitorData = await fpjsClient.getVisitorData()
// with promises
const visitorData = fpjsClient.init().then(() => {
return fpjsClient.getVisitorData()
})
Call the Fingerprint API
The getVisitorData
method returns visitor identification data based on the request options.
The second parameter ignoreCache
will make sure that a request to the API is made even if the data is present in the cache.
// with async/await
const visitorData = await fpjsClient.getVisitorData({ extendedResult: true })
// with promises
const visitorData = fpjsClient.getVisitorData({ extendedResult: true }).then((visitorData) => {
// use visitor data in your fraud prevention logic
console.log(visitorData.visitorId);
});
Full documentation and source code are available on GitHub.
Updated 26 days ago