Cách xác thực người dùng qua nhận dạng khuôn mặt trong ứng dụng web của bạn

Xác thực là một khía cạnh rất quan trọng của ứng dụng web của bạn. Nếu bạn đang cung cấp một dịch vụ hoặc bán một số sản phẩm cho người dùng, bạn nên theo dõi người dùng để tham khảo trong tương lai. Tất cả điều này chỉ có thể thực hiện được nếu bạn có một hệ thống xác thực tại chỗ.

Nhưng sử dụng công cụ phù hợp với công việc cũng rất cần thiết. Trong quá khứ, xác thực dựa trên email và mật khẩu là phổ biến nhất và được sử dụng rộng rãi. Nhưng cùng với thời gian, một khái niệm mới gọi là OAuth đã được giới thiệu khi các công nghệ lớn xuất hiện với cơ sở người dùng khổng lồ. Trường hợp bạn là chủ sở hữu của trang web tin cậy nhà cung cấp OAuth xác thực người dùng, đổi lại, nhà cung cấp OAuth cung cấp cho bạn thông tin chi tiết về người dùng.

Xác thực dựa trên OAuth rất đơn giản cho người dùng. Họ chỉ phải duy trì một tài khoản với nhà cung cấp OAuth và sử dụng tài khoản này để đăng nhập vào tất cả các trang web khác. Nhưng luôn có sự tin tưởng tham gia vào quá trình OAuth.

Sau một thời gian, xác thực không cần mật khẩu đã xuất hiện. Trong quá trình này, khi bạn nhập tên người dùng hoặc email của mình, họ sẽ gửi cho bạn một liên kết qua thư. Nếu bạn dán liên kết vào trình duyệt, bạn sẽ tự động được xác thực và đăng nhập. Ví dụ phổ biến nhất về xác thực không cần mật khẩu là khi bạn nhấp vào liên kết gửi ma thuật để đăng nhập vào hackernoon.com .

Với sự tiến bộ của Trí tuệ nhân tạo (AI) và máy học (ML), các kỹ thuật nhận dạng khuôn mặt đang trở nên phổ biến rộng rãi. Theo thời gian, khi các bộ dữ liệu sẽ lớn hơn, độ chính xác của mô hình AI cũng sẽ tăng lên. Ngày nay, chúng ta cũng có thể sử dụng các kỹ thuật nhận dạng khuôn mặt để xác thực người dùng trong ứng dụng web của mình.

Trong bài viết này, chúng tôi đang xây dựng một ứng dụng đơn giản, để trình bày cách xác thực người dùng bằng nhận dạng khuôn mặt. Trong quá trình này, chúng tôi sẽ sử dụng các API của FaceIO.

Tại sao chúng ta cần xác thực dựa trên nhận dạng khuôn mặt

Nhu cầu nhận dạng khuôn mặt là gấp nhiều lần. Tôi đang cố gắng đưa ra một số điểm ở đây một cách ngắn gọn. Hãy nhớ đọc bài báo đến cuối để có được sự hiểu biết đầy đủ về khái niệm và hướng dẫn triển khai chi tiết.

