」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 使用臉部身份驗證建立安全的員工儀表板:綜合 Next.js 教程

使用臉部身份驗證建立安全的員工儀表板:綜合 Next.js 教程

發佈於2024-07-31
瀏覽:715

Are you ready to revolutionize your workplace management? In this comprehensive tutorial, we're diving deep into creating a state-of-the-art employee dashboard that leverages facial authentication. We'll be using some of the hottest tools in web development: Next.js, FACEIO, and Shadcn UI. By the end of this guide, you'll have a sleek, secure dashboard that'll make your employees feel like they're living in the future!

What You'll Need Before We Start

Before we dive in, let's make sure you've got all your ducks in a row:

  • Node.js installed on your machine
  • npm or yarn (whichever floats your boat)

Got all that? Great! Let's get this show on the road.

Faceio Authentication

Setting Up Your Project: The First Steps

Step 1: Kickstarting Your Next.js Project

First things first, let's create our Next.js project. Open up your terminal and type in these magic words:

npx create-next-app@latest faceio-app
cd faceio-app

You'll be asked a few questions. Here's how to answer them:

  • TypeScript? Heck yes!
  • ESLint? Absolutely!
  • Tailwind CSS? You bet!
  • src/ directory? Nah, we're good.
  • App Router? Yes, please!
  • Customize default import alias? We'll pass on this one.

Step 2: Gathering Your Tools

Now, let's grab all the goodies we need. Run this command to install our dependencies:

npm install @faceio/fiojs @shadcn/ui class-variance-authority clsx tailwind-merge

Step 3: Setting Up Your Secret Sauce

Create a file called .env.local in your project's root. This is where we'll keep our secret FACEIO app ID:

NEXT_PUBLIC_FACEIO_APP_ID=your-super-secret-faceio-app-id

Remember to replace 'your-super-secret-faceio-app-id' with your actual FACEIO application ID. Keep it safe!

Step 4: File Structure

Your project structure should look like this:

faceio-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── components/
│       ├── FaceAuth.tsx
│       └── EmployeeDashboard.tsx
├── public/
├── .env.local
├── next.config.js
├── package.json
├── tsconfig.json
└── tailwind.config.js

Step 5: Sprucing Up Tailwind CSS

Time to give Tailwind a makeover. Update your tailwind.config.js file with this fancy configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './app/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Building the Heart of Your Dashboard

Step 1: Crafting the FaceAuth Component

Let's create the star of our show - the FaceAuth component. Create a new file app/components/FaceAuth.tsx and paste in this code:

import { useEffect } from 'react';
import faceIO from '@faceio/fiojs';
import { Button, Card, CardHeader, CardTitle, CardContent } from '@shadcn/ui';
import { useToast } from '@shadcn/ui';

interface FaceAuthProps {
  onSuccessfulAuth: (data: any) => void;
}

const FaceAuth: React.FC = ({ onSuccessfulAuth }) => {
  const { toast } = useToast();

  useEffect(() => {
    const faceio = new faceIO(process.env.NEXT_PUBLIC_FACEIO_APP_ID);

    const enrollNewUser = async () => {
      try {
        const userInfo = await faceio.enroll({
          locale: 'auto',
          payload: {
            email: '[email protected]',
            pin: '12345',
          },
        });
        toast({
          title: "Success!",
          description: "You're now enrolled in the facial recognition system!",
        });
        console.log('User Enrolled!', userInfo);
      } catch (errCode) {
        toast({
          title: "Oops!",
          description: "Enrollment failed. Please try again.",
          variant: "destructive",
        });
        console.error('Enrollment Failed', errCode);
      }
    };

    const authenticateUser = async () => {
      try {
        const userData = await faceio.authenticate();
        toast({
          title: "Welcome back!",
          description: "Authentication successful.",
        });
        console.log('User Authenticated!', userData);
        onSuccessfulAuth({
          name: 'John Doe',
          position: 'Software Developer',
          department: 'Engineering',
          photoUrl: 'https://example.com/john-doe.jpg',
        });
      } catch (errCode) {
        toast({
          title: "Authentication failed",
          description: "Please try again or enroll.",
          variant: "destructive",
        });
        console.error('Authentication Failed', errCode);
      }
    };

    const enrollBtn = document.getElementById('enroll-btn');
    const authBtn = document.getElementById('auth-btn');

    if (enrollBtn) enrollBtn.onclick = enrollNewUser;
    if (authBtn) authBtn.onclick = authenticateUser;

    return () => {
      if (enrollBtn) enrollBtn.onclick = null;
      if (authBtn) authBtn.onclick = null;
    };
  }, [toast, onSuccessfulAuth]);

  return (
    
      
        Facial Authentication
      
      
        
        
      
    
  );
};

export default FaceAuth;

Step 2: Building the EmployeeDashboard Component

Now, let's create the dashboard that our employees will see. Create app/components/EmployeeDashboard.tsx:

import { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@shadcn/ui';
import { Button, Avatar, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@shadcn/ui';
import FaceAuth from './FaceAuth';

interface EmployeeData {
  name: string;
  position: string;
  department: string;
  photoUrl: string;
}

const EmployeeDashboard: React.FC = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [employeeData, setEmployeeData] = useState(null);

  const handleSuccessfulAuth = (data: EmployeeData) => {
    setIsAuthenticated(true);
    setEmployeeData(data);
  };

  const mockAttendanceData = [
    { date: '2024-07-14', timeIn: '09:00 AM', timeOut: '05:30 PM' },
    { date: '2024-07-13', timeIn: '08:55 AM', timeOut: '05:25 PM' },
    { date: '2024-07-12', timeIn: '09:05 AM', timeOut: '05:35 PM' },
  ];

  return (
    
{!isAuthenticated ? ( ) : ( Employee Profile

{employeeData?.name}

{employeeData?.position}

{employeeData?.department}
Quick Actions Attendance Records Date Time In Time Out {mockAttendanceData.map((record, index) => ( {record.date} {record.timeIn} {record.timeOut} ))}
> )}
); }; export default EmployeeDashboard;

Step 3: Bringing It All Together

Finally, let's update our main page to show off our hard work. Update app/page.tsx:

import EmployeeDashboard from './components/EmployeeDashboard';

export default function Home() {
  return (
    
); }

Now, let's set up the layout that'll wrap our entire app. Add this code: app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Employee Dashboard with Facial Authentication',
  description: 'A cutting-edge employee dashboard featuring facial recognition for secure authentication and efficient workplace management.',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        

Faceio Solutions

{children}

© 2024 Faceio . All rights reserved.

) }

This layout is like the frame of a house - it provides structure for your entire app. It includes a header with your company name, a main content area where your dashboard will appear, and a footer. Plus, it sets up some SEO magic with metadata!

Key Privacy and Security Practices for FACEIO Integration

Privacy by Design

  • Use access controls, user consent, and opt-out options to protect privacy.

Meaningful Consent

  • Ensure users are aware of data collection.
  • Offer freedom of choice and control over their data.
  • Allow revocation of consent and data deletion anytime.

Best Practices

  • Obtain clear and appropriate consent, especially for minors.
  • Make consent requests easy to find and understand.
  • Avoid auto-enrollment and unauthorized enrollments.
  • Notify users before collecting biometric data.
  • Follow legal data privacy requirements.

Data Security

  • Delete user data upon account deletion.
  • Maintain strong data retention and disposal practices.
  • Implement and review security safeguards regularly.

For more details, refer to FACEIO Best Practices.

Key Security Considerations for FACEIO Integration

Security by Design

  • Application security is essential to preserve user trust.
  • Follow FACEIO's security best practices to mitigate risks.

Core Security Features

  1. Reject Weak PINs

    • Prevent weak PINs like 0000 or 1234.
    • Default: No.
  2. Prevent Duplicate Enrollments

    • Stops users from enrolling multiple times.
    • Default: No.
  3. Protect Against Deep-Fakes

    • Detects and blocks spoofing attempts.
    • Default: No.
  4. Forbid Minor Enrollments

    • Blocks users under 18 from enrolling.
    • Default: No.
  5. Require PIN for Authentication

    • Requires PIN code for each authentication.
    • Default: Yes.
  6. Enforce Unique PINs

    • Ensures each user's PIN is unique.
    • Default: No.
  7. Ignore Obscured Faces

    • Discards faces under poor lighting or partially masked.
    • Default: Yes.
  8. Reject Missing Headers

    • Blocks instantiation without proper HTTP headers.
    • Default: Yes.
  9. Restrict Instantiation

    • Limits to specific domains and countries.
    • Default: No.
  10. Enable Webhooks

    • Notifies your backend of FACEIO events.
    • Default: No.

For more details, refer to FACEIO Security Best Practices.

Real-World Applications: Where Can You Use This?

Now that we've built this awesome dashboard, you might be wondering, "Where can I use this in the real world?" Well, let me tell you, the possibilities are endless! Here are just a few ideas:

  1. Office Management: Say goodbye to old-school punch cards! This system can revolutionize how you track attendance, control access to different areas of your office, and manage employee information.

  2. Security Systems: Imagine a world where your office is Fort Knox, but without the hassle. This facial recognition system can be the cornerstone of a robust security protocol.

  3. Customer Service Kiosks: Picture this - a customer walks up to a kiosk, it recognizes them instantly, and provides personalized service. It's not science fiction anymore!

What's Next? The Sky's the Limit!

Congratulations, tech wizard! You've just built a cutting-edge employee dashboard with facial authentication. But why stop here? The beauty of this system is its flexibility. Here are some ideas to take it to the next level:

  • Implement real-time notifications for important updates
  • Add detailed reporting features for HR
  • Integrate with other systems like payroll or project management tools

