Cách xác thực người dùng bằng tính năng nhận dạng khuôn mặt trong React.js

Written By: Nguyễn Văn Hiếu (Web 25)
Gmail: hieunguyenyt173@gmail.com
Bài viết gốc: https://www.freecodecamp.org/news/authenticate-with-face-recognition-reactjs/

faceio-demo
Với sự ra đời của Web 2.0, việc xác thực người dùng trở thành một nhiệm vụ quan trọng đối với các nhà phát triển.

Trước khi có Web 2.0, khách truy cập trang web chỉ có thể xem nội dung của một trang web - không có tương tác. Kỷ nguyên này của Internet được gọi là Web 1.0.

Nhưng sau Web 2.0, mọi người đã có khả năng đăng nội dung của riêng họ lên một trang web. Và sau đó kiểm duyệt nội dung trở thành nhiệm vụ không bao giờ kết thúc đối với chủ sở hữu trang web.

Để giảm thư rác trên các trang web này, các nhà phát triển đã giới thiệu hệ thống xác thực người dùng. Giờ đây, những người kiểm duyệt trang web có thể dễ dàng biết được nguồn của thư rác và có thể ngăn những kẻ gửi thư rác đó truy cập vào trang web thêm nữa.

Nếu bạn muốn biết cách thực hiện kiểm duyệt nội dung trên trang web của mình, bạn có thể đọc bài viết của tôi về Cách phát hiện và làm mờ khuôn mặt trong các ứng dụng web của bạn.

Bây giờ chúng ta hãy xem những gì chúng ta sẽ đi vào trong hướng dẫn này.

1.Những gì bạn sẽ học trong hướng dẫn này

Trong hướng dẫn này, chúng tôi sẽ thảo luận về các kỹ thuật xác thực khác nhau mà bạn có thể sử dụng để xác thực người dùng. Chúng bao gồm xác thực mật khẩu email, xác thực điện thoại, OAuth, liên kết ma thuật không cần mật khẩu và xác thực khuôn mặt cuối cùng.

Trọng tâm chính của chúng tôi sẽ là xác thực thông qua các kỹ thuật nhận dạng khuôn mặt trong bài viết này.

Chúng tôi cũng sẽ xây dựng một dự án hướng dẫn bạn cách tích hợp xác thực dựa trên nhận dạng khuôn mặt trong ứng dụng web React của bạn.

Trong dự án này, chúng tôi sẽ sử dụng nền tảng FaceIO SaaS (phần mềm như một dịch vụ) để tích hợp xác thực dựa trên nhận dạng khuôn mặt. Vì vậy, hãy đảm bảo rằng bạn đã thiết lập một tài khoản FaceIO miễn phí để theo dõi.

Và cuối cùng, chúng ta sẽ xem xét khía cạnh quyền riêng tư của người dùng và thảo luận về cách nhận dạng khuôn mặt không gây hại đến quyền riêng tư của bạn. Chúng tôi cũng sẽ nói về việc liệu đó có phải là sự lựa chọn đáng tin cậy cho các nhà phát triển trong tương lai hay không.

Phiên bản cuối cùng của dự án này trông như thế này. Trông có vẻ thú vị? Chúng ta hãy làm điều đó sau đó.

facio-final

2.Các loại hệ thống xác thực người dùng khác nhau

Hiện tại có rất nhiều hệ thống xác thực người dùng mà bạn có thể chọn để triển khai trên các trang web của mình. Không có kỹ thuật xác thực cao cấp hay thấp kém thực sự. Tất cả các hệ thống xác thực này phụ thuộc vào việc sử dụng công cụ phù hợp cho công việc.

Ví dụ: nếu bạn đang tạo một trang đích đơn giản để thu thập email từ người dùng, thì không cần sử dụng OAuth. Nhưng nếu bạn đang xây dựng một nền tảng xã hội, thì việc sử dụng OAuth có ý nghĩa hơn so với xác thực truyền thống. Bạn có thể lấy thông tin chi tiết và hình ảnh hồ sơ của người dùng trực tiếp từ OAuth.