1. Nhanh hơn các phương pháp truyền thống : Phương thức xác thực bằng khuôn mặt rất nhanh hơn so với các phương thức xác thực truyền thống. Bạn chỉ cần nhấp vào một nút để bắt đầu quá trình xác thực và trong vòng một phần nghìn giây, nó đã hoàn tất. Trong các phương pháp dựa trên mật khẩu email truyền thống, bạn phải thêm từng dòng thông tin chi tiết của mình. Đôi khi sau khi đăng nhập thành công, bạn được chào đón bằng hình ảnh xác thực. Thật là khó chịu làm sao!
2. Không yêu cầu phần cứng chuyên dụng : Yêu cầu duy nhất của kỹ thuật xác thực khuôn mặt là một máy ảnh. Tất cả các điện thoại thông minh hiện nay đều có camera theo mặc định. Tất cả các máy tính để bàn cũng có một số loại webcam. Do đó, người dùng không cần bất kỳ phần cứng chuyên dụng nào để sử dụng dịch vụ này.
3. Giảm mạo danh trên các nền tảng xã hội : Tính năng quan trọng nhất của xác thực khuôn mặt là nó có thể ngăn chặn việc mạo danh. Trên các nền tảng xã hội, nhiều người tạo tài khoản giả mạo bằng cách mạo danh ai đó. Điều này có thể rất rủi ro nếu chủ tài khoản giả mạo phạm một số loại tội phạm kỹ thuật số. Với sự trợ giúp của nhận dạng khuôn mặt, các nền tảng xã hội có thể nhận ra liệu tài khoản mà ai đó đang cố truy cập có thực sự thuộc về họ hay không.
4. Giảm bot và tập lệnh tự động : Bots và tập lệnh tự động được giới thiệu để giúp mọi người thoát khỏi các công việc lặp đi lặp lại. Nhưng mọi người cũng sử dụng chúng theo một cách khác để gửi thư rác cho người khác. Hàng ngày, bạn bắt gặp nhiều bot và tập lệnh tự động trong cuộc sống kỹ thuật số của mình mà bạn thậm chí không nhận ra hoặc nhận ra. Để ngăn chặn điều này, một số trang web sử dụng hình ảnh xác thực. Sử dụng nhận dạng khuôn mặt, vấn đề này cũng có thể được giải quyết vì bot không có khuôn mặt để xác thực 😄.
5. Tập trung vào quyền riêng tư: Quyền riêng tư là một chủ đề rất nhạy cảm đối với tất cả chúng ta. Tất cả chúng ta đều có chút lo lắng khi ai đó yêu cầu bạn xác thực bằng dữ liệu khuôn mặt của bạn. Nhưng vì chúng tôi đang sử dụng FaceIO trong hướng dẫn này, quá trình xác thực hoàn toàn được mã hóa từ đầu đến cuối. Trong phần phụ trợ, chúng chỉ lưu trữ hàm băm của các đặc điểm trên khuôn mặt của bạn. Chúng hoàn toàn tuân thủ GDPR và CCPA. Vì vậy, bạn có thể tin tưởng để họ lưu trữ dữ liệu của bạn một cách an toàn.

Thực hiện một dự án xác thực khuôn mặt

Bây giờ chúng ta sẽ tạo một ứng dụng web xác thực khuôn mặt. Dự án này bao gồm tất cả các bit và phần và tất cả những gì bạn cần biết về cách triển khai xác thực dựa trên nhận dạng khuôn mặt trong ứng dụng web của bạn.

Tôi đang giải thích quy trình từng bước. Bạn có thể lấy mã nguồn đầy đủ ở đây . Đảm bảo nhận được khóa API miễn phí để theo dõi.

Cài đặt phụ thuộc bắt buộc

Tạo một thư mục trống và bên trong nó, tạo một index.html . Bạn cũng có thể thêm một tệp CSS riêng biệt, nhưng để đơn giản, tôi sẽ giữ nó ở mức tối thiểu.

Nếu bạn đang sử dụng VSCode để phát triển, bạn có thể sử dụng máy chủ trực tiếp để phục vụ các tệp tĩnh của mình.

Bên trong index.html của bạn, hãy thêm đánh dấu HTML cơ bản này, để bắt đầu.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>

FaceIO cung cấp một thư viện javascript rất tiện dụng để tương tác với các mô hình AI của họ. Điều này làm cho cuộc sống của chúng tôi dễ dàng hơn đến mức chúng tôi có thể triển khai tính năng nhận dạng khuôn mặt chỉ bằng một vài dòng mã. Để thêm thư viện javascript FaceIO, chúng tôi sử dụng CDN (mạng phân phối nội dung) của chúng bên trong thẻ body của tài liệu HTML của chúng tôi.

 <body> <script src="https://cdn.faceio.net/fio.js"></script> </body>

Bây giờ, hãy tạo một tệp index.js và liên kết tệp bên trong thẻ body sau FaceIO CDN.

 <body> <script src="https://cdn.faceio.net/fio.js"></script> <script src="./index.js"></script> </body>

Bây giờ chúng ta hãy tạo 2 hàm trợ giúp để dễ dàng hơn trong quá trình phát triển của chúng ta. Một là để đăng ký người dùng (như tính năng đăng ký) và một là để xác thực (như tính năng đăng nhập).

Đăng ký người dùng

Việc đăng ký người dùng rất đơn giản vì thư viện javascript mà FaceIO cung cấp. Bên trong đánh dấu HTML, hãy thêm một nút có id="enroll" . Chúng tôi truy cập nút này bên trong tệp javascript của chúng tôi bằng phương thức getElementbyID .

Bây giờ khởi tạo đối tượng FaceIO bên trong index.js . Bạn phải thêm ID công khai của dự án FaceIO của mình. Bạn có thể lấy ID công khai được liệt kê trong bảng điều khiển dự án của mình.

 const faceio = new faceIO("<Your Public ID here");

Hãy thêm người nghe sự kiện vào nút đăng ký. Khi ai đó nhấp vào nút, chúng tôi thực hiện phương thức đăng ký của đối tượng faceIO. Phương thức đăng ký này có nhiều tham số tùy chọn.