Remember, in the world of tech, the only limit is your imagination (and maybe your caffeine intake).

So, what do you think? Are you ready to bring your workplace into the future? Give this project a try and let me know how it goes. I'd love to hear about your experiences, any cool features you add, or any challenges you face along the way.

Happy coding, and may your facial recognition never mistake you for your office plant!

版本聲明 本文轉載於:https://dev.to/vyan/building-a-secure-employee-dashboard-with-facial-authentication-a-comprehensive-nextjs-tutorial-2c4g?1如有侵犯,請聯絡study_golang@163 .com刪除
最新教學 更多>
  • 我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    將我的加密庫從mcrypt升級到openssl 問題:是否可以將我的加密庫從McRypt升級到OpenSSL?如果是這樣,如何? 答案:是的,可以將您的Encryption庫從McRypt升級到OpenSSL。 可以使用openssl。 附加說明: [openssl_decrypt()函數要求...
    程式設計 發佈於2025-02-28
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...
    程式設計 發佈於2025-02-28
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-02-28
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-02-28
  • 如何使用FormData()處理多個文件上傳?
    如何使用FormData()處理多個文件上傳?
    )處理多個文件輸入時,通常需要處理多個文件上傳時,通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...
    程式設計 發佈於2025-02-28
  • 如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    postgresql:為每個唯一標識符在postgresql中提取最後一行,您可能需要遇到與數據集合中每個不同標識的信息相關的信息。考慮以下數據:[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息,您可以在操作員上使用Postgres的有效效率: id dat...
    程式設計 發佈於2025-02-28
  • 大批
    大批
    [2 數組是對象,因此它們在JS中也具有方法。 切片(開始):在新數組中提取部分數組,而無需突變原始數組。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    程式設計 發佈於2025-02-28
  • 為什麼我的CSS背景圖像出現?
    為什麼我的CSS背景圖像出現?
    故障排除:CSS背景圖像未出現 ,您的背景圖像儘管遵循教程說明,但您的背景圖像仍未加載。圖像和样式表位於相同的目錄中,但背景仍然是空白的白色帆布。 而不是不棄用的,您已經使用了CSS樣式: bockent {背景:封閉圖像文件名:背景圖:url(nickcage.jpg); 如果您的html,cs...
    程式設計 發佈於2025-02-28
  • 為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    網格超過身體,用100%grid-template-columns 為什麼在grid-template-colms中具有100%的顯示器,當位置設置為設置的位置時,grid-template-colly修復了? 問題: 考慮以下CSS和html: class =“ snippet-code”> ...
    程式設計 發佈於2025-02-28
  • 為什麼PYTZ最初顯示出意外的時區偏移?
    為什麼PYTZ最初顯示出意外的時區偏移?
    與pytz 最初從pytz獲得特定的偏移。例如,亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移: 差異源利用本地化將時區分配給日期,使用了適當的時區名稱和偏移量。但是,直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone(&#...
    程式設計 發佈於2025-02-28
  • 如何檢查對像是否具有Python中的特定屬性?
    如何檢查對像是否具有Python中的特定屬性?
    方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例,其中嘗試訪問不確定屬性會引起錯誤: >>> a = someClass() >>> A.property Trackback(最近的最新電話): 文件“ ”,第1行, attributeError:SomeClass實...
    程式設計 發佈於2025-02-28
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-02-28
  • 為什麼使用Firefox後退按鈕時JavaScript執行停止?
    為什麼使用Firefox後退按鈕時JavaScript執行停止?
    導航歷史記錄問題:JavaScript使用Firefox Back Back 此行為是由瀏覽器緩存JavaScript資源引起的。要解決此問題並確保在後續頁面訪問中執行腳本,Firefox用戶應設置一個空功能。 警報'); }; alert('inline Alert')...
    程式設計 發佈於2025-02-28
  • 對象擬合:IE和Edge中的封面失敗,如何修復?
    對象擬合:IE和Edge中的封面失敗,如何修復?
    解決此問題,我們採用了一個巧妙的CSS解決方案來解決問題:左:50% ; 高度:auto; 寬度:100% ; //對於水平塊 ,使用絕對定位將圖像定位在中心,以object-fit:object-fit:cover in IE和edge消除了問題。現在,圖像將按比例擴展,保持所需的效果而不會失...
    程式設計 發佈於2025-02-28
  • 如何限制動態大小的父元素中元素的滾動範圍?
    如何限制動態大小的父元素中元素的滾動範圍?
    在交互式接口中實現垂直滾動元素的CSS高度限制問題:考慮一個佈局,其中我們具有與用戶垂直滾動一起移動的可滾動地圖div,同時與固定的固定sidebar保持一致。但是,地圖的滾動無限期擴展,超過了視口的高度,阻止用戶訪問頁面頁腳。 $("#map").css({ margin...
    程式設計 發佈於2025-02-28

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3