Custom components

Sometimes you might want to add a custom component to your fingerprinting. This is easy to implement with ThumbmarkJS.

Component anatomy

A component should be implemented as a Promise It should work as a synchronous function as well, but an asynchronous function is best practice.

The component function should resolve to one of:

• number
• string
• boolean
• JSON object

Including

Once you have an instance of the Thumbmark class, you can include your custom component by calling includeComponent, like so:

const t = new Thumbmark();
t.includeComponent('my-custom-component', myCustomComponentFunction)
const tm = await t.get();

Example

Let's say you want to include the IP address into the components. Your custom component function might look like this:

function fetchIpAddress() {
  return new Promise((resolve, reject) => {
    fetch('http://checkip.amazonaws.com')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.text();
      })
      .then(ip => resolve({'ip_address': ip.trim()}))
      .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
        reject(error);
      });
  });
}

and you can include it in the fingerprinting following the pattern above:

const t = new Thumbmark();
t.includeComponent('ip_address', fetchIpAddress)
const tm = await t.get();