Nếu ứng dụng web của bạn được xây dựng dựa trên bất kỳ nội dung nào liên quan đến đầu tư hoặc các dịch vụ ràng buộc pháp lý, thì việc sử dụng xác thực điện thoại sẽ có ý nghĩa hơn. Người dùng có thể tạo tài khoản email không giới hạn nhưng họ sẽ có số điện thoại hạn chế để sử dụng.

Chúng ta hãy xem xét một số hệ thống xác thực phổ biến để chúng ta có thể thấy ưu và nhược điểm của chúng.

Xác thực dựa trên mật khẩu email

Xác thực dựa trên mật khẩu email là kỹ thuật lâu đời nhất để xác minh người dùng. Cách thực hiện cũng rất đơn giản và dễ sử dụng.

Điểm chuyên nghiệp của hệ thống này là bạn không cần phải có tài khoản của bên thứ ba để đăng nhập. Nếu bạn có email, cho dù nó được tự lưu trữ hay từ một dịch vụ (như Gmail, Outlook, v.v.), bạn rất tốt để đi.

Vấn đề chính của hệ thống này là bạn cần phải nhớ tất cả các mật khẩu của mình. Khi số lượng các trang web không ngừng phát triển và chúng ta cần đăng nhập vào hầu hết các trang web để truy cập hồ sơ của mình, việc ghi nhớ mật khẩu cho mọi trang web trở thành một nhiệm vụ khó khăn đối với con người chúng ta.

Tạo ra một mật khẩu mạnh và độc đáo cũng là một nhiệm vụ lớn. Bộ não của chúng ta thường không có khả năng ghi nhớ nhiều chuỗi ký tự và số ngẫu nhiên. Đây là nhược điểm lớn nhất của hệ thống xác thực dựa trên mật khẩu email.

Xác thực điện thoại
Xác thực điện thoại nói chung là một kỹ thuật xác thực rất đáng tin cậy để xác minh danh tính của người dùng. Vì người dùng thường không có nhiều hơn một số điện thoại, điều này có thể phù hợp nhất cho các trang web liên quan đến nội dung nơi danh tính người dùng rất quan trọng.
Nhưng hạn chế của hệ thống này là mọi người không muốn tiết lộ số điện thoại của họ nếu họ không tin tưởng bạn. Số điện thoại mang tính cá nhân hơn nhiều so với email.

Một yếu tố quan trọng nữa của xác thực điện thoại là chi phí của nó. Chi phí gửi tin nhắn văn bản đến người dùng bằng OTP cao so với email. Vì vậy, chủ sở hữu và nhà phát triển trang web thường thích gắn bó với xác thực email.

Xác thực dựa trên OAuth
OAuth là một kỹ thuật tương đối mới so với hai kỹ thuật trước. Trong kỹ thuật này, OAuth thay mặt người dùng cung cấp xác thực người dùng và thông tin hữu ích.
Ví dụ: nếu người dùng có tài khoản với Google (chẳng hạn), họ có thể đăng nhập trực tiếp vào các trang web khác bằng tài khoản Google của họ. Trang web lấy thông tin chi tiết về người dùng từ chính Google. Điều này có nghĩa là không cần tạo nhiều tài khoản và ghi nhớ mọi mật khẩu cho các tài khoản đó.
Hạn chế chính của hệ thống này là bạn với tư cách là nhà phát triển phải tin tưởng các nhà cung cấp OAuth và nhiều người không muốn liên kết tất cả các tài khoản của họ vì lý do bảo mật. Vì vậy, bạn sẽ thường thấy trường email-mật khẩu ngoài OAuth trên hầu hết các trang web.
Xác thực liên kết ma thuật
Liên kết ma thuật giải quyết hầu hết các vấn đề bạn gặp phải trong xác thực dựa trên mật khẩu email. Tại đây, bạn chỉ phải cung cấp mật khẩu của mình và bạn sẽ nhận được email có liên kết xác thực. Sau đó, bạn phải mở liên kết này trong trình duyệt của mình và bạn đã hoàn tất. Không cần phải nhớ bất kỳ mật khẩu nào.

