在这篇博文中，我们将指导您逐步将 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}
you have successfully logged in.
facial authentication for the web
cross-browser, secure & easy to implement. passwordless authentication sdks powered by face recognition for web sites & apps.
your facial data is encrypted and securely stored. we prioritize user privacy and data protection.
easy integration with clear documentation. get started quickly and implement facial authentication in your projects.
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
secure workspace
authenticate to access your personalized work environment
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。
- 将人脸验证组件集成到您的 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) => (
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 存储库并详细探索该项目。
