Création d'un tableau de bord sécurisé pour les employés avec authentification faciale : un didacticiel Next.js complet

Êtes-vous prêt à révolutionner la gestion de votre lieu de travail ? Dans ce didacticiel complet, nous approfondissons la création d'un tableau de bord des employés de pointe qui exploite l'authentification faciale. Nous utiliserons certains des outils les plus populaires en matière de développement Web : Next.js, FACEIO et Shadcn UI. À la fin de ce guide, vous disposerez d'un tableau de bord élégant et sécurisé qui donnera à vos employés l'impression de vivre dans le futur !

Ce dont vous aurez besoin avant de commencer

Avant de plonger dans le vif du sujet, assurons-nous que vous avez tous vos canards d'affilée :

• Node.js installé sur votre machine
• npm ou fil (selon celui qui fait flotter votre bateau)

Vous avez tout ça ? Super! Mettons ce spectacle en route.

Monter votre projet : les premières étapes

Étape 1 : lancer votre projet Next.js

Tout d'abord, créons notre projet Next.js. Ouvrez votre terminal et tapez ces mots magiques :

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

Quelques questions vous seront posées. Voici comment y répondre :

• Dactylographié ? Bon sang oui !
• ESLint ? Absolument !
• CSS Tailwind ? Vous pariez !
• répertoire src/ ? Non, ça va.
• Routeur d'application ? Oui, s'il vous plaît !
• Personnaliser l'alias d'importation par défaut ? Nous allons laisser de côté celui-ci.

Étape 2 : Rassembler vos outils

Maintenant, récupérons tous les cadeaux dont nous avons besoin. Exécutez cette commande pour installer nos dépendances :

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

Étape 3 : Configurer votre sauce secrète

Créez un fichier appelé .env.local à la racine de votre projet. C'est ici que nous conserverons notre identifiant secret d'application FACEIO :

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

N'oubliez pas de remplacer « votre-super-secret-faceio-app-id » par votre véritable identifiant d'application FACEIO. Gardez-le en sécurité !

Étape 4 : Structure des fichiers

La structure de votre projet devrait ressembler à ceci :

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

Étape 5 : Améliorer le CSS Tailwind

Il est temps de relooker Tailwind. Mettez à jour votre fichier tailwind.config.js avec cette configuration sophistiquée :

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

Construire le cœur de votre tableau de bord

Étape 1 : Création du composant FaceAuth

Créons la star de notre émission : le composant FaceAuth. Créez un nouveau fichier app/components/FaceAuth.tsx et collez ce 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<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;

Étape 2 : Création du composant EmployeeDashboard

Maintenant, créons le tableau de bord que nos employés verront. Créer 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<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;

Étape 3 : Rassembler le tout

Enfin, mettons à jour notre page principale pour montrer notre travail acharné. Mettre à jour app/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>
  );
}

Maintenant, configurons la mise en page qui enveloppera l'intégralité de notre application. Ajoutez ce 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 (
    <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>
  )
}

Cette mise en page est comme la charpente d'une maison : elle fournit une structure à l'ensemble de votre application. Il comprend un en-tête avec le nom de votre entreprise, une zone de contenu principale où votre tableau de bord apparaîtra et un pied de page. De plus, il met en place une magie SEO avec des métadonnées !

Principales pratiques de confidentialité et de sécurité pour l'intégration de FACEIO

Confidentialité dès la conception

• Utilisez les contrôles d'accès, le consentement de l'utilisateur et les options de désinscription pour protéger la confidentialité.

Consentement significatif

• Assurez-vous que les utilisateurs sont conscients de la collecte de données.
• Offrir la liberté de choix et le contrôle de leurs données.
• Autoriser la révocation du consentement et la suppression des données à tout moment.

Meilleures pratiques

• Obtenir un consentement clair et approprié, notamment pour les mineurs.
• Rendre les demandes de consentement faciles à trouver et à comprendre.
• Évitez l'inscription automatique et les inscriptions non autorisées.
• Avertissez les utilisateurs avant de collecter des données biométriques.
• Suivez les exigences légales en matière de confidentialité des données.

Sécurité des données