Loại xác thực này đã trở nên phổ biến trong những ngày này. Nó tiết kiệm rất nhiều thời gian cho người dùng và giá thành cũng rất rẻ. Và bạn không cần phải tin tưởng vào bên thứ 3 như trong trường hợp của OAuth.

Xác thực nhận dạng khuôn mặt

Nhận dạng khuôn mặt là một trong những kỹ thuật xác thực mới nhất và ngày nay nhiều nhà phát triển đang áp dụng nó. Nhận dạng khuôn mặt giúp giảm bớt rắc rối khi nhập mật khẩu email của bạn hoặc bất kỳ thông tin đăng nhập nào khác của người dùng để đăng nhập vào ứng dụng web.

Điều quan trọng nhất là hệ thống xác thực này nhanh chóng và không cần bất kỳ phần cứng đặc biệt nào. Bạn chỉ cần một webcam, mà hầu như tất cả các thiết bị ngày nay đều có.

Công nghệ nhận dạng khuôn mặt sử dụng trí thông minh nhân tạo để vạch ra các chi tiết độc đáo trên khuôn mặt của người dùng và lưu trữ chúng dưới dạng băm (một số số ngẫu nhiên và văn bản không có ý nghĩa) để giảm các vấn đề liên quan đến quyền riêng tư.

Việc xây dựng và triển khai mô hình nhận dạng khuôn mặt dựa trên trí tuệ nhân tạo không hề đơn giản và có thể rất tốn kém đối với các nhà phát triển độc lập và các công ty khởi nghiệp nhỏ. Vì vậy, bạn có thể sử dụng nền tảng SaaS để thực hiện tất cả những việc nặng nhọc này cho bạn. Nhận dạng FaceIO và AWS là những ví dụ về loại dịch vụ này mà bạn có thể sử dụng trong các dự án của mình.

Trong dự án thực hành này, chúng tôi sẽ sử dụng các API FaceIO để xác thực người dùng thông qua nhận dạng khuôn mặt trong ứng dụng web React. FaceIO cung cấp cho bạn một cách dễ dàng để tích hợp hệ thống xác thực với thư viện JavaScript fio.js của họ.

Thiết lập dự án

Trước khi bắt đầu, hãy đảm bảo tạo tài khoản FaceIO và tạo một dự án mới. Lưu ID công khai của dự án FaceIO của bạn. Chúng tôi cần ID này sau này trong dự án của chúng tôi.

Để tạo một dự án React.js, chúng ta sẽ sử dụng Vite. Để bắt đầu một dự án Vite, hãy điều hướng đến thư mục mong muốn của bạn và thực hiện lệnh sau:

npm create vite@latest

Sau đó làm theo hướng dẫn và tạo ứng dụng React bằng Vite. Điều hướng bên trong thư mục và chạy npm insallđể cài đặt tất cả các phụ thuộc cho dự án của bạn.
install

Sau khi làm theo tất cả các bước này, cấu trúc dự án của bạn sẽ giống như sau:

.
├── index.html
├── package.json
├── package-lock.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   └── main.jsx
└── vite.config.js

Cách tích hợp FaceIO vào dự án của bạn

Để tích hợp FaceIO vào dự án của bạn, bạn cần thêm CDN của họ vào tệp index.html. Mở tệp index.html và thêm CDN faceIO trước thành phần gốc. Để tìm hiểu thêm, hãy xem hướng dẫn tích hợp của FaceIO.

<body>    
    <script src="https://cdn.faceio.net/fio.js"></script>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

