Trung Quân
  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Top Posts
Lộ trình học lập trình Web từ con...
Nhận diện, xác thực khuôn mặt với ReactJS...
Tạo hiệu ứng thẻ bài Magic với HTML...
NodeJS viết API gửi Email với OAuth2 và...
Tạo hiệu ứng Parallax đơn giản chỉ với...
Git – GitHub • Học Git thực tế...
Tạo một trang GitHub Profile phiên bản vũ...
Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...
Cài đặt NVM, NodeJS và GIT trên MacOS...
Thuật toán Tìm phần tử bị lặp đầu...

Trung Quân

  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Developer Tips

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

by trungquandev September 25, 2022September 25, 2022
written by trungquandev September 25, 2022September 25, 2022
face-recognition-reactjs-faceio-trungquandev-featured-img

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 ”

Khóa học lập trình làm việc thực tế:

Nếu các bạn thấy bài viết của mình có ích thì hãy ủng hộ mình bằng cách tham khảo bài viết giới thiệu khóa học lập trình MERN Stack Miễn Phí cực kỳ chất lượng và chính chủ dưới đây của mình nhé, cảm ơn các bạn ^^
KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG
mern-stack-course-trungquandev
faceiogitjavascriptmernnode.jsreactjstrungquandev
0 comment
0
FacebookTwitterGoogle +Pinterest
trungquandev

previous post
Tạo hiệu ứng thẻ bài Magic với HTML • CSS • JS thuần
next post
Lộ trình học lập trình Web từ con số 0

Related Posts

Cài đặt NVM, NodeJS và GIT trên MacOS...

February 19, 2022

Tạo hiệu ứng thẻ bài Magic với HTML...

August 14, 2022

Tạo hiệu ứng Parallax đơn giản chỉ với...

May 4, 2022

Cài đặt WSL2 để sử dụng Ubuntu dễ...

November 29, 2021

Tạo một trang GitHub Profile phiên bản vũ...

March 12, 2022

Git – GitHub • Học Git thực tế...

March 13, 2022

Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...

February 19, 2022

Bát Chánh Đạo

batchanhdao-trungquandev

About Me

About Me

Trung Quân

Software Engineer at Pod Foods

Academy Of Cryptography Techniques

"I am a dog and cat lover, love green, love to read books, write blog and oil painting ..."

Read my CV → https://cv.trungquandev.com/

My Maxim Live

A bit of fragrance clings to the hand that gives flowers!

For Vietnamese young generation

Đừng bao giờ làm người khổng lồ trong tư tưởng nhưng chỉ là thằng lùn trong hành động.

Keep in touch

Facebook Instagram Linkedin Youtube Email Github

Fanpage Facebook

Facebook

Học lập trình “MERN Stack Cơ Bản” qua ứng dụng thực tế

mern-stack-trello-app-trungquandev


  Khóa học lập trình MERN Stack (NodeJS, ReactJS, ExpressJS, MongoDB) cực kỳ chất lượng và Miễn Phí do chính mình hướng dẫn nhé:
  MERN Stack - xây dựng ứng dụng quản lý công việc dạng Kanban tương tự Trello.

Học lập trình “MERN Stack Nâng Cao” qua ứng dụng thực tế

mern-stack-advanced-trello-app-trungquandev


  * Học lập trình MERN Stack Nâng Cao (NodeJS, ReactJS, ExpressJS, MongoDB). Đây là một khóa học mà mình đã làm cực kỳ tâm huyết, với phong cách dạy lập trình làm dự án thực tế, chuyên nghiệp. Để các bạn có một hành trang kiến thức vững chắc cho hành trình làm lập trình viên trong tương lai nhé.
  Lập Trình MERN Stack Nâng Cao - Học Thực Tế Để Đi Làm

YouTube: Trungquandev Official

youtube-channel-trungquandev-official


  - Các bạn tham khảo kênh YouTube chính thức của mình và ủng hộ mình bằng cách tặng mình một lượt Đăng Ký Kênh nha.
Cảm ơn các bạn ^^

  YouTube: TRUNGQUANDEV OFFICIAL

© Copyright

Bản quyền:
  © DMCA (Digital Millennium Copyright Act)


DMCA.com Protection Status

License

Giấy phép nội dung:
  Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 Quốc tế.


Giấy phép Creative Commons

Other links

Portfolio của mình:
  https://cv.trungquandev.com

Lập trình cuộc sống:
  https://laptrinhcuocsong.com

Nhiều bài viết hay về javascript:
  https://codetheworld.io

  • Facebook
  • Youtube
  • GitHub
  • Linkedin
  • Instagram

@2022 - trungquandev.com. Since 2016 - All Right Reserved. Developed by Trung Quân Dev