• Supprimer les données utilisateur lors de la suppression du compte.
• Maintenir de solides pratiques de conservation et d'élimination des données.
• Mettez en œuvre et révisez régulièrement les mesures de sécurité.

Pour plus de détails, reportez-vous aux meilleures pratiques FACEIO.

Considérations clés en matière de sécurité pour l'intégration de FACEIO

La sécurité dès la conception

• La sécurité des applications est essentielle pour préserver la confiance des utilisateurs.
• Suivez les meilleures pratiques de sécurité de FACEIO pour atténuer les risques.

Fonctionnalités de sécurité de base

1. Rejeter les codes PIN faibles

   • Empêchez les codes PIN faibles comme 0000 ou 1234.
   • Par défaut : Non.

2. Empêcher les inscriptions en double

   • Empêche les utilisateurs de s'inscrire plusieurs fois.
   • Par défaut : Non.

3. Protéger contre les Deep-Fakes

   • Détecte et bloque les tentatives d'usurpation d'identité.
   • Par défaut : Non.

4. Interdire les inscriptions mineures

   • Empêche les utilisateurs de moins de 18 ans de s'inscrire.
   • Par défaut : Non.

5. Exiger un code PIN pour l'authentification

   • Nécessite un code PIN pour chaque authentification.
   • Par défaut : Oui.

6. Appliquer les codes PIN uniques

   • Garantit que le code PIN de chaque utilisateur est unique.
   • Par défaut : Non.

7. Ignorer les visages masqués

   • Rejete les visages sous un mauvais éclairage ou partiellement masqués.
   • Par défaut : Oui.

8. Rejeter les en-têtes manquants

   • Bloque l'instanciation sans en-têtes HTTP appropriés.
   • Par défaut : Oui.

9. Restreindre l'instanciation

   • Limites à des domaines et pays spécifiques.
   • Par défaut : Non.

10. Activer les webhooks

    • Notifie votre backend des événements FACEIO.
    • Par défaut : Non.

Pour plus de détails, reportez-vous aux meilleures pratiques de sécurité FACEIO.

Applications du monde réel : où pouvez-vous l’utiliser ?

Maintenant que nous avons créé ce superbe tableau de bord, vous vous demandez peut-être : "Où puis-je l'utiliser dans le monde réel ?" Eh bien, laissez-moi vous dire que les possibilités sont infinies ! Voici quelques idées :

1. Gestion de bureau : dites adieu aux cartes perforées de la vieille école ! Ce système peut révolutionner la façon dont vous suivez les présences, contrôlez l'accès aux différentes zones de votre bureau et gérez les informations sur les employés.

2. Systèmes de sécurité : imaginez un monde où votre bureau est à Fort Knox, mais sans tracas. Ce système de reconnaissance faciale peut être la pierre angulaire d'un protocole de sécurité robuste.

3. Kiosques de service client : imaginez ceci : un client se présente à un kiosque, il le reconnaît instantanément et fournit un service personnalisé. Ce n'est plus de la science-fiction !

Quelle est la prochaine étape ? Le ciel est la limite !

Félicitations, magicien de la technologie ! Vous venez de créer un tableau de bord des employés de pointe avec authentification faciale. Mais pourquoi s'arrêter là ? La beauté de ce système est sa flexibilité. Voici quelques idées pour passer au niveau supérieur :

• Mettre en œuvre des notifications en temps réel pour les mises à jour importantes
• Ajouter des fonctionnalités de reporting détaillées pour les RH
• Intégrez-vous à d'autres systèmes comme les outils de paie ou de gestion de projet

N'oubliez pas que dans le monde de la technologie, la seule limite est votre imagination (et peut-être votre consommation de caféine).

Alors, qu'en pensez-vous ? Êtes-vous prêt à faire évoluer votre lieu de travail vers le futur ? Essayez ce projet et dites-moi comment ça se passe. J'aimerais connaître vos expériences, les fonctionnalités intéressantes que vous ajoutez ou les défis que vous rencontrez en cours de route.

Bon codage, et que votre reconnaissance faciale ne vous confonde jamais avec votre usine de bureau !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!