Bây giờ, hãy xóa tất cả mã khỏi tệp App.jsx để bắt đầu lại từ đầu. Tôi đã giữ hướng dẫn này ở mức tối thiểu nhất có thể. Vì vậy, tôi chỉ thêm một tiêu đề và hai nút trong giao diện người dùng để chứng minh cách thức hoạt động của quy trình xác thực khuôn mặt FaceIO.

Ở đây, một nút hoạt động như một nút đăng nhập và nút kia hoạt động như một nút đăng nhập.

Mã bên trong tệp App.jsx trông giống như sau:

import "./App.css";
function App() {
  return (
    <section>
      <h1>Face Authentication by FaceIO</h1>
      <button>Sign-in</button>
      <button>Log-in</button>
    </section>
  );
}

export default App;

Cách đăng ký khuôn mặt của người dùng bằng FaceIO

Làm việc với FaceIO rất nhanh chóng và dễ dàng. Vì chúng tôi đang sử dụng thư viện fio.js, chúng tôi chỉ phải thực thi một hàm trợ giúp để xác thực người dùng. Thư viện fio.js này sẽ thực hiện hầu hết công việc cho chúng tôi.

Để đăng ký người dùng, chúng tôi khởi tạo đối tượng FaceIO của mình bên trong móc useEffect. Nếu không, mỗi khi một trạng thái thay đổi, nó sẽ chạy lại các thành phần và khởi động lại đối tượng faceIO.

let faceio;
useEffect(() => {
    faceio = new faceIO("Your Public ID goes here");
}, []);

ID công khai FaceIO của bạn nằm trên bảng điều khiển FaceIO của bạn. Sao chép ID công khai và dán vào đây để khởi tạo đối tượng FaceIO của bạn.

Bây giờ, hãy xác định một hàm có tên là handleSignIn (). Hàm này chứa logic đăng ký người dùng của chúng tôi.

Bên trong hàm gọi phương thức enroll của đối tượngfaceIO. Phương thức enroll này tương đương với chức năng đăng ký trong hệ thống đăng ký chuẩn được hỗ trợ bằng mật khẩu và chấp nhận đối số payload. Bạn có thể thêm bất kỳ thông tin người dùng cụ thể nào (ví dụ: tên hoặc địa chỉ email của họ) vào tải payload.

Thông tin về tải trọng này sẽ được lưu trữ cùng với dữ liệu xác thực trên khuôn mặt để tham khảo trong tương lai. Để tìm hiểu về các đối số tùy chọn khác, hãy xem tài liệu API của chúng tôi.

Trong nút đăng nhập của chúng tôi, khi người dùng nhấp vào, chúng tôi gọi hàm handleSignIn () này. Các đoạn mã để người dùng đăng nhập trông giống như sau:

const handleSignIn = async () => {
    try {
      let response = await faceio.enroll({
        locale: "auto",
        payload: {
          email: "example@gmail.com",
          pin: "12345",
        },
      });

      console.log(` Unique Facial ID: ${response.facialId}
      Enrollment Date: ${response.timestamp}
      Gender: ${response.details.gender}
      Age Approximation: ${response.details.age}`);
    } catch (error) {
      console.log(error);
    }
  };

<button onClick={handleSignIn}>Sign-in</button>

faceIO-onscreen

faceIO onscreen

Cách đăng nhập bằng tính năng Nhận dạng khuôn mặt

Sau khi đăng ký người dùng, bạn sẽ cần đưa người dùng vào quy trình xác thực hoặc đăng nhập / đăng nhập. Việc sử dụng thư viện fio.js cũng giúp chúng tôi rất dễ dàng thiết lập quy trình đăng nhập bằng cách sử dụng xác thực khuôn mặt.

Chúng ta phải gọi phương thức ==authenticate == của đối tượng faceIO tương đương với chức năng đăng nhập trong hệ thống đăng ký chuẩn được hỗ trợ bằng mật khẩu và tất cả các công việc quan trọng sẽ được thực hiện bởi gói fio.js.

