احراز هویت یکپارچه چهره در برنامه Next.js شما با FACEIO

Summarize this content to 400 words in Persian Lang
در این پست وبلاگ، ما شما را از طریق فرآیند گام به گام استفاده از احراز هویت چهره 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 بازگشت به تماس (که URL برنامه Next.js شما خواهد بود) را پر کنید. پس از تکمیل فرم، روی «ایجاد برنامه» کلیک کنید.

3.FACEIO_APP_ID را دریافت کنید: پس از ایجاد برنامه، یک FACEIO_APP_ID منحصر به فرد در اختیار شما قرار می گیرد. این شناسه ای است که برای ادغام FACEIO در برنامه Next.js خود استفاده می کنید.

ادغام FACEIO در برنامه Next.js شما

1.بسته FACEIO NPM را نصب کنید: در پروژه Next.js خود، بسته faceio-npm را با استفاده از npm یا yarn نصب کنید:

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 Component وارد کنید:

/* 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_APP_ID واقعی که از کنسول FACEIO دریافت کرده‌اید، جایگزین کنید.

مؤلفه تأیید هویت چهره را در صفحه 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 (

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.

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

همین! اکنون احراز هویت چهره FACEIO را در برنامه Next.js خود ادغام کرده‌اید. هنگامی که کاربران روی دکمه “Authenticate with Face” کلیک می کنند، ویجت FACEIO ظاهر می شود و آنها را در فرآیند احراز هویت راهنمایی می کند.

گرفتن ویجت FACEIO در عمل – ثبت نام

برای نشان دادن عملکرد ویجت FACEIO، بیایید یک GIF از روند ثبت نام بگیریم:

این GIF تجربه کاربر از فرآیند ثبت چهره FACEIO در برنامه Next.js را به نمایش می گذارد. کاربر می تواند به راحتی چهره خود را ثبت کند، که برای احراز هویت بدون درز در لاگین های بعدی استفاده خواهد شد.

گرفتن ویجت FACEIO در عمل

برای نشان دادن عملکرد ویجت FACEIO، بیایید یک GIF از فرآیند احراز هویت بگیریم:

این GIF تجربه کاربر از فرآیند احراز هویت چهره FACEIO را در برنامه Next.js به نمایش می گذارد.

بهترین شیوه های امنیت کلیدی برای برنامه های کاربردی FACEIO

حذف ثبت های تکراری: تنظیمات را فعال کنید تا یک کاربر را از چندین بار ثبت نام جلوگیری کند و از درگیری های احتمالی یا سوء استفاده جلوگیری کند.
افزایش اقدامات ضد جعل: برای شناسایی و مسدود کردن تلاش‌های جعل چهره، ویژگی‌ها را فعال کنید و مطمئن شوید که سیستم فقط با کاربران واقعی و واقعی تعامل دارد.
منحصر به فرد بودن پین را تضمین کنید: مطمئن شوید که پین ​​هر کاربر در برنامه منحصر به فرد است تا از دسترسی غیرمجاز جلوگیری شود.
اعمال محدودیت های جغرافیایی: برای کنترل امنیتی بیشتر، نمونه سازی ویجت FACEIO را به نام های دامنه و کشورهای مجاز محدود کنید.

مزایای استفاده از FACEIO در برنامه Next.js شما

ادغام FACEIO در برنامه Next.js چندین مزیت دارد:

تجربه کاربری بهبود یافته: ویجت FACEIO یک جریان احراز هویت یکپارچه و شهودی را ارائه می دهد که ورود کاربران به برنامه شما را آسان می کند.
سازگاری بین پلتفرم: FACEIO در دستگاه‌ها و مرورگرهای مختلف کار می‌کند و تجربه کاربری ثابتی را تضمین می‌کند.
ادغام آسان: بسته faceio-npm فرآیند یکپارچه سازی را ساده می کند و به شما امکان می دهد تا به سرعت احراز هویت چهره را به برنامه Next.js خود اضافه کنید.
انجمن انجمن FACEIO: می توانید برای مشکلات از انجمن FACEIO کمک بگیرید.

نتیجه گیری

در این پست وبلاگ، یاد گرفتید که چگونه سرویس احراز هویت چهره FACEIO را در برنامه Next.js خود ادغام کنید. با دنبال کردن مراحل ذکر شده در اینجا، اکنون می توانید تجربه احراز هویت ایمن و کاربرپسند را برای کاربران خود فراهم کنید و کیفیت کلی برنامه وب خود را افزایش دهید.

اگر سؤال بیشتری دارید یا به کمک بیشتری نیاز دارید، با تیم پشتیبانی FACEIO تماس بگیرید یا مستندات جامع FACEIO را بررسی کنید.

کد نویسی مبارک!

برای کد منبع کامل این پیاده سازی، می توانید به مخزن GitHub مراجعه کرده و پروژه را با جزئیات بررسی کنید.

// 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.
        
      

      


فهرست مطالب
Toggle

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;

/* 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;

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 (
    

      

        
        

          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
          
        

        
      
    
  );
}