使用 FACEIO 在 Nextjs 应用程序中进行无缝人脸验证

// dashboard.tsx
import react from "react";
import { card, cardheader, cardtitle, cardcontent } from "@/components/ui/card";
import { button } from "@/components/ui/button";
import { fausercircle, falock, facode, fachartbar, fasignoutalt } from 'react-icons/fa';

interface dashboardprops {
  useremail: string;
  onlogout: () => void;
}

const dashboard: react.fc<dashboardprops> = ({ useremail, onlogout }) => {
  return (
    <div classname="max-w-7xl mx-auto p-4 md:p-6 space-y-6">
      <card classname="w-full bg-black text-white">
        <cardheader classname="flex flex-col sm:flex-row items-start sm:items-center justify-between space-y-4 sm:space-y-0">
          <div>
            <cardtitle classname="text-2xl sm:text-3xl font-bold">welcome to faceio</cardtitle>
            <p classname="text-base sm:text-lg mt-2">email: {useremail}</p>
          </div>
          <button 
            variant="secondary" 
            size="sm" 
            onclick={onlogout}
            classname="flex items-center w-full sm:w-auto justify-center mt-8"
          >
            <fasignoutalt classname="mr-2" /> logout
          </button>
        </cardheader>
        <cardcontent>
          <p classname="text-lg sm:text-xl mb-4">you have successfully logged in.</p>
        </cardcontent>
      </card>

      <h2 classname="text-xl sm:text-2xl font-bold text-center my-6">facial authentication for the web</h2>

      <div classname="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <card>
          <cardheader>
            <cardtitle classname="flex items-center text-base sm:text-lg">
              <fausercircle classname="mr-2" /> secure & easy
            </cardtitle>
          </cardheader>
          <cardcontent>
            <p classname="text-sm sm:text-base">cross-browser, secure & easy to implement. passwordless authentication sdks powered by face recognition for web sites & apps.</p>
          </cardcontent>
        </card>

        <card>
          <cardheader>
            <cardtitle classname="flex items-center text-base sm:text-lg">
              <falock classname="mr-2" /> privacy-focused
            </cardtitle>
          </cardheader>
          <cardcontent>
            <p classname="text-sm sm:text-base">your facial data is encrypted and securely stored. we prioritize user privacy and data protection.</p>
          </cardcontent>
        </card>

        <card>
          <cardheader>
            <cardtitle classname="flex items-center text-base sm:text-lg">
              <facode classname="mr-2" /> developer-friendly
            </cardtitle>
          </cardheader>
          <cardcontent>
            <p classname="text-sm sm:text-base">easy integration with clear documentation. get started quickly and implement facial authentication in your projects.</p>
          </cardcontent>
        </card>

        <card>
          <cardheader>
            <cardtitle classname="flex items-center text-base sm:text-lg">
              <fachartbar classname="mr-2" /> analytics & insights
            </cardtitle>
          </cardheader>
          <cardcontent>
            <p classname="text-sm sm:text-base">gain valuable insights into user authentication patterns and improve your applications security.</p>
          </cardcontent>
        </card>
      </div>

      <div classname="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-8">
        <button variant="default" size="lg" classname="w-full sm:w-auto">
          get started →
        </button>
        <button variant="outline" size="lg" classname="w-full sm:w-auto">
          integration guide →
        </button>
        <button variant="secondary" size="lg" classname="w-full sm:w-auto">
          faceio console →
        </button>
      </div>

      <card classname="mt-8 bg-gray-100">
        <cardcontent classname="text-center py-6">
          <p classname="text-base sm:text-lg font-semibold">ready to implement facial authentication in your project?</p>
          <p classname="mt-2 text-sm sm:text-base">check out our documentation and start securing your application today!</p>
        </cardcontent>
      </card>
    </div>
  );
};

export default dashboard;

/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import {
  card,
  cardcontent,
  carddescription,
  cardfooter,
  cardheader,
  cardtitle,
} from "@/components/ui/card";
import { terminal } from "lucide-react";
import { mailicon, checkcircleicon } from "lucide-react";
import { alert, alertdescription, alerttitle } from "@/components/ui/alert";
import { input } from "@/components/ui/input";
import { label } from "@/components/ui/label";
import { button } from "./ui/button";
import faceio from "@faceio/fiojs";
import { useeffect, useref, usestate } from "react";
import link from "next/link";
import { toast } from "sonner";
import dashboard from "./dashboard";