Đầu tiên, hãy xác định một hàm mới có tên là handleLogIn () để xử lý tất cả logic đăng nhập trong ứng dụng React của chúng tôi. Bên trong hàm này, chúng ta gọi phương thức ==authenticate == của đối tượng faceIO như tôi đã đề cập trước đó.

Phương thức này chấp nhận một đối số locale. Đây là ngôn ngữ mặc định cho sự tương tác của người dùng với các widget FaceIO. Nếu bạn không chắc chắn, bạn có thể gán auto trong trường này.

Phương thức authenticate == cũng nhận nhiều đối số tùy chọn hơn như allowTimeout, idTimeout==, replyTimeout, v.v. Bạn có thể xem tài liệu API của họ để biết thêm về các đối số tùy chọn.

Chúng tôi gọi hàm handleLogIn () này khi ai đó nhấp vào nút Log-in:

const handleLogIn = async () => {
    try {
      let response = await faceio.authenticate({
        locale: "auto",
      });

      console.log(` Unique Facial ID: ${response.facialId}
          PayLoad: ${response.payload}
          `);
    } catch (error) {
      console.log(error);
    }
  };

<button onClick={handleLogIn}>Log-in</button>

Dự án xác thực người dùng của chúng tôi bằng FaceIO và React hiện đã hoàn tất! Bạn đã học cách đăng ký và đăng nhập một người dùng. Bạn có thể thấy quá trình này khá đơn giản so với việc thực hiện dựa trên email-pasword hoặc một số phương pháp xác thực khác mà chúng tôi đã thảo luận trước đó trong bài viết này.

Bây giờ bạn có thể tạo kiểu cho tất cả các phần tử jsx bằng CSS. Tôi đã không thêm CSS ở đây để giảm độ phức tạp trong dự án này.

Nếu bạn muốn lưu trữ dự án React FaceIO này miễn phí, bạn có thể xem bài viết này về cách triển khai dự án React và Nextjs của bạn trên trang Cloudflare.

Cách sử dụng API REST của FaceIO

Bên cạnh việc cung cấp các widget thông qua thư viện fio.js, FaceIO cũng cung cấp các API REST để hợp lý hóa quá trình xác thực.

Mọi ứng dụng trong bảng điều khiển FaceIO đều có API key. Bạn có thể sử dụng API key này để truy cập các điểm cuối API FaceIO REST. URL cơ sở cho REST API là https://api.faceio.net/.

Lược đồ URL chấp nhận các tham số URL như thế này https://api.faceio.net/cmd?param=val&param2=val2. Ở đây cmd là một điểm cuối API và param là một tham số điểm cuối nếu nó chấp nhận bất kỳ.

Sử dụng các điểm cuối API REST, bạn có thể tự động hóa các tác vụ khác nhau trong phần backend của mình.

Bạn có thể xóa ID khuôn mặt theo yêu cầu của người dùng.
Bạn có thể đính kèmpayload với ID khuôn mặt.
Bạn có thể thay đổi mã PIN được liên kết với ID khuôn mặt.

API REST này nhằm mục đích sử dụng hoàn toàn ở phía máy chủ. Đảm bảo rằng bạn không để lộ nó cho khách hàng. Điều quan trọng là bạn phải đọc các phần Quyền riêng tư và Bảo mật sau đây để tìm hiểu thêm về điều này.

Cách sử dụng FaceIO WebHooks

Webhooks là hệ thống giao tiếp theo hướng sự kiện giữa các máy chủ. Bạn có thể sử dụng tính năng webhook này của FaceIO để cập nhật và đồng bộ hóa phần phụ trợ của mình với các sự kiện mới xảy ra trong ứng dụng web giao diện người dùng của bạn.

