Nhận diện, xác thực khuôn mặt với ReactJS & FaceIO

Xin chào tất cả các bạn, mình là Trung Quân aka trungquandev như mọi lần :D. Hôm nay mình sẽ hướng dẫn các bạn làm một ứng dụng cực kỳ hay đó là Nhận diện và xác thực khuôn mặt giống như trên nhiều dòng máy điện thoại phổ biến gần đây nhé.
Công nghệ mình áp dụng code trong bài là dùng FaceIO SaaS (Software as a service) cũng như triển khai vào một ứng dụng ReactJS (bật mí cách triển khai trong bài hôm nay cũng sẽ rất hay mà không nhiều bạn biết đâu nha ^^)

“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“

Những nội dung có trong bài:

1. Link hướng dẫn và show demo trên kênh YouTube: Trungquandev Official chính chủ của mình nha.
2. Code luôn thôi chứ không có nhiều lý thuyết gì ở đây cả nhé 😀

---

1. Link hướng dẫn và show demo trên kênh YouTube: Trungquandev Official

---

2. Triển khai code

– Lưu ý quan trọng: Dưới đây mình sẽ chia ra dạng các phần code cần thiết để tiện cho video hướng dẫn ở trên, tiết kiệm thời gian lúc quay video, tập trung vào những kiến thức cốt lõi.
– Vì vậy các bạn vui lòng xem video để có thể dễ dàng code được ứng dụng nhận diện khuôn mặt này như mình hướng dẫn nhé.
– Và Riêng phần giải thích và hướng dẫn code chi tiết thì mình có giải thích luôn trong video trên YouTube rồi nên mình cũng sẽ không viết lại để tránh dài nội dung của bài viết nha.
– Các bạn xem video và đồng thời đăng ký kênh ủng hộ mình nha ^^
– Link: https://youtu.be/ZoxutS_kRC8

Mở đầu bằng việc khởi tạo ứng dụng react bằng create-react-app nhé:
npx create-react-app 8-reactjs-face-authentication

Tiếp theo là file App.js phần giao diện:

return (
  <div className="face-authentication-by-trungquandev flex fdc jcfc aic">
    <h1>Face Authentication using ReactJS & FaceIO</h1>
    <button className="action face-registration" onClick={faceRegistration}>Face Registration</button>
    <button className="action face-sign-in" onClick={faceSignIn}>Face Sign In</button>

    <div className="trungquandev-author">
      <div className="flex aic gap-10 mb-7 author">
        <img className="icon basis-10" alt="trungquandev" src="https://trungquandev.com/wp-content/uploads/2022/09/trungquandev-account-icon-80-80.png" />
        <span className="basis-20">Author:</span>
        <div className="basis-70">Trung Quân (aka Trungquandev)</div>
      </div>
      <div className="flex aic gap-10 mb-7 blog">
        <img className="icon basis-10" alt="trungquandev" src="https://trungquandev.com/wp-content/uploads/2021/05/logo-trungquandev-transparent-bg-192x192-1.png" />
        <span className="basis-20">Blog:</span>
        <div className="basis-70"><a href="https://trungquandev.com" target="_blank" rel="noopener noreferrer">https://trungquandev.com</a></div>
      </div>
      <div className="flex aic gap-10 mb-7 cv">
        <img className="icon basis-10" alt="trungquandev" src="https://trungquandev.com/wp-content/uploads/2022/09/trungquandev-resume-icon-80-80.png" />
        <span className="basis-20">CV:</span>
        <div className="basis-70"><a href="https://cv.trungquandev.com" target="_blank" rel="noopener noreferrer">https://cv.trungquandev.com</a></div>
      </div>
      <div className="flex aic gap-10 mb-7 youtube">
        <img className="icon basis-10" alt="trungquandev" src="https://trungquandev.com/wp-content/uploads/2022/09/trungquandev-youtube-icon-96-96.png" />
        <span className="basis-20">YouTube:</span>
        <div className="basis-70"><a href="https://www.youtube.com/c/TrungquandevOfficial" target="_blank" rel="noopener noreferrer">Trungquandev Official</a></div>
      </div>
      <div className="flex aic gap-10 mb-7 facebook">
        <img className="icon basis-10" alt="trungquandev" src="https://trungquandev.com/wp-content/uploads/2022/09/trungquandev-facebook-icon-96-96.png" />
        <span className="basis-20">Facebook:</span>
        <div className="basis-70"><a href="https://facebook.com/trungquandev" target="_blank" rel="noopener noreferrer">Trung Quân Dev</a></div>
      </div>
      <div className="flex aic gap-10 mb-7 refer-link">
        <img className="icon basis-10" alt="trungquandev" src="https://trungquandev.com/wp-content/uploads/2022/09/trungquandev-link-icon-94-94.png" />
        <span className="basis-20">FaceIO:</span>
        <div className="basis-70"><a href="https://faceio.net/" target="_blank" rel="noopener noreferrer">https://faceio.net</a></div>
      </div>
    </div>
  </div>
)

