Чи то керування командою дистанційно, чи то навчання групи студентів, наявність системи відвідувань може значно спростити процес відстеження того, хто активний, а хто ні. Ефективна система відвідувань не тільки покращує ведення обліку, але й мотивує учасників команди чи студентів регулярно реєструвати своє відвідування.
Щоб зробити процес ще більш безпечним, ви можете вийти за межі традиційних методів аутентифікації, таких як паролі чи QR-коди. Додавши Біометричну Аутентифікацію за допомогою Обличчя (Facial Authentication), ви забезпечите швидке та безфродове відстеження відвідувань.
У цій статті ми побудуємо Систему Відвідувань за допомогою React та FACEIO для аутентифікації за обличчям.
Це веб-додаток для системи відвідувань, яку ми будемо будувати.
Звучить цікаво? Почнемо!
Попередні вимоги
Перед тим як почати, переконайтесь, що у вас є наступне:
- Базове розуміння JavaScript та React.js.
- Обліковий запис на FACEIO.
- Node.js та npm для керування залежностями.
- Встановлений FACEIO NPM пакет.
- Текстовий редактор або IDE, наприклад, VS Code.
Що таке FACEIO?
FACEIO — це фреймворк для біометричної аутентифікації за допомогою обличчя, який можна інтегрувати на будь-якому вебсайті за допомогою JavaScript для аутентифікації користувачів за допомогою розпізнавання обличчя замість використання пароля чи OTP коду.
Побудова системи відвідувань
У цьому розділі ми пройдемо через процес налаштування React проєкту та інтеграції бібліотеки FaceIO для відстеження відвідувань на основі біометричної аутентифікації.
Налаштування React проєкту
Щоб почати, відкрийте термінал і створіть новий React додаток за допомогою наступної команди:
npx create-react-app attendance-system
Це створить новий React проєкт у директорії з назвою attendance-system. Перейдіть у цю директорію, щоб почати налаштовувати проєкт.
cd attendance-system
Далі встановіть SDK для FACEIO:
npm install faceio
Це встановить бібліотеку FaceIO та її залежності, що дозволить вам використовувати функції розпізнавання обличчя у вашій системі відвідувань.
Щоб використовувати SDK FaceIO, необхідно встановити його окремо. Це можна зробити за допомогою наступної команди:
npm install @faceio/fiojs
Ви також можете встановити SDK FaceIO за допомогою цієї команди:
npm install @faceio/fiojs@latest
Для UI веб-додатку ми використовуємо Shadcn UI, тому для встановлення необхідних залежностей виконайте наступну команду:
npm install react shadcn react-dom react-router-dom react-hook-form @hookform/resolvers yup
Тепер ми можемо створити функції реєстрації та входу для нашої системи, але перед цим ініціалізуємо FaceIO на нашій сторінці за допомогою хука useEffect.
useEffect(() => {
const initializeFaceIO = () => {
try {
const faceioInstance = new faceIO("My Public_ID");
setFaceio(faceioInstance);
} catch (err: any) {
setError("Не вдалося ініціалізувати FaceIO: " + err.message);
}
};
initializeFaceIO();
}, []);
Компонент аутентифікації
Тут ми налаштовуємо публічний ключ FACEIO в конструкторі faceIO.
Цей компонент забезпечує біометричну аутентифікацію користувачів за допомогою розпізнавання обличчя та реєстрації за допомогою SDK FaceIO.
Користувачі можуть реєструвати свої біометричні дані та безпечно аутентифікуватися за допомогою FaceIO.
У директорії src/pages створіть файл Auth.tsx і введіть весь код із цього GitHub репозиторію.
Деякі фрагменти коду тут показують, як ми визначаємо схему валідації для інтеграції з FACEIO за допомогою yup у константі SignupSchema на const SignupSchema = yup.object().shape({});.
Yup — це будівельник схем для парсингу значень під час виконання та валідації.
Також ми визначаємо інтерфейси за допомогою FaceIODetails, а потім оголошуємо конструктор FACEIO глобально, використовуючи Public ID з вашої консолі FACEIO, та ініціалізуємо екземпляр FaceIO за допомогою useEffect
// Define validation schema using yup
const SignupSchema = yup.object().shape({
name: yup.string().required("Ім'я обов'язкове"),
email: yup
.string()
.email("Невірна адреса електронної пошти")
.required("Електронна пошта обов'язкова"),
});
// Define interfaces
interface FaceIODetails {
gender: string;
age: number;
}
interface FaceIOEnrollResponse {
facialId: string;
timestamp: string;
details: FaceIODetails;
}
interface FaceIOAuthenticateResponse {
facialId: string;
payload: Record;
}
interface FaceIO {
enroll(options: {
locale: string;
payload: { name: string; email: string };
}): Promise;
authenticate(options: { locale: string }): Promise;
}
// Declare the faceIO constructor globally
declare const faceIO: new (publicId: string) => FaceIO;
type Iuser = {
name: string;
email: string;
};
const Auth: React.FC = () => {
const [faceio, setFaceio] = useState(null);
const [error, setError] = useState(null);
const navigate = useNavigate();
// Initialize FaceIO instance
useEffect(() => {
const initializeFaceIO = () => {
try {
const faceioInstance = new faceIO("fioac691");
setFaceio(faceioInstance);
} catch (err: any) {
setError("Не вдалося ініціалізувати FaceIO: " + err.message);
}
};
initializeFaceIO();
}, []);
Основні можливості
- Використовує
Reactзreact-hook-formдля обробки форм таyupдля валідації схем. - Інтегрує SDK FaceIO для реєстрації та аутентифікації.
- Обробка помилок для різних кодів помилок, специфічних для FaceIO.
- Перенаправлення користувачів на панель керування після успішної аутентифікації чи реєстрації.
Компонент CheckIn та CheckOut
Цей компонент надає функціональність для відстеження відвідувань, включаючи часи реєстрації та виїзду.
У директорії src/pages ми створюємо цю функціональність у файлі CheckInOut.tsx з таким кодом:
type AttendanceLogEntry = {
type: "Check-In" | "Check-Out";
time: string;
};
export default function CheckInOut() {
const [lastCheckIn, setLastCheckIn] = useState("--:-- --");
const [lastCheckOut, setLastCheckOut] = useState("--:-- --");
const [attendanceLog, setAttendanceLog] = useState([]);
const [isCheckedIn, setIsCheckedIn] = useState(false);
const getCurrentTime = (): string => {
return new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true });
};
const handleCheckIn = (): void => {
const currentTime = getCurrentTime();
setLastCheckIn(currentTime);
setIsCheckedIn(true);
setAttendanceLog((prevLog) => [...prevLog, { type: "Check-In", time: currentTime }]);
};
const handleCheckOut = (): void => {
const currentTime = getCurrentTime();
setLastCheckOut(currentTime);
setIsCheckedIn(false);
setAttendanceLog((prevLog) => [...prevLog, { type: "Check-Out", time: currentTime }]);
};
Отримайте повний код в цьому репозиторії.
Компонент Dashboard
З опціями навігації, цей компонент показує інформацію, специфічну для користувача, таку як поточний час, дата та ID працівника.
Для панелі керування введіть цей код у файл src/pages/Dashboard.tsx
import { Button } from "../Components/ui/button";
import { Layout } from "../Components/Layout";
import { Card, CardContent, CardHeader, CardTitle } from "../Components/ui/card";
import { Clock, Calendar, User } from "lucide-react";
import { useNavigate } from "react-router-dom";
export default function Dashboard() {
const navigate = useNavigate();
return (
Ласкаво просимо, John Doe
Дата
{new Date().toLocaleDateString()}
Час
{new Date().toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})}
ID працівника
EMP1001
navigate("/checkinout")}> Check In/Out {/* navigate("/attendanceLog")}> Переглянути журнал відвідувань */}
); } ``` - Тепер давайте реалізуємо функції Реєстрації та Вхід ``` // Функція реєстрації
const handleEnroll = async (user: Iuser) => {
if (!faceio) {
setError("Екземпляр FaceIO не ініціалізовано.");
return;
}
try {
const response = await faceio.enroll({
locale: "auto",
payload: {
name: user.name,
email: user.email,
},
});
alert(
`Унікальний ID обличчя: ${response.facialId}\n` +
`Дата реєстрації: ${response.timestamp}\n` +
`Стать: ${response.details.gender}\n` +
`Приблизний вік: ${response.details.age}`
);
navigate("/dashboard");
} catch (err: any) {
handleError(err.message || "Невідома помилка");
}
};
// Функція входу
const handleAuthenticate = async () => {
if (!faceio) {
setError("Екземпляр FaceIO не ініціалізовано.");
return;
}
try {
const response = await faceio.authenticate({
locale: "auto",
});
console.log(
`Унікальний ID обличчя: ${response.facialId}\nPayload: ${JSON.stringify(
response.payload
)}`
);
navigate("/dashboard");
} catch (err: any) {
handleError(err.message || "Невідома помилка");
}
}; ``` Щоб підвищити надійність нашої [інтеграції FACEIO](https://faceio.net/integration-guide), ми можемо реалізувати централізовану функцію обробки помилок.
Нижче наведено приклад такої функції, яку ми назвали `handleError`, що відображає конкретні коди помилок у зручні для користувача повідомлення.
const handleError = (errCode: string) => {
const errorMessages: Record = {
PERMISSIONREFUSED: "Доступ до відеопотоку камери був відхилений кінцевим користувачем.",
NOFACESDETECTED: "Не було виявлено облич під час процесу реєстрації або автентифікації.",
UNRECOGNIZEDFACE: "Неузгоджене обличчя у цьому додатку Facial Index.",
MANYFACES: "Під час сканування було виявлено два або більше облич.",
FACEDUPLICATION: "Користувач вже зареєстрований. Не можна зареєструватися знову.",
MINORSNOTALLOWED: "Неповнолітні не можуть зареєструватися в цьому додатку.",
PADATTACK: "Детектовано атаку на підробку (Spoof) під час процесу сканування.",
FACEMISMATCH: "Лінії обличчя не співпадають.",
WRONGPINCODE: "Невірний PIN-код під час автентифікації.",
PROCESSINGERR: "Помилка на стороні сервера.",
UNAUTHORIZED: "Ваш додаток не авторизований. Перевірте ваш публічний ID.",
TERMSNOTACCEPTED: "Умови використання не були прийняті.",
UINOTREADY: "Віджет FaceIO не зміг бути доданий до DOM.",
SESSIONEXPIRED: "Термін дії клієнтської сесії завершився. Перезапустіть процес.",
TIMEOUT: "Час виконання операції вичерпано.",
TOOMANYREQUESTS: "Забагато запитів. Оновіть ваш додаток для підвищення потужності.",
EMPTYORIGIN: "Заголовок Origin або Referer HTTP запиту порожній або відсутній.",
FORBIDDDENORIGIN: "Домену заборонено використовувати FaceIO.",
FORBIDDDENCOUNTRY: "Країні заборонено використовувати FaceIO.",
SESSIONINPROGRESS: "Інша сесія вже триває.",
NETWORKIO: "Помилка з’єднання з мережею при використанні FaceIO.",
};
const message = errorMessages[errCode] || "Сталася невідома помилка.";
setError(message);
console.error("FaceIO Error:", message);
};
```
Далі, щоб інтегрувати FACEIO в інтерфейс користувача, ми розробили просту форму для реєстрації з полями для Імені та Email та кнопками для Реєстрації та Входу.
Ось JSX код для форми:
Check In
Name {errors.name && (
{errors.name.message}
)}
Email {errors.email && (
{errors.email.message}
)}
Register
Login
{error &&
{error}
}
Об'єднуємо все разом
Щоб з'єднати всі функціональності, введіть цей код у файл App.tsx в директорії src.
import Auth from './pages/Auth';
import CheckInOut from './pages/CheckInOut';
import Dashboard from './pages/Dashboard';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
} />
}/>
}/>
);
}
export default App;
Налаштування FACEIO
Зареєструйтесь на FACEIO і увійдіть в консоль. Щоб інтегрувати FACEIO у додаток, який ви створюєте, вам потрібно створити додаток і отримати деталі, такі як ID додатка та API ключ, які будуть знаходитися у вашому файлі env та підключатимуться до FACE при запуску додатка.
Дотримуйтесь цих кроків, щоб почати.
У консоль FACEIO перейдіть у розділ Dashboard у лівій панелі та натисніть кнопку NEW FACEIO APPLICATION
Це відкриє майстра додатка FACEIO, де ви введете деталі нового додатка, такі як:
- Alias додатка: Це назва додатка (щось, що ви зможете легко запам'ятати) і це обов'язковий крок для продовження.
- URL політики конфіденційності додатка: Це рекомендовано, якщо у вас є доступний документ.
- URL умов використання додатка: Це необов'язково.
Після введення назви натискайте кнопку NEXT, як показано нижче.
Наступний крок — вибір рушія для розпізнавання обличчя для вашого додатка, з яким ви хочете інтегрувати FACEIO.
Рушій для розпізнавання облич — це критичний ключовий компонент, який відповідає за відображення обличчя кожного зареєстрованого користувача в реальному часі у математичний вектор ознак, що також відомий як біометричний хеш, який зберігається в ізольованому бінарному індексі.
Для цього використання ми будемо використовувати PixLab, тому виберіть його, натиснувши на модальне вікно.
Далі прокрутіть вниз і виберіть регіон хмарного сховища для індексу облич та метаданих додатка, а потім натисніть кнопку NEXT, щоб продовжити.
Наступний крок — переглянути стандартні налаштування безпеки, які рекомендуються для більшості додатків.
Ви можете ознайомитись з Посібником з найкращих практик безпеки FACEIO для загального огляду практик безпеки та рекомендацій.
Після того як ви переглянете налаштування безпеки, натисніть кнопку NEXT, щоб продовжити.
Також через консоль FACEIO, в менеджері додатків, ви можете активувати опцію, яка забороняє тому ж користувачу реєструватись більше одного разу при використанні вашого додатка.
Наступний крок після цього (не хвилюйтесь, майже все) — налаштування віджету FACEIO.
Ви можете вибрати тему, яка відповідатиме дизайну вашого сайту, а також додати посилання на URL вашого сайту чи логотипу додатка — це буде відображатися в верхньому лівому куті віджету, коли ваш додаток працює, і користувач захоче розпочати процес аутентифікації за допомогою обличчя.
Потім перевірте введену інформацію перед поданням і створенням нового додатку FACEIO та виберіть відповідний тарифний план для цього додатку, враховуючи ваш бюджет.
Наступним кроком погодьтеся з умовами обслуговування та натисніть кнопку CREATE FACEIO APPLICATION
Після цього з'явиться модальне вікно успішного створення нового додатку FACEIO.
Далі завантажиться інформаційна панель для цього нового додатку з даними, такими як Public ID додатку, API Key, посібники з інтеграції та іншою необхідною інформацією.
Після створення вашого додатку, просто імплементуйте
fio.jsна вашому вебсайті або веб-додатку, щоб впровадити аутентифікацію за обличчям для ваших користувачів.
Скопіюйте Public ID додатку і вставте його в файл env в кореневій директорії проєкту.
Public_Id = "your-app-ID"
Запуск додатку
Щоб запустити веб-додаток, введіть команду npm run dev у вашому терміналі, а потім відкрийте це посилання у вашому браузері: http://localhost:5173/
Після цього завантажиться система відвідувань, як показано нижче:
Введіть ваше ім’я та електронну пошту, а потім натисніть Register, що ініціює процес аутентифікації за обличчям через FACEIO перед тим, як ви зможете доступитись до інших частин системи відвідувань і зафіксувати своє відвідування.
Вам також буде запропоновано встановити PIN-код для додатку.
Після успішної аутентифікації через FACEIO буде записано та відображено унікальний ID обличчя, дату реєстрації, стать та орієнтовний вік користувача вашого додатку.
Це додає додатковий рівень безпеки до додатку та запобігає реєстрації декількох відвідувань одним і тим же користувачем.
Тепер ви можете переглядати інформаційну панель та натискати кнопку Check In/Out для реєстрації вашого відвідування.
Система відвідувань потім реєструє дату, час та ID співробітника для входу.
Тепер натисніть кнопку Check In, щоб зареєструвати вхід.
Після цього ви можете переглянути журнал відвідувань, як показано нижче
Ви також можете вийти, натиснувши кнопку Check Out
І ось, ми створили систему відвідувань з аутентифікацією за обличчям для кращої безпеки.
З цим додатком ви можете додатково розширити його для відстеження відвідувань співробітників в організації, як це передбачено у випадку використання цього додатку.
Клонувати репозиторій
git clone https://github.com/Tabintel/Attendance_system.git
Встановіть залежності
npm install
Потім запустіть додаток і відкрийте URL у вашому браузері.
http://localhost:5173/
npm run dev
Ви також можете спробувати додаток за допомогою живого посилання тут
Підсумки
У цій статті ми побудували просту систему відвідувань для аутентифікації за обличчям, використовуючи React та FACEIO. Використовуючи передові функції безпеки FACEIO, ми створили безпечне та захищене від шахрайства рішення, яке можна розширити для використання в робочих місцях, школах або будь-якому середовищі, де необхідне відстеження відвідувань.
Також відвідайте форум FACEIO для підтримки та обговорень від спільноти.
Щасливого кодування!
Перекладено з: Building an Attendance System Powered by Face Recognition Using React and FACEIO