Sự kiện webhook này kích hoạt khi đăng ký người dùng mới, xác thực khuôn mặt thành công, xóa ID khuôn mặt, v.v.

Bạn có thể thiết lập webhook của FaceIO trong bảng điều khiển dự án của mình. Một cuộc gọi webhook điển hình từ FaceIO kéo dài trong 6 giây. Điều này chứa tất cả thông tin về một sự kiện cụ thể ở định dạng JSON và trông giống như sau:

{
  "eventName":"String - Event Name",
  "facialId": "String - Unique Facial ID of the Target User",
  "appId":    "String - Application Public ID",
  "clientIp": "String - Public IP Address",
  "details": {
     "timestamp": "Optional String - Event Timestamp",
     "gender":    "Optional String - Gender of the Enrolled User",
     "age":       "Optional String - Age of the Enrolled User"
   }
}

Quyền riêng tư và FaceIO

Quyền riêng tư là điều quan trọng nhất đối với người dùng ngày nay. Khi các tập đoàn lớn sử dụng dữ liệu của bạn vì lợi ích của họ, câu hỏi nảy sinh về việc liệu quyền riêng tư của các kỹ thuật nhận dạng khuôn mặt này có hợp lệ và hợp pháp hay không.

FaceIO là một dịch vụ tuân theo tất cả các nguyên tắc về quyền riêng tư và được sự đồng ý của người dùng trước khi yêu cầu quyền truy cập máy ảnh của họ. Ngay cả khi nhà phát triển muốn, FaceIO không quét khuôn mặt mà không nhận được sự đồng ý. Người dùng có thể dễ dàng chọn không tham gia hệ thống và có thể xóa dữ liệu khuôn mặt của họ khỏi máy chủ.

FaceIO tuân thủ CCP và GDPR. Là một nhà phát triển, bạn có thể phát hành hệ thống xác thực khuôn mặt này ở bất kỳ đâu trên thế giới mà không phải đối mặt với các vấn đề về quyền riêng tư. Bạn có thể đọc bài viết này để biết thêm về các phương pháp hay nhất về quyền riêng tư của FaceIO.

Bảo mật FaceIO

Bảo mật của một ứng dụng web là một chủ đề quan trọng cần thảo luận và xem xét. Với tư cách là nhà phát triển, bạn chịu trách nhiệm bảo mật cho người dùng của trang web hoặc ứng dụng.

FaceIO tuân theo một số nguyên tắc bảo mật quan trọng và nghiêm túc để bảo vệ dữ liệu người dùng. FaceIO băm tất cả dữ liệu khuôn mặt duy nhất của người dùng cùng với trọng tải mà chúng tôi đã chỉ định trước đó. Vì vậy, thông tin được lưu trữ không là gì ngoài một số chuỗi ngẫu nhiên không thể được thiết kế ngược lại.

FaceIO phác thảo một số nguyên tắc bảo mật rất quan trọng cho các nhà phát triển. Hướng dẫn bảo mật của họ tập trung vào việc thêm mã pin mạnh để bảo vệ dữ liệu người dùng. FaceIO cũng từ chối những khuôn mặt được che để không ai có thể mạo danh người khác.

Kết luận

Nếu bạn đã đọc đến đây, cảm ơn bạn đã dành thời gian và nỗ lực. Hãy chắc chắn làm theo cùng với hướng dẫn thực hành để bạn có thể nắm bắt đầy đủ chủ đề.

Dự án sẽ có thể tiếp cận được nếu bạn làm theo tất cả các bước. Chúc một ngày tốt lành.

Cách xác thực người dùng bằng tính năng nhận dạng khuôn mặt trong React.js

1.Những gì bạn sẽ học trong hướng dẫn này

2.Các loại hệ thống xác thực người dùng khác nhau

Xác thực dựa trên mật khẩu email

Xác thực điện thoại

Xác thực dựa trên OAuth

Xác thực liên kết ma thuật

Xác thực nhận dạng khuôn mặt