Membina Papan Pemuka Pekerja Selamat dengan Pengesahan Muka: Tutorial Komprehensif Next.js

Adakah anda bersedia untuk merevolusikan pengurusan tempat kerja anda? Dalam tutorial komprehensif ini, kami menyelami lebih dalam untuk mencipta papan pemuka pekerja terkini yang memanfaatkan pengesahan muka. Kami akan menggunakan beberapa alatan paling hangat dalam pembangunan web: Next.js, FACEIO dan Shadcn UI. Pada penghujung panduan ini, anda akan mempunyai papan pemuka yang kemas dan selamat yang akan membuatkan pekerja anda berasa seperti mereka akan hidup pada masa hadapan!

Perkara yang Anda Perlukan Sebelum Kami Bermula

Sebelum kami menyelam, mari pastikan anda mempunyai semua itik anda berturut-turut:

• Node.js dipasang pada mesin anda
• npm atau benang (yang mana mengapungkan bot anda)

Dapatkan semua itu? Hebat! Jom tayangkan persembahan ini di jalan raya.

Menyediakan Projek Anda: Langkah Pertama

Langkah 1: Memulakan Projek Next.js Anda

Perkara pertama dahulu, mari buat projek Next.js kami. Buka terminal anda dan taip perkataan ajaib ini:

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

Anda akan ditanya beberapa soalan. Begini cara menjawabnya:

• Skrip Jenis? Heck ya!
• ESLint? Sudah tentu!
• Css Tailwind? Anda bertaruh!
• src/ direktori? Nah, kami baik.
• Penghala Apl? Ya, sila!
• Sesuaikan alias import lalai? Kami akan meneruskan yang ini.

Langkah 2: Mengumpul Alat Anda

Sekarang, jom dapatkan semua barang yang kami perlukan. Jalankan arahan ini untuk memasang kebergantungan kami:

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

Langkah 3: Sediakan Sos Rahsia Anda

Buat fail bernama .env.local dalam akar projek anda. Di sinilah kami akan menyimpan ID apl FACEIO rahsia kami:

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

Ingat untuk menggantikan 'id-faceio-app-id-super-rahsia anda' dengan ID aplikasi FACEIO anda yang sebenar. Pastikan ia selamat!

Langkah 4: Struktur Fail

Struktur projek anda sepatutnya kelihatan seperti ini:

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

Langkah 5: Sprucing Up Tailwind CSS

Masa untuk memberi Tailwind ubah suai. Kemas kini fail tailwind.config.js anda dengan konfigurasi mewah ini:

