Giới thiệu thư viện trợ giúp định danh người dùng - FingerprintJS

Giới thiệu thư viện trợ giúp định danh người dùng - FingerprintJS

Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

Vấn đề

Chúng ta luôn muốn biết có bao nhiêu người sử dụng trang web, theo dõi lượt truy cập hay là cần xác định được phiên của người dùng duy nhất.

Có một cách đơn giản để làm điều đó là yêu cầu người dùng đăng nhập, lúc đó chúng ta dễ dàng bắt được phiên thông qua ID người dùng đã lưu trong hệ thống. Cách này tốt nhưng không phải lúc nào cũng có thể bắt người dùng đăng nhập. Vì thế chúng ta cần tìm ra một giải pháp thay thế chức năng đăng nhập để định danh người dùng.

FingerprintJS là gì

FingerprintJS là một thư viện giúp nhận dạng thiết bị có độ chính xác cao nhất cho thiết mobile và web. FingerprintJS hỗ trợ định danh đa nền tảng từ Android, IOS đến Trình duyệt web.

Chúng ta biết rằng trình duyệt là cầu nối cho người dùng sử dụng trang web. Bản thân trình duyệt chứa rất nhiều thông tin về chính nó cũng như thông tin người dùng như loại trình duyệt, phiên bản, kích thước hiển thị, hệ điều hành, địa chỉ IP... và rất nhiều những thông tin nữa. Hãy truy cập vào https://coveryourtracks.eff.org để biết thêm những thông tin trình duyệt có thể "lấy" từ bạn. Những thông tin đó nếu được khai thác và xử lý hợp lý có thể cho ra một định danh duy nhất cho người dùng đang sử dụng.

Có thể chúng ta đã từng đối mặt với vấn đề cần định danh được người dùng mà không cần thông qua chức năng đăng nhập. Vì thế ta cần tìm cách để đánh dấu được người dùng đã từng sử dụng ứng dụng hay chưa. Một cách đơn giản là sinh ra một chuỗi định danh ngẫu nhiên rồi lưu vào Cache. Cách làm này nhanh và dễ nhất nhưng nếu xoá Cache thì mọi thứ lại như mới. Do đó chúng ta cần một giải pháp định danh người dùng tốt hơn.

Bạn có thể tự tạo thuật toán để tạo ra định danh dựa trên những dữ liệu thu thập được từ trình duyệt hoặc sử dụng thư viện FingerprintJS để làm điều đó. FingerprintJS có hai phiên bản là Open Source và Pro. Đối với phiên bản Open Source độ chính xác theo họ công bố là lên tới 60% còn với Pro thì lên đến 99.5%. Tuy nhiên khi dùng Pro bạn sẽ phải gọi đến server của FingerprintJS để tiến hành định danh và giới hạn 20.000 request mỗi tháng. Nếu quá số lượng đó thì bạn cần trả thêm tiền để sử dụng.

FingerprintJS sẽ tính toán dựa trên những dữ liệu thu thập được để đưa ra một chuỗi định danh người dùng như là:

x6e9RzbUC2P96yckcMih

Cách sử dụng

FingerprintJS cung cấp nhiều cách sử dụng khác nhau.

Sử dụng qua CDN:

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

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

Hoặc thông qua 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)
})()

Để sử dụng phiên bản Pro, bạn truy cập vào FingerprintJS đăng ký tài khoản, sau đó hệ thống sẽ hiển thị mã code để gắn vào trang web.

FingerprintJS tracking code

Tổng kết

FingerprintJS là một giải pháp để định danh người dùng nhanh chóng với độ chính xác cao mà không cần đăng nhập. Blog của tôi cũng đang sử dụng FingerprintJS để mang lại trải nghiệm tốt nhất cho người đọc. Nếu dự án tiếp theo của bạn có yêu cầu tracking người dùng mà không đăng nhập thì bạn biết phải làm gì rồi chứ!

Cao cấp
Hello

5 bài học sâu sắc

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (2)

Nội dung bình luận...
Avatar
Ẩn danh1 năm trước

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ỉ

Trả lời
Avatar
Xuân Hoài Tống1 năm trước

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 năm trước

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

Trả lời
Avatar
Xuân Hoài Tống2 năm trước

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