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

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

先决条件

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

• node.js 和 npm：确保您的开发计算机上安装了 node.js 和 npm。您可以从 node.js 官方网站下载最新版本。

• next.js：您需要设置一个 next.js 项目。如果没有，您可以创建一个新的：

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

设置 faceio 应用程序

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

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

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

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

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

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}
          
          
             logout
          
        
        
          
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.
          
        
      

      

        
          get started →
        
        
          integration guide →
        
        
          faceio console →
        
      

      
        
          
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)}
            />
          
          

            
              access workspace
            
            
              register new account
            
          
        
        
          

            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。

1. 将人脸验证组件集成到您的 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
          
        

        
      
    
  );
}

就是这样！您现在已将 faceio 的人脸身份验证集成到您的 next.js 应用程序中。当用户点击“面部验证”按钮时，faceio 小部件将会出现，指导他们完成身份验证过程。

捕获正在运行的 faceio 小部件 - 注册

为了演示 faceio 小部件的功能，让我们捕获注册过程的 gif：

此 gif 展示了 next.js 应用程序中 faceio 人脸注册过程的用户体验。用户可以轻松注册自己的脸部，用于以后登录时的无缝身份验证。

捕获正在运行的 faceio 小部件

为了演示 faceio 小部件的功能，让我们捕获身份验证过程的 gif：

此 gif 展示了 next.js 应用程序中 faceio 人脸身份验证过程的用户体验。

faceio 应用程序的关键安全最佳实践

• 消除重复注册：启用设置以阻止同一用户多次注册，避免潜在的冲突或误用。

• 加强反欺骗措施：激活检测和阻止人脸欺骗尝试的功能，确保系统仅与真实的用户交互。

• 保证 pin 唯一性：确保每个用户的 pin 在应用程序内是唯一的，以防止未经授权的访问。

• 实施地理限制：将 faceio 小部件的实例化限制为授权域名和国家/地区，以增加安全控制。

在 next.js 应用程序中使用 faceio 的好处

将 faceio 集成到您的 next.js 应用程序中具有以下几个好处：

• 改进的用户体验：faceio 小部件提供无缝且直观的身份验证流程，使用户可以轻松登录您的应用程序。

• 跨平台兼容性：faceio 可跨各种设备和浏览器工作，确保一致的用户体验。

• 轻松集成：faceio-npm 包简化了集成过程，让您可以快速将人脸身份验证添加到 next.js 应用程序中。

• faceio社区论坛：您可以从faceio社区获得问题帮助。

结论

在这篇博文中，您学习了如何将 faceio 的人脸身份验证服务集成到您的 next.js 应用程序中。通过执行此处概述的步骤，您现在可以为用户提供安全且用户友好的身份验证体验，从而提高 web 应用程序的整体质量。

如果您还有任何其他问题或需要其他帮助，请随时联系 faceio 支持团队或浏览全面的 faceio 文档。

快乐编码！

有关此实现的完整源代码，您可以访问 github 存储库并详细探索该项目。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《使用 FACEIO 在 Nextjs 应用程序中进行无缝人脸验证》文章吧，也可关注golang学习网公众号了解相关技术文章。