Introducing the User Identification Library - FingerprintJS

Introducing the User Identification Library - FingerprintJS

Daily short news for you
  • For a long time, I have been thinking about how to increase brand presence, as well as users for the blog. After much contemplation, it seems the only way is to share on social media or hope they seek it out, until...

    Wearing this shirt means no more worries about traffic jams, the more crowded it gets, the more fun it is because hundreds of eyes are watching 🤓

    (It really works, you know 🤭)

    » Read more
  • A cycle of developing many projects is quite interesting. Summarized in 3 steps: See something complex -> Simplify it -> Add features until it becomes complex again... -> Back to a new loop.

    Why is that? Let me give you 2 examples to illustrate.

    Markdown was created with the aim of producing a plain text format that is "easy to write, easy to read, and easy to convert into something like HTML." At that time, no one had the patience to sit and write while also adding formatting for how the text displayed on the web. Yet now, people are "stuffing" or creating variations based on markdown to add so many new formats that… they can’t even remember all the syntax.

    React is also an example. Since the time of PHP, there has been a desire to create something that clearly separates the user interface from the core logic processing of applications into two distinct parts for better readability and writing. The result is that UI/UX libraries have developed very robustly, providing excellent user interaction, while the application logic resides on a separate server. The duo of Front-end and Back-end emerged from this, with the indispensable REST API waiter. Yet now, React doesn’t look much different from PHP, leading to Vue, Svelte... all converging back to a single point.

    However, the loop is not bad; on the contrary, this loop is more about evolution than "regression." Sometimes, it creates something good from something old, and people rely on that goodness to continue the loop. In other words, it’s about distilling the essence little by little 😁

    » Read more
  • Alongside the official projects, I occasionally see "side" projects aimed at optimizing or improving the language in some aspects. For example, nature-lang/nature is a project focused on enhancing Go, introducing some changes to make using Go more user-friendly.

    Looking back, it resembles JavaScript quite a bit 😆

    » Read more

Problem

We always want to know how many people are using our website, track visits, or identify unique users.

One simple way to do that is to require users to log in, which allows us to easily capture sessions through the user ID stored in the system. This method works well, but it's not always possible to get users to log in. Therefore, we need to find an alternative solution to identify users.

What is FingerprintJS

FingerprintJS is a library that provides the most accurate device identification for mobile and web devices. FingerprintJS supports cross-platform identification from Android, iOS to web browsers.

We know that the browser acts as a bridge for users to access websites. The browser itself contains a lot of information about itself as well as user information, such as browser type, version, display size, operating system, IP address, and much more. Visit https://coveryourtracks.eff.org to learn more about the information that browsers can "fetch" from you. This information, if successfully exploited and processed, can provide a unique identification for the user currently using it.

We may have encountered the need to identify users without using the login feature. Therefore, we need a way to mark whether a user has used the application before or not. A simple method is to generate a random identification string and store it in the cache. This method is quick and easy, but if the cache is cleared, everything will start from scratch. Therefore, we need a better user identification solution.

You can create your own algorithm to generate identification based on the data collected from the browser, or you can use the FingerprintJS library to do so. FingerprintJS has two versions: Open Source and Pro. According to their claims, the Open Source version has an accuracy of up to 60%, while the Pro version has an accuracy of up to 99.5%. However, when using the Pro version, you need to make requests to FingerprintJS's server to perform the identification process and there is a limit of 20,000 requests per month. If you exceed this limit, you will need to pay extra to use the service.

FingerprintJS will calculate based on the collected data to generate a user identification string like this:

x6e9RzbUC2P96yckcMih

How to Use

FingerprintJS provides various ways to use it.

Using a CDN:

  const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
    .then(FingerprintJS => FingerprintJS.load())

  fpPromise
    .then(fp => fp.get())
    .then(result => console.log(result.visitorId))

Or through npm:

npm i @fingerprintjs/fingerprintjs
import FingerprintJS from '@fingerprintjs/fingerprintjs'

const fpPromise = FingerprintJS.load();

(async () => {
  const fp = await fpPromise
  const result = await fp.get()
  console.log(result.visitorId)
})()

To use the Pro version, you need to sign up for an account on FingerprintJS, and the system will display the tracking code to be added to your website.

FingerprintJS tracking code

Summary

FingerprintJS is a solution for quickly and accurately identifying users without requiring them to log in. My blog also uses FingerprintJS to provide the best experience for readers. If your next project requires user tracking without login, then you know what to do, right.

Premium
Hello

Me & the desire to "play with words"

Have you tried writing? And then failed or not satisfied? At 2coffee.dev we have had a hard time with writing. Don't be discouraged, because now we have a way to help you. Click to become a member now!

Have you tried writing? And then failed or not satisfied? At 2coffee.dev we have had a hard time with writing. Don't be discouraged, because now we have a way to help you. Click to become a member now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (2)

Leave a comment...
Avatar
Ẩn danh1 year ago

Lúc trước mình nhớ bên này ra mắt tool anti browers mà nhỉ giờ tìm mãi không ra hay do nó đổi thành dự án này rồi nhỉ

Reply
Avatar
Xuân Hoài Tống1 year ago

Thế ạ, mình cũng chỉ nghe đến thư viện này giúp định danh trình duyệt. Nhưng vừa rồi họ mới chấm dứt bản miễn phí và bắt trả phí rồi, thế là đành phải chuyển qua phiên bản open source với độ chính xác thấp hơn chỉ khoảng 60% theo họ nói.

Avatar
Gin Na2 years ago

@gif [tIeCLkB8geYtW] Thư viện hay, phải login vào cmt cho bạn

Reply
Avatar
Xuân Hoài Tống2 years ago

Cảm ơn bạn đã tạo động lực cho mình