1. locale là ngôn ngữ địa phương của người dùng.
2. permissions timeout tương ứng với số giây để chờ người dùng cấp quyền truy cập vào máy ảnh.
3. Thời gian chờ là số giây chờ người dùng chấp nhận các điều khoản và điều kiện của termsTimeout .
4. idleTimeout là tổng số giây phải chờ trong khi cố gắng nhận dạng khuôn mặt.
5. replyTimeout là số giây phải chờ để nhận dữ liệu khuôn mặt đã xử lý từ nút FaceIO.
6. userConcent là một boolean đại diện cho việc người dùng đồng ý quét khuôn mặt của họ. Nếu bạn đã nhận được sự đồng ý từ người dùng thì bạn có thể đặt giá trị thành true .
7. payload : Bên trong chức năng đăng ký, bạn có thể thêm tải trọng tùy chọn. Tải trọng phải là một đối tượng giá trị quan trọng. Bạn có thể sử dụng tính năng tải trọng này để đính kèm địa chỉ email của mình hoặc bất kỳ thông tin nào khác liên quan đến người dùng.

Trong trường hợp của chúng tôi, chức năng đăng ký trông giống như thế này.

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

Khi bạn chạy chức năng này, một cửa sổ bật lên sẽ xuất hiện trước mặt người dùng. Cửa sổ bật lên này chứa các điều khoản và điều kiện. Nếu người dùng chấp nhận các điều khoản và điều kiện, nó sẽ yêu cầu quyền truy cập máy ảnh. Nếu người dùng cấp quyền truy cập camera, FaceIO sẽ quét khuôn mặt.

Mô hình FaceIO tìm kiếm các đặc điểm khuôn mặt độc đáo để phân biệt người dùng với những người khác. Sau khi hoàn tất, bạn phải thêm mã PIN được gắn vào dữ liệu khuôn mặt của bạn. Mã PIN này rất quan trọng đối với người dùng và giữ nó ở nơi an toàn hơn.

Khi tất cả các bước này được hoàn thành, FaceIO trả về một đối tượng userInfo cho người dùng. Đối tượng này chứa ID khuôn mặt người dùng là số nhận dạng, giới tính và độ tuổi duy nhất trên toàn cầu. Giới tính và tuổi tác không chính xác lắm, vì chúng được dự đoán bởi một mô hình AI.

Bạn có thể sử dụng lưu trữ faceID này trong chương trình phụ trợ của mình. Khi người dùng muốn đăng nhập, bạn có thể đối sánh faceID này để xác thực người dùng.

Trong quá trình làm việc, nếu có bất kỳ lỗi nào xảy ra, FaceIO có một danh sách đầy đủ các thông báo lỗi. Nếu người dùng không cho phép truy cập máy ảnh thì lỗi fioErrCode.PERMISSION_REFUSED sẽ xuất hiện.

Nếu người dùng không chấp nhận các điều khoản và điều kiện bật lên thì lỗi fioErrCode.TERMS_NOT_ACCEPTED sẽ được máy chủ ném ra.

Xác thực người dùng

Để bắt đầu quy trình xác thực, hãy thêm một nút trong đánh dấu HTML của bạn với id="authenticate" . Truy cập nút này bên trong index.js với sự trợ giúp của phương thức getElementbyID .

Bây giờ khi người dùng nhấn nút này, chúng tôi bắt đầu quy trình xác thực. Chức năng xác thực rất đơn giản.

Hàm Authenticate lấy tham số permissionTimeout , nhàn idleTimeout , replyTimeout và locale giống như hàm register enroll() trước đó. Mã trông giống như thế này.

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

Khi người dùng nhấn nút xác thực, một màn hình bật lên tương tự như trong trường hợp đăng ký chức năng. Nó có quyền truy cập máy ảnh của bạn và quét khuôn mặt của bạn. Sau khi quét, nó sẽ yêu cầu mã PIN mà bạn đã nhập trong thời gian đăng ký.

Nếu bạn cung cấp mã pin chính xác, FaceIO sẽ trả lại FaceData và trọng tải mà bạn đã chỉ định trong quy trình đăng ký.

Bạn cũng có thể kiểm tra kỹ quy trình xác thực bằng cách khớp với faceID trong máy chủ của mình.

Bây giờ quy trình xác thực của chúng tôi đã hoàn thành. Bạn có thể thấy nó dễ dàng hơn việc triển khai quy trình xác thực mật khẩu email. Tất cả công việc nặng nhọc được thực hiện bởi máy chủ FaceIO và mô hình AI của nó, với tư cách là nhà phát triển, bạn chỉ phải thêm logic ứng dụng để sửa đổi quy trình xác thực và trải nghiệm của nó.

