当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 FACEIO 在 Nextjs 应用程序中进行无缝人脸验证

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

来源：dev.to 2024-11-27 09:00:57 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《使用 FACEIO 在 Nextjs 应用程序中进行无缝人脸验证》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

在这篇博文中，我们将指导您逐步将 faceio 的人脸身份验证合并到 next.js 应用程序中，从设置 faceio 帐户到在代码库中实现集成。

先决条件

在我们深入之前，请确保您已准备好以下内容：

node.js 和 npm：确保您的开发计算机上安装了 node.js 和 npm。您可以从 node.js 官方网站下载最新版本。
next.js：您需要设置一个 next.js 项目。如果没有，您可以创建一个新的：

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

faceio 帐户：在 faceio 控制台上注册 faceio 帐户。您将在此处创建 faceio 应用程序并获取必要的凭据。

设置 faceio 应用程序

1.创建新的 faceio 应用程序：登录到您的 faceio 控制台并单击“创建新应用程序”按钮。

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

2.配置应用程序：填写所需信息，例如应用程序名称、描述和回调 url（这将是您的 next.js 应用程序的 url）。填写完表格后，点击“创建应用程序”。

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

3.获取faceio_app_id：创建应用程序后，您将获得一个唯一的faceio_app_id。这是您将用于将 faceio 集成到 next.js 应用程序中的标识符。

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

将 faceio 集成到您的 next.js 应用程序中

1.安装faceio npm包：在你的next.js项目中，使用npm或yarn安装faceio-npm包：

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

2.创建人脸验证组件：在您的 next.js 项目中，使用以下代码创建一个名为 components/dashboard.tsx （或您喜欢的任何其他名称）的新文件：

// 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 = ({ useremail, onlogout }) => {
  return (
    
      
        
          
            welcome to faceio
            email: {useremail}
          
          
        
        
          you have successfully logged in.
        
      

      facial authentication for the web

      
        
          
            
               secure & easy
            
          
          
            cross-browser, secure & easy to implement. passwordless authentication sdks powered by face recognition for web sites & apps.
          
        

        
          
            
               privacy-focused
            
          
          
            your facial data is encrypted and securely stored. we prioritize user privacy and data protection.
          
        

        
          
            
               developer-friendly
            
          
          
            easy integration with clear documentation. get started quickly and implement facial authentication in your projects.
          
        

        
          
            
               analytics & insights
            
          
          
            gain valuable insights into user authentication patterns and improve your applications security.
          
        
      

      
        
        
        
      

      
        
          ready to implement facial authentication in your project?
          check out our documentation and start securing your application today!
        
      
    
  );
};

export default dashboard;

3.将 dashboard.tsx 组件导入 login.tsx 组件:

/* 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 = ({}) => {
  const faceioref = useref(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 ;
  }

  return (
    
      
        
          
            secure workspace
          
          
            authenticate to access your personalized work environment
          
        
        
          
            
              work email
            
             setemail(e.target.value)}
            />
          
          
            
            
          
        
        
          
            protected by faceio™ technology.
            
              learn about our security measures
            
          
        
      

      {userlogin && !isloggedin && (
        
          
            
              
            
            
              workspace access granted
              logged in as: {userlogin}
            
          
        
      )}
    
  );
};

export default login;

记得将 'next_public_faceio_public_id' 替换为您从 faceio 控制台获取的实际 faceio_app_id。

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

将人脸验证组件集成到您的 next.js 页面中：在 next.js 应用程序的主页（例如 app/page.tsx）中，导入 home 组件并渲染它：

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 (
    
      
        
          PixLab Faceio
        
        
          Explore cutting-edge technologies and innovative solutions
        

        
          {demos.map((demo, index) => (
            
              
              {demo.title}
            
          ))}
        

        
          Why Choose PixLab?
          
            ✨ Cutting-edge technologies
            ? High-performance solutions
            ? Advanced security features
            ? Seamless integrations
          
        

        
          © 2024 PixLab. All rights reserved. Empowering innovation through technology.
        
      
    
  );
}