/** @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")],
}

Membina Hati Papan Pemuka Anda

Langkah 1: Menghasilkan Komponen FaceAuth

Mari kita cipta bintang rancangan kami - komponen FaceAuth. Buat apl/komponen/FaceAuth.tsx fail baharu dan tampal dalam kod ini:

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<FaceAuthProps> = ({ 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: 'employee@example.com',
            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 (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>Facial Authentication</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Button id="enroll-btn" variant="outline" className="w-full">
          Enroll New Employee
        </Button>
        <Button id="auth-btn" variant="default" className="w-full">
          Authenticate
        </Button>
      </CardContent>
    </Card>
  );
};

export default FaceAuth;

Langkah 2: Membina Komponen Papan Pemuka Pekerja

Sekarang, mari buat papan pemuka yang akan dilihat oleh pekerja kami. Buat apl/komponen/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<EmployeeData | null>(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 (
    <div className="space-y-6">
      {!isAuthenticated ? (
        <FaceAuth onSuccessfulAuth={handleSuccessfulAuth} />
      ) : (
        <>
          <Card>
            <CardHeader>
              <CardTitle>Employee Profile</CardTitle>
            </CardHeader>
            <CardContent className="flex items-center space-x-4">
              <Avatar className="h-20 w-20" src={employeeData?.photoUrl} alt={employeeData?.name} />
              <div>
                <h2 className="text-2xl font-bold">{employeeData?.name}</h2>
                <p className="text-gray-500">{employeeData?.position}</p>
                <Badge variant="outline">{employeeData?.department}</Badge>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Quick Actions</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Button className="w-full">Check-in</Button>
              <Button className="w-full" variant="secondary">Request Leave</Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Attendance Records</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Date</TableHead>
                    <TableHead>Time In</TableHead>
                    <TableHead>Time Out</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {mockAttendanceData.map((record, index) => (
                    <TableRow key={index}>
                      <TableCell>{record.date}</TableCell>
                      <TableCell>{record.timeIn}</TableCell>
                      <TableCell>{record.timeOut}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
};

export default EmployeeDashboard;

Langkah 3: Menyatukan Semuanya

Akhir sekali, mari kemas kini halaman utama kami untuk menunjukkan kerja keras kami. Kemas kini apl/page.tsx:

import EmployeeDashboard from './components/EmployeeDashboard';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4">
      <EmployeeDashboard />
    </main>
  );
}

Sekarang, mari kita sediakan reka letak yang akan membungkus keseluruhan apl kita. Tambahkan kod ini: 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 (
    <html lang="en">
      <body className={inter.className}>
        <header className="bg-primary text-white p-4">
          <h1 className="text-2xl font-bold">Faceio Solutions</h1>
        </header>
        <main className="container mx-auto p-4">
          {children}
        </main>
        <footer className="bg-gray-100 text-center p-4 mt-8">
          <p>&copy; 2024 Faceio . All rights reserved.</p>
        </footer>
      </body>
    </html>
  )
}

Reka letak ini seperti bingkai rumah - ia menyediakan struktur untuk keseluruhan apl anda. Ia termasuk pengepala dengan nama syarikat anda, kawasan kandungan utama tempat papan pemuka anda akan dipaparkan dan pengaki. Selain itu, ia menyediakan beberapa keajaiban SEO dengan metadata!

Privasi Utama dan Amalan Keselamatan untuk Integrasi FACEIO

Privasi oleh Reka Bentuk

• Gunakan kawalan akses, persetujuan pengguna dan pilihan menarik diri untuk melindungi privasi.

Persetujuan Bermakna

• Pastikan pengguna mengetahui pengumpulan data.
• Tawarkan kebebasan memilih dan kawalan ke atas data mereka.
• Benarkan pembatalan persetujuan dan pemadaman data pada bila-bila masa.

Amalan Terbaik

• Dapatkan persetujuan yang jelas dan sewajarnya, terutamanya untuk kanak-kanak bawah umur.
• Jadikan permintaan persetujuan mudah dicari dan difahami.
• Elakkan pendaftaran automatik dan pendaftaran tanpa kebenaran.
• Beritahu pengguna sebelum mengumpul data biometrik.
• Ikuti keperluan privasi data undang-undang.

Keselamatan Data

• Padamkan data pengguna selepas pemadaman akaun.
• Kekalkan pengekalan data dan amalan pelupusan yang kukuh.
• Melaksanakan dan menyemak perlindungan keselamatan dengan kerap.

Untuk butiran lanjut, rujuk Amalan Terbaik FACEIO.

Pertimbangan Keselamatan Utama untuk Integrasi FACEIO

Keselamatan mengikut Reka Bentuk

• Keselamatan aplikasi adalah penting untuk memelihara kepercayaan pengguna.
• Ikuti amalan terbaik keselamatan FACEIO untuk mengurangkan risiko.

Ciri Keselamatan Teras

1. Tolak PIN Lemah

   • Halang PIN lemah seperti 0000 atau 1234.
   • Lalai: Tidak.

2. Halang Pendaftaran Pendua

   • Menghalang pengguna daripada mendaftar beberapa kali.
   • Lalai: Tidak.

3. Lindungi Terhadap Pemalsuan Dalam

   • Mengesan dan menyekat percubaan menipu.
   • Lalai: Tidak.

4. Haramkan Pendaftaran Kecil

   • Sekat pengguna bawah 18 tahun daripada mendaftar.
   • Lalai: Tidak.

5. Memerlukan PIN untuk Pengesahan

   • Memerlukan kod PIN untuk setiap pengesahan.
   • Lalai: Ya.

6. Kuatkuasakan PIN Unik

   • Memastikan setiap PIN pengguna adalah unik.
   • Lalai: Tidak.

7. Abaikan Wajah Kabur

   • Buang muka di bawah pencahayaan yang kurang baik atau separa bertopeng.
   • Lalai: Ya.

8. Tolak Pengepala Hilang

   • Menyekat instantiasi tanpa pengepala HTTP yang betul.
   • Lalai: Ya.

9. Hadkan Semerta

   • Had kepada domain dan negara tertentu.
   • Lalai: Tidak.

10. Dayakan Webhooks

    • Memberitahu bahagian belakang anda tentang acara FACEIO.
    • Lalai: Tidak.

Untuk butiran lanjut, rujuk Amalan Terbaik Keselamatan FACEIO.

Aplikasi Dunia Nyata: Di Mana Anda Boleh Menggunakan Ini?

Memandangkan kami telah membina papan pemuka yang hebat ini, anda mungkin tertanya-tanya, "Di manakah saya boleh menggunakan ini di dunia nyata?" Baiklah, saya beritahu anda, kemungkinannya tidak berkesudahan! Berikut ialah beberapa idea:

1. Pengurusan Pejabat: Ucapkan selamat tinggal kepada kad tebuk sekolah lama! Sistem ini boleh merevolusikan cara anda menjejaki kehadiran, mengawal akses ke kawasan berlainan di pejabat anda dan mengurus maklumat pekerja.

2. Sistem Keselamatan: Bayangkan dunia di mana pejabat anda adalah Fort Knox, tetapi tanpa kerumitan. Sistem pengecaman muka ini boleh menjadi asas kepada protokol keselamatan yang teguh.

3. Kiosk Perkhidmatan Pelanggan: Bayangkan ini - pelanggan berjalan ke kios, ia mengenali mereka serta-merta dan menyediakan perkhidmatan yang diperibadikan. Ia bukan fiksyen sains lagi!

Apa Seterusnya? Langit adalah Hadnya!

Tahniah, ahli sihir teknologi! Anda baru sahaja membina papan pemuka pekerja yang canggih dengan pengesahan muka. Tetapi mengapa berhenti di sini? Keindahan sistem ini ialah fleksibilitinya. Berikut ialah beberapa idea untuk membawanya ke peringkat seterusnya:

• Laksanakan pemberitahuan masa nyata untuk kemas kini penting
• Tambah ciri pelaporan terperinci untuk HR
• Sepadukan dengan sistem lain seperti senarai gaji atau alatan pengurusan projek

Ingat, dalam dunia teknologi, satu-satunya had adalah imaginasi anda (dan mungkin pengambilan kafein anda).

Jadi, apa pendapat anda? Adakah anda bersedia untuk membawa tempat kerja anda ke masa hadapan? Cuba projek ini dan beritahu saya bagaimana ia berjalan. Saya ingin mendengar tentang pengalaman anda, sebarang ciri hebat yang anda tambahkan atau sebarang cabaran yang anda hadapi sepanjang perjalanan.

Selamat pengekodan, dan semoga pengecaman wajah anda tidak pernah salah mengira anda sebagai kilang pejabat anda!

Atas ialah kandungan terperinci Membina Papan Pemuka Pekerja Selamat dengan Pengesahan Muka: Tutorial Komprehensif Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!