Tiếp nữa là file App.css làm đẹp giao diện:

* {
  margin: 0;
  padding: 0;
}

.flex { display: flex; }
.fdc { flex-direction: column; }
.jcfc { justify-content: center; }
.aic { align-items: center }
.gap-10 { gap: 10px; }
.basis-10 { flex-basis: 10%; }
.basis-20 { flex-basis: 20%; }
.basis-70 { flex-basis: 70%; }
.mb-7 { margin-bottom: 7px; }

.face-authentication-by-trungquandev {
  height: 100vh;
  width: 100vw;
}

.action {
  cursor: pointer;
  border: none;
  background-color: #00b894;
  padding: 15px 30px;
  border-radius: 5px;
  color: #ffffff;
  margin-top: 20px;
  font-size: 1rem;
  font-weight: bold;
}
.action:hover {
  background-color: #ff9f43;
}

/* My information and credit resources */
.trungquandev-author {
  margin-top: 40px;
  padding: 15px 40px;
  border: 1px solid #b2bec3;
  border-radius: 10px;
  width: 450px;
  max-width: 70%;
  font-size: 1rem;
  line-height: 1.6rem;
  word-break: break-word;
  font-weight: bold;
}

.trungquandev-author a {
  color: inherit;
  text-decoration: none;
  color: #00b894;
}
.trungquandev-author a:hover {
  color: #ff9f43;
}
.trungquandev-author .icon {
  max-width: 30px;
}

Xử lý Load Script của bên thứ ba trong React với Hooks

let faceioInstance = null