type props = {};

const login: react.fc<props> = ({}) => {
  const faceioref = useref<faceio | null>(null);
  const [email, setemail] = usestate("");
  const [userlogin, setuserlogin] = usestate("");
  const [isloggedin, setisloggedin] = usestate(false);

  const publickey = process.env.next_public_faceio_public_id as string;

  const initialisefaceio = async () => {
    try {
      faceioref.current = new faceio(publickey);
      console.log("faceio initialized successfully");
    } catch (error) {
      console.log(error);
      handleerror(error);
    }
  };

  useeffect(() => {
    initialisefaceio();
  }, []);

  const handleregister = async () => {
    try {
      if (!faceioref.current) {
        console.error("faceio instance is not initialized");
        return;
      }

      await faceioref.current?.enroll({
        userconsent: false,
        locale: "auto",
        payload: { email: `${email}` },
      });
      toast.success("successfully registered user.");
    } catch (error) {
      handleerror(error);
      faceioref.current?.restartsession();
    }
  };

  const handlelogin = async () => {
    try {
      const authenticate = await faceioref.current?.authenticate();
      console.log("user authenticated successfully:", authenticate);
      setuserlogin(authenticate.payload.email);
      setisloggedin(true);
      toast.success("successfully logged in.");
    } catch (error) {
      console.log(error);
      handleerror(error);
    }
  };

  const handlelogout = () => {
    setisloggedin(false);
    setuserlogin("");
    toast.success("successfully logged out.");
  };

  function handleerror(errcode: any) {
    const fioerrs = faceioref.current?.fetchallerrorcodes()!;
    switch (errcode) {
      case fioerrs.permission_refused:
        toast.info("access to the camera stream was denied by the end user");
        break;
      case fioerrs.no_faces_detected:
        toast.info(
          "no faces were detected during the enroll or authentication process"
        );
        break;
      case fioerrs.unrecognized_face:
        toast.info("unrecognized face on this application's facial index");
        break;
      case fioerrs.many_faces:
        toast.info("two or more faces were detected during the scan process");
        break;
      case fioerrs.face_duplication:
        toast.info(
          "user enrolled previously (facial features already recorded). cannot enroll again!"
        );
        break;
      case fioerrs.minors_not_allowed:
        toast.info("minors are not allowed to enroll on this application!");
        break;
      case fioerrs.pad_attack:
        toast.info(
          "presentation (spoof) attack (pad) detected during the scan process"
        );
        break;
      case fioerrs.face_mismatch:
        toast.info(
          "calculated facial vectors of the user being enrolled do not matches"
        );
        break;
      case fioerrs.wrong_pin_code:
        toast.info("wrong pin code supplied by the user being authenticated");
        break;
      case fioerrs.processing_err:
        toast.info("server side error");
        break;
      case fioerrs.unauthorized:
        toast.info(
          "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 fioerrs.terms_not_accepted:
        toast.info(
          "terms & conditions set out by faceio/host application rejected by the end user"
        );
        break;
      case fioerrs.ui_not_ready:
        toast.info(
          "the faceio widget could not be (or is being) injected onto the client dom"
        );
        break;
      case fioerrs.session_expired:
        toast.info(
          "client session expired. the first promise was already fulfilled but the host application failed to act accordingly"
        );
        break;
      case fioerrs.timeout:
        toast.info(
          "ongoing operation timed out (eg, camera access permission, tos accept delay, face not yet detected, server reply, etc.)"
        );
        break;
      case fioerrs.too_many_requests:
        toast.info(
          "widget instantiation requests exceeded for freemium applications. does not apply for upgraded applications"
        );
        break;
      case fioerrs.empty_origin:
        toast.info("origin or referer http request header is empty or missing");
        break;
      case fioerrs.forbiddden_origin:
        toast.info("domain origin is forbidden from instantiating fio.js");
        break;
      case fioerrs.forbiddden_country:
        toast.info(
          "country iso-3166-1 code is forbidden from instantiating fio.js"
        );
        break;
      case fioerrs.session_in_progress:
        toast.info(
          "another authentication or enrollment session is in progress"
        );
        break;
      case fioerrs.network_io:
      default:
        toast.info(
          "error while establishing network connection with the target faceio processing node"
        );
        break;
    }
  }

  if (isloggedin) {
    return <dashboard useremail={userlogin} onlogout={handlelogout} />;
  }

  return (
    <div classname="min-h-screen bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center p-4 w-full">
      <card classname="w-[400px] bg-white shadow-xl rounded-xl overflow-hidden">
        <cardheader classname="bg-gray-50 border-b p-6">
          <cardtitle classname="text-2xl font-bold text-gray-800">
            secure workspace
          </cardtitle>
          <carddescription classname="text-sm text-gray-600">
            authenticate to access your personalized work environment
          </carddescription>
        </cardheader>
        <cardcontent classname="p-6 space-y-4">
          <div classname="space-y-2">
            <label
              htmlfor="email"
              classname="text-sm font-medium text-gray-700"
            >
              work email
            </label>
            <input
              id="email"
              type="email"
              placeholder="you@company.com"
              classname="w-full px-3 py-2 border rounded-md"
              onchange={(e) => setemail(e.target.value)}
            />
          </div>
          <div classname="space-y-4">
            <button
              classname="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-md transition duration-300 ease-in-out"
              onclick={handlelogin}
            >
              access workspace
            </button>
            <button
              classname="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 rounded-md transition duration-300 ease-in-out"
              onclick={handleregister}
              disabled={!email.includes("@")}
            >
              register new account
            </button>
          </div>
        </cardcontent>
        <cardfooter classname="bg-gray-50 border-t p-4">
          <div classname="w-full text-center text-xs text-gray-500">
            protected by faceio™ technology.
            <link
              href="https://faceio.net/security-policy"
              classname="text-blue-600 hover:underline ml-1"
            >
              learn about our security measures
            </link>
          </div>
        </cardfooter>
      </card>

      {userlogin && !isloggedin && (
        <div classname="fixed bottom-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md shadow-lg">
          <div classname="flex">
            <div classname="flex-shrink-0">
              <checkcircleicon classname="h-5 w-5 text-green-500" />
            </div>
            <div classname="ml-3">
              <p classname="text-sm font-medium">workspace access granted</p>
              <p classname="text-xs mt-1">logged in as: {userlogin}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default login;

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { FaUserShield, FaImage, FaCode, FaRobot } from 'react-icons/fa';

export default function Home() {
  const demos = [
    { title: "FACIO Web Authentication", href: "/faceio", icon: FaUserShield },
    { title: "Image Processing", href: "/imageprocessing", icon: FaImage },
    { title: "Code Generation", href: "/codegeneration", icon: FaCode },
    { title: "AI Assistant", href: "/aiassistant", icon: FaRobot },
  ];

  return (
    <div className="max-h-screen  bg-gradient-to-br from-purple-700 via-blue-600 to-teal-500 text-white p-8 w-full">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-5xl md:text-7xl font-bold text-center mb-8 animate-fade-in-down">
          PixLab Faceio
        </h1>
        <p className="text-xl text-center mb-12 animate-fade-in-up">
          Explore cutting-edge technologies and innovative solutions
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {demos.map((demo, index) => (
            <Link
              key={demo.href}
              href={demo.href}
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-40 text-lg font-semibold flex flex-col items-center justify-center space-y-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl hover:bg-opacity-20 transition-all duration-300 animate-fade-in",
                { 'animate-delay-100': index % 2 === 1 }
              )}
            >
              <demo.icon className="text-4xl" />
              {demo.title}
            </Link>
          ))}
        </div>

        <div className="mt-16 text-center animate-fade-in-up animate-delay-300">
          <h2 className="text-3xl font-bold mb-4">Why Choose PixLab?</h2>
          <ul className="text-lg space-y-2">
            <li>✨ Cutting-edge technologies</li>
            <li>? High-performance solutions</li>
            <li>? Advanced security features</li>
            <li>? Seamless integrations</li>
          </ul>
        </div>

        <footer className="mt-16 text-center text-sm opacity-75 animate-fade-in-up animate-delay-500">
          © 2024 PixLab. All rights reserved. Empowering innovation through technology.
        </footer>
      </div>
    </div>
  );
}