Các tính năng quyền riêng tư

FaceIO có một hệ thống bảo vệ quyền riêng tư mạnh mẽ. Hãy để tôi liệt kê một số trong số họ.

1. Nó tuân thủ GDPR và CCPA : Dịch vụ FaceIO hoàn toàn tuân thủ GDPR và CCPA. GDPR là viết tắt của Quy định bảo vệ dữ liệu chung. Nó được thông qua vào năm 2018 và nó yêu cầu tất cả các doanh nghiệp phải bảo vệ dữ liệu cá nhân và quyền riêng tư của người dùng.

   
   

   CCPA là viết tắt của Đạo luật Bảo vệ Người tiêu dùng California cho phép người dùng kiểm soát nhiều hơn đối với dữ liệu của họ. Nếu bạn đang hoạt động trong những khu vực đó, bạn không phải lo lắng.

   
   

2. Nó chỉ lưu trữ các hàm băm : FaceIO chỉ lưu trữ các hàm băm của các đặc điểm trên khuôn mặt của bạn. Nó không lưu trữ bất kỳ dữ liệu thuần túy nào và lưu trữ thông tin tối thiểu nhất có thể. Thư viện phía máy khách và các tiện ích không xử lý bất kỳ dữ liệu sinh trắc học nào. Tất cả quá trình được thực hiện ở phần phụ trợ.

Câu hỏi thường gặp

Trình duyệt FaceIO có bất khả tri không?

FaceIO hoàn toàn là một trình duyệt bất khả tri. Nó có thể chạy bất kỳ trình duyệt nào bao gồm chrome, firefox và safari. Vì tất cả quá trình xử lý được thực hiện tại máy chủ, FaceIO chỉ cần quyền truy cập máy ảnh của bạn để chạy.

Nếu bạn đang sử dụng một số trình duyệt bảo mật bằng cách tắt javascript, hãy đảm bảo bật chúng. Như FaceIO cần sử dụng javascript để nói chuyện với máy chủ.

Chúng ta không thể xây dựng mô hình của mình từ đầu?

Có, bạn có thể tạo mô hình của mình từ đầu và triển khai tính năng xác thực khuôn mặt trong ứng dụng web của mình. Nhưng đối với điều này, bạn nên hiểu sâu về trí tuệ nhân tạo và quy trình học máy.

Vì hầu hết các nhà phát triển web không xuất thân từ nền tảng này, nên việc sử dụng dịch vụ của người khác để triển khai một tính năng là một động thái thông minh hơn là phát minh lại bánh xe.

Có những giải pháp khác hiện có trên thị trường mà bạn có thể khám phá. Một là AWS Rekognition. Dịch vụ này được cung cấp bởi AWS và hoạt động rất giống với FaceIO. Điều thú vị là bạn có thể chọn AWS Rekognition bên trong bảng điều khiển FaceIO của mình.

Có, nó là có thể. Bây giờ bạn có thể chọn những gì bạn muốn và đi cho nó.

Ẩn ID công khai

Như chúng ta có thể thấy trong phần mã hóa, bạn phải cung cấp ID công khai của mình trong quá trình khởi tạo đối tượng FaceIO. Nếu bạn muốn, bạn có thể ẩn nó bằng cách sử dụng các biến môi trường. Nếu bạn đang sử dụng khung giao diện người dùng hoặc hệ thống xây dựng, bạn có thể thêm động các giá trị này tại thời điểm xây dựng.

Nếu bạn đang sử dụng NextJS, bạn có thể sử dụng tệp .env.local để lưu thông tin đăng nhập nhạy cảm của mình.

Nếu bạn không sử dụng bất kỳ khuôn khổ nào, bạn có thể sử dụng Vite. Vite hỗ trợ các biến môi trường. Nó xây dựng và nén dự án vanilla js của bạn để triển khai nhanh hơn. Chỉ cần tạo một tệp .env , đặt tất cả thông tin đăng nhập của bạn vào đó và bạn đã hoàn tất. Đừng quên đặt tệp .env của bạn bên trong danh sách .gitignore của bạn.

Sự kết luận

Nếu bạn đọc bài báo đến thời điểm này, tôi nghĩ bạn thích bài viết này. Hãy chia sẻ nó với các đồng nghiệp của bạn. Nếu bạn muốn đưa ra bất kỳ phản hồi nào, tôi có sẵn trên Twitter dưới dạng hrishikshpathak . Tiếp tục đọc, tiếp tục học hỏi.