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

// dashboard.tsximport 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: () =&gt; void;}const dashboard: react.fc<dashboardprops> = ({ useremail, onlogout }) =&gt; {  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"></fasignoutalt> 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"></fausercircle> secure &amp; easy            </cardtitle></cardheader><cardcontent><p classname="text-sm sm:text-base">cross-browser, secure &amp; easy to implement. passwordless authentication sdks powered by face recognition for web sites &amp; apps.</p>          </cardcontent></card><card><cardheader><cardtitle classname="flex items-center text-base sm:text-lg"><falock classname="mr-2"></falock> 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"></facode> 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"></fachartbar> analytics &amp; 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;</dashboardprops>

/* 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> = ({}) =&gt; {  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 () =&gt; {    try {      faceioref.current = new faceio(publickey);      console.log("faceio initialized successfully");    } catch (error) {      console.log(error);      handleerror(error);    }  };  useeffect(() =&gt; {    initialisefaceio();  }, []);  const handleregister = async () =&gt; {    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 () =&gt; {    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 = () =&gt; {    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 &amp; 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}"></dashboard>;  }  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)}            /&gt;          </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>              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                      </div>        </cardfooter></card>      {userlogin &amp;&amp; !isloggedin &amp;&amp; (        <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"></checkcircleicon></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;</faceio></props>

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) =&gt; (            <link key="{demo.href}" href="%7Bdemo.href%7D" classname="{cn(" buttonvariants variant: 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 index><demo.icon classname="text-4xl"></demo.icon>              {demo.title}                      ))}        </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>  );}