useEffect(() => {
	const script = document.createElement('script')
	script.src = '//cdn.faceio.net/fio.js'
	script.async = true
	script.onload = () => loaded()
	document.body.appendChild(script)

	return () => {
		document.body.removeChild(script)
	}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

const loaded = () => {
	console.log(faceIO)
	if (faceIO && !faceioInstance) {
		faceioInstance = new faceIO('your-faceio-app-public-id')
	}
}

Function đăng ký nhận diện một khuôn mặt mới:

const faceRegistration = async () => {
	try {
		const userInfo = await faceioInstance.enroll({
			locale: "auto",
			payload: {
				email: "trungquandev01@gmail.com",
				userId: "170795-id-trungquandev",
				username: "trungquandev",
				website: "https://trungquandev.com"
			},
		})
		console.log(userInfo)
		console.log('Unique Facial ID: ', userInfo.facialId)
		console.log('Enrollment Date: ', userInfo.timestamp)
		console.log('Gender: ', userInfo.details.gender)
		console.log('Age Approximation: ', userInfo.details.age)
	} catch (errorCode) {
		console.log(errorCode)
		handleError(errorCode)
	}
}

Function xác thực, nhận diện một khuôn mặt đã tồn tại trong hệ thống:

const faceSignIn = async () => {
	try {
		console.log(faceioInstance)
		const userData = await faceioInstance.authenticate({
			locale: "auto",
		})
		console.log(userData)

		console.log('Unique Facial ID: ', userData.facialId)
		console.log('PayLoad: ', userData.payload)
	} catch (errorCode) {
		console.log(errorCode)
		handleError(errorCode)
	}
}

Phần xử lý lỗi (Handle Error) – Mình đã phải mở code của bọn FaceIO cũng như kết hợp đọc phần tài liệu hướng dẫn của họ để tìm ra phần xử lý lỗi này và đã giải thích đầy đủ ở trong video rồi nha.

const handleError = (errCode) => {
	// Log all possible error codes during user interaction..
	// Refer to: https://faceio.net/integration-guide#error-codes
	// for a detailed overview when these errors are triggered.
	// const fioErrCode={PERMISSION_REFUSED:1,NO_FACES_DETECTED:2,UNRECOGNIZED_FACE:3,MANY_FACES:4,PAD_ATTACK:5,FACE_MISMATCH:6,NETWORK_IO:7,WRONG_PIN_CODE:8,PROCESSING_ERR:9,UNAUTHORIZED:10,TERMS_NOT_ACCEPTED:11,UI_NOT_READY:12,SESSION_EXPIRED:13,TIMEOUT:14,TOO_MANY_REQUESTS:15,EMPTY_ORIGIN:16,FORBIDDDEN_ORIGIN:17,FORBIDDDEN_COUNTRY:18,UNIQUE_PIN_REQUIRED:19,SESSION_IN_PROGRESS:20},fioState={UI_READY:1,PERM_WAIT:2,PERM_REFUSED:3,PERM_GRANTED:4,REPLY_WAIT:5,PERM_PIN_WAIT:6,AUTH_FAILURE:7,AUTH_SUCCESS:8}
	switch (errCode) {
		case fioErrCode.PERMISSION_REFUSED:
			console.log("Access to the Camera stream was denied by the end user")
			break
		case fioErrCode.NO_FACES_DETECTED:
			console.log("No faces were detected during the enroll or authentication process")
			break
		case fioErrCode.UNRECOGNIZED_FACE:
			console.log("Unrecognized face on this application's Facial Index")
			break
		case fioErrCode.MANY_FACES:
			console.log("Two or more faces were detected during the scan process")
			break
		case fioErrCode.PAD_ATTACK:
			console.log("Presentation (Spoof) Attack (PAD) detected during the scan process")
			break
		case fioErrCode.FACE_MISMATCH:
			console.log("Calculated Facial Vectors of the user being enrolled do not matches")
			break
		case fioErrCode.WRONG_PIN_CODE:
			console.log("Wrong PIN code supplied by the user being authenticated")
			break
		case fioErrCode.PROCESSING_ERR:
			console.log("Server side error")
			break
		case fioErrCode.UNAUTHORIZED:
			console.log("Your application is not allowed to perform the requested operation (eg. Invalid ID, Blocked, Paused, etc.). Refer to the FACEIO Console for additional information")
			break
		case fioErrCode.TERMS_NOT_ACCEPTED:
			console.log("Terms & Conditions set out by FACEIO/host application rejected by the end user")
			break
		case fioErrCode.UI_NOT_READY:
			console.log("The FACEIO Widget code could not be (or is being) injected onto the client DOM")
			break
		case fioErrCode.SESSION_EXPIRED:
			console.log("Client session expired. The first promise was already fulfilled but the host application failed to act accordingly")
			break
		case fioErrCode.TIMEOUT:
			console.log("Ongoing operation timed out (eg, Camera access permission, ToS accept delay, Face not yet detected, Server Reply, etc.)")
			break
		case fioErrCode.TOO_MANY_REQUESTS:
			console.log("Widget instantiation requests exceeded for freemium applications. Does not apply for upgraded applications")
			break
		case fioErrCode.EMPTY_ORIGIN:
			console.log("Origin or Referer HTTP request header is empty or missing")
			break
		case fioErrCode.FORBIDDDEN_ORIGIN:
			console.log("Domain origin is forbidden from instantiating fio.js")
			break
		case fioErrCode.FORBIDDDEN_COUNTRY:
			console.log("Country ISO-3166-1 Code is forbidden from instantiating fio.js")
			break
		case fioErrCode.SESSION_IN_PROGRESS:
			console.log("Another authentication or enrollment session is in progress")
			break
		case fioErrCode.NETWORK_IO:
		default:
			console.log("Error while establishing network connection with the target FACEIO processing node")
			break
	}
}

Kết quả sẽ như demo trong video mình giải thích code trên YouTube rồi nha, nếu bạn nào gặp vấn đề gì thì có thể comment luôn ở video trên kênh, mình sẽ check và support nhé.

(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.)

---

4. Chia sẻ full toàn bộ Source Code của bài hôm nay trên Github

Vậy là kết thúc bài hôm nay mình đã hướng dẫn các bạn làm một tính năng xử lý nhận diện khuôn mặt với ReactJS và FaceIO rồi nha. Các bạn cũng có thể kết hợp tính năng này vào trong một dự án thực tế nào đó cần tới nó hoặc một dự án riêng của các bạn chẳng hạn.

Và ngoài ra nếu bạn nào còn mơ hồ chưa biết một dự án thực tế sẽ authenticate xác thực và lưu trữ người dùng như thế nào thì có thể tham khảo khóa Lập trình MERN Stack Nâng Cao – Học Để Đi Làm này của mình nha.
Ở khóa học này mình sẽ dạy các bạn trực tiếp mọi thứ từ A-Z để tạo ra một trang web phức tạp hoàn chỉnh với nhiều tính năng thực tế, thực tiễn, từ đó các bạn sẽ nâng cao Level Code rất nhanh, thoải mái kiến thức để có thể đi làm nha.

Mình có để full source code của bài hôm nay ở repo này (Thư mục số 8) cho các bạn tham khảo giống như mọi lần, các bạn có thể clone về và làm theo các bước hướng dẫn mà mình có để trong file README nhé, chỉ có vài bước khá dễ dàng thôi.
https://github.com/trungquandev/trungquandev-public-utilities-algorithms

Và nếu thấy bài viết cũng như video bổ ích, hãy ủng hộ mình bằng cách Đăng ký kênh Youtube Trungquandev Official để mình có động lực tiếp tục viết những bài viết hay cũng như ra thêm nhiều video chất lượng hơn nữa nha, cảm ơn các bạn nhiều !!!
https://www.youtube.com/c/TrungquandevOfficial

---

Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – 💻 Trungquandev Official ❤

---

Tham khảo kiến thức, ý tưởng:

https://faceio.net/integration-guide#overview

“Thanks for awesome knowledges.”
“ From author: trungquandev ”