{"id":73375,"date":"2024-08-14T05:18:49","date_gmt":"2024-08-14T01:48:49","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/seamless-face-authentication-in-your-nextjs-app-with-faceio-55d7\/"},"modified":"2024-08-14T05:18:49","modified_gmt":"2024-08-14T01:48:49","slug":"seamless-face-authentication-in-your-nextjs-app-with-faceio-55d7","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/seamless-face-authentication-in-your-nextjs-app-with-faceio-55d7\/","title":{"rendered":"\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0686\u0647\u0631\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0634\u0645\u0627 \u0628\u0627 FACEIO"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0627 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0622\u06cc\u0646\u062f \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f\u060c \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u062d\u0633\u0627\u0628 FACEIO \u062a\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f\u062a\u0627\u0646\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0634\u06cc\u0631\u062c\u0647 \u0631\u0641\u062a\u0646\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0645\u062d\u0644 \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u062f:<\/p>\n

Node.js \u0648 npm: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 Node.js \u0648 npm \u0631\u0627 \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0631\u0627 \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc Node.js \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.
\nNext.js: \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u06cc\u06a9\u06cc \u0646\u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0645\u0648\u0631\u062f \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

\u062d\u0633\u0627\u0628 FACEIO: \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u062d\u0633\u0627\u0628 FACEIO \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 FACEIO \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 FACEIO \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u0627\u0639\u062a\u0628\u0627\u0631 \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 FACEIO<\/p>\n

1.\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f FACEIO \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f: \u0648\u0627\u0631\u062f \u06a9\u0646\u0633\u0648\u0644 FACEIO \u062e\u0648\u062f \u0634\u0648\u06cc\u062f \u0648 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u00ab\u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f\u00bb \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n

2.\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f: \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0645\u0627\u0646\u0646\u062f \u0646\u0627\u0645 \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648 URL \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062a\u0645\u0627\u0633 (\u06a9\u0647 URL \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f) \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f. \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0641\u0631\u0645\u060c \u0631\u0648\u06cc \u00ab\u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u00bb \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n

3.FACEIO_APP_ID \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f: \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u06cc\u06a9 FACEIO_APP_ID \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0627\u06cc\u0646 \u0634\u0646\u0627\u0633\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u062f\u063a\u0627\u0645 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0634\u0645\u0627<\/p>\n

1.\u0628\u0633\u062a\u0647 FACEIO NPM \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f: \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f\u060c \u0628\u0633\u062a\u0647 faceio-npm \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 npm \u06cc\u0627 yarn \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n

2.\u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f: \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 Components\/Dashboard.tsx (\u06cc\u0627 \u0647\u0631 \u0646\u0627\u0645 \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u06cc\u062f) \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

\/\/ Dashboard.tsx
\nimport React from “react”;
\nimport { Card, CardHeader, CardTitle, CardContent } from “@\/components\/ui\/card”;
\nimport { Button } from “@\/components\/ui\/button”;
\nimport { FaUserCircle, FaLock, FaCode, FaChartBar, FaSignOutAlt } from ‘react-icons\/fa’;<\/p>\n

interface DashboardProps {
\n userEmail: string;
\n onLogout: () => void;
\n}<\/p>\n

const Dashboard: React.FC = ({ userEmail, onLogout }) => {
\n return (<\/p>\n

Welcome to FaceIO
\n Email: {userEmail}<\/p>\n

Logout<\/p>\n

You have successfully logged in.<\/p>\n

Facial Authentication for the Web<\/p>\n

Secure & Easy<\/p>\n

Cross-browser, secure & easy to implement. Passwordless Authentication SDKs powered by Face Recognition for Web Sites & Apps.<\/p>\n

Privacy-Focused<\/p>\n

Your facial data is encrypted and securely stored. We prioritize user privacy and data protection.<\/p>\n

Developer-Friendly<\/p>\n

Easy integration with clear documentation. Get started quickly and implement facial authentication in your projects.<\/p>\n

Analytics & Insights<\/p>\n

Gain valuable insights into user authentication patterns and improve your applications security.<\/p>\n

Get Started \u2192<\/p>\n

Integration Guide \u2192<\/p>\n

FACEIO Console \u2192<\/p>\n

Ready to implement facial authentication in your project?
\n Check out our documentation and start securing your application today!<\/p>\n

);
\n};<\/p>\n

export default Dashboard;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

3.\u0645\u0624\u0644\u0641\u0647 Dashboard.tsx \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 Login.tsx Component \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

\/* eslint-disable react-hooks\/exhaustive-deps *\/
\n“use client”;
\nimport {
\n Card,
\n CardContent,
\n CardDescription,
\n CardFooter,
\n CardHeader,
\n CardTitle,
\n} from “@\/components\/ui\/card”;
\nimport { Terminal } from “lucide-react”;
\nimport { MailIcon, CheckCircleIcon } from “lucide-react”;
\nimport { Alert, AlertDescription, AlertTitle } from “@\/components\/ui\/alert”;
\nimport { Input } from “@\/components\/ui\/input”;
\nimport { Label } from “@\/components\/ui\/label”;
\nimport { Button } from “.\/ui\/button”;
\nimport faceIO from “@faceio\/fiojs”;
\nimport { useEffect, useRef, useState } from “react”;
\nimport Link from “next\/link”;
\nimport { toast } from “sonner”;
\nimport Dashboard from “.\/Dashboard”;<\/p>\n

type Props = {};<\/p>\n

const Login: React.FC = ({}) => {
\n const faceioRef = useRef(null);
\n const [email, setEmail] = useState(“”);
\n const [userLogin, setUserLogin] = useState(“”);
\n const [isLoggedIn, setIsLoggedIn] = useState(false);<\/p>\n

const publicKey = process.env.NEXT_PUBLIC_FACEIO_PUBLIC_ID as string;<\/p>\n

const initialiseFaceio = async () => {
\n try {
\n faceioRef.current = new faceIO(publicKey);
\n console.log(“FaceIO initialized successfully”);
\n } catch (error) {
\n console.log(error);
\n handleError(error);
\n }
\n };<\/p>\n

useEffect(() => {
\n initialiseFaceio();
\n }, []);<\/p>\n

const handleRegister = async () => {
\n try {
\n if (!faceioRef.current) {
\n console.error(“FaceIO instance is not initialized”);
\n return;
\n }<\/p>\n

await faceioRef.current?.enroll({
\n userConsent: false,
\n locale: “auto”,
\n payload: { email: `${email}` },
\n });
\n toast.success(“Successfully Registered user.”);
\n } catch (error) {
\n handleError(error);
\n faceioRef.current?.restartSession();
\n }
\n };<\/p>\n

const handleLogin = async () => {
\n try {
\n const authenticate = await faceioRef.current?.authenticate();
\n console.log(“User authenticated successfully:”, authenticate);
\n setUserLogin(authenticate.payload.email);
\n setIsLoggedIn(true);
\n toast.success(“Successfully logged in.”);
\n } catch (error) {
\n console.log(error);
\n handleError(error);
\n }
\n };<\/p>\n

const handleLogout = () => {
\n setIsLoggedIn(false);
\n setUserLogin(“”);
\n toast.success(“Successfully logged out.”);
\n };<\/p>\n

function handleError(errCode: any) {
\n const fioErrs = faceioRef.current?.fetchAllErrorCodes()!;
\n switch (errCode) {
\n case fioErrs.PERMISSION_REFUSED:
\n toast.info(“Access to the Camera stream was denied by the end user”);
\n break;
\n case fioErrs.NO_FACES_DETECTED:
\n toast.info(
\n “No faces were detected during the enroll or authentication process”
\n );
\n break;
\n case fioErrs.UNRECOGNIZED_FACE:
\n toast.info(“Unrecognized face on this application’s Facial Index”);
\n break;
\n case fioErrs.MANY_FACES:
\n toast.info(“Two or more faces were detected during the scan process”);
\n break;
\n case fioErrs.FACE_DUPLICATION:
\n toast.info(
\n “User enrolled previously (facial features already recorded). Cannot enroll again!”
\n );
\n break;
\n case fioErrs.MINORS_NOT_ALLOWED:
\n toast.info(“Minors are not allowed to enroll on this application!”);
\n break;
\n case fioErrs.PAD_ATTACK:
\n toast.info(
\n “Presentation (Spoof) Attack (PAD) detected during the scan process”
\n );
\n break;
\n case fioErrs.FACE_MISMATCH:
\n toast.info(
\n “Calculated Facial Vectors of the user being enrolled do not matches”
\n );
\n break;
\n case fioErrs.WRONG_PIN_CODE:
\n toast.info(“Wrong PIN code supplied by the user being authenticated”);
\n break;
\n case fioErrs.PROCESSING_ERR:
\n toast.info(“Server side error”);
\n break;
\n case fioErrs.UNAUTHORIZED:
\n toast.info(
\n “Your application is not allowed to perform the requested operation (eg. Invalid ID, Blocked, Paused, etc.). Refer to the FACEIO Console for additional information”
\n );
\n break;
\n case fioErrs.TERMS_NOT_ACCEPTED:
\n toast.info(
\n “Terms & Conditions set out by FACEIO\/host application rejected by the end user”
\n );
\n break;
\n case fioErrs.UI_NOT_READY:
\n toast.info(
\n “The FACEIO Widget could not be (or is being) injected onto the client DOM”
\n );
\n break;
\n case fioErrs.SESSION_EXPIRED:
\n toast.info(
\n “Client session expired. The first promise was already fulfilled but the host application failed to act accordingly”
\n );
\n break;
\n case fioErrs.TIMEOUT:
\n toast.info(
\n “Ongoing operation timed out (eg, Camera access permission, ToS accept delay, Face not yet detected, Server Reply, etc.)”
\n );
\n break;
\n case fioErrs.TOO_MANY_REQUESTS:
\n toast.info(
\n “Widget instantiation requests exceeded for freemium applications. Does not apply for upgraded applications”
\n );
\n break;
\n case fioErrs.EMPTY_ORIGIN:
\n toast.info(“Origin or Referer HTTP request header is empty or missing”);
\n break;
\n case fioErrs.FORBIDDDEN_ORIGIN:
\n toast.info(“Domain origin is forbidden from instantiating fio.js”);
\n break;
\n case fioErrs.FORBIDDDEN_COUNTRY:
\n toast.info(
\n “Country ISO-3166-1 Code is forbidden from instantiating fio.js”
\n );
\n break;
\n case fioErrs.SESSION_IN_PROGRESS:
\n toast.info(
\n “Another authentication or enrollment session is in progress”
\n );
\n break;
\n case fioErrs.NETWORK_IO:
\n default:
\n toast.info(
\n “Error while establishing network connection with the target FACEIO processing node”
\n );
\n break;
\n }
\n }<\/p>\n

if (isLoggedIn) {
\n return ;
\n }<\/p>\n

return (<\/p>\n

Secure Workspace<\/p>\n

Authenticate to access your personalized work environment<\/p>\n

Work Email<\/p>\n

setEmail(e.target.value)}
\n \/><\/p>\n

Access Workspace<\/p>\n

Register New Account<\/p>\n

Protected by FaceIO\u2122 Technology.<\/p>\n

Learn about our security measures<\/p>\n

{userLogin && !isLoggedIn && (<\/p>\n

Workspace Access Granted
\n Logged in as: {userLogin}<\/p>\n

)}<\/p>\n

);
\n};<\/p>\n

export default Login;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u00abNEXT_PUBLIC_FACEIO_PUBLIC_ID\u00bb \u0631\u0627 \u0628\u0627 FACEIO_APP_ID \u0648\u0627\u0642\u0639\u06cc \u06a9\u0647 \u0627\u0632 \u06a9\u0646\u0633\u0648\u0644 FACEIO \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u0624\u0644\u0641\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 Next.js \u062e\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f: \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c app\/page.tsx)\u060c \u0645\u0624\u0644\u0641\u0647 Home \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n

import { buttonVariants } from “@\/components\/ui\/button”;
\nimport { cn } from “@\/lib\/utils”;
\nimport Link from “next\/link”;
\nimport { FaUserShield, FaImage, FaCode, FaRobot } from ‘react-icons\/fa’;<\/p>\n

export default function Home() {
\n const demos = [
\n { title: “FACIO Web Authentication”, href: “\/faceio”, icon: FaUserShield },
\n { title: “Image Processing”, href: “\/imageprocessing”, icon: FaImage },
\n { title: “Code Generation”, href: “\/codegeneration”, icon: FaCode },
\n { title: “AI Assistant”, href: “\/aiassistant”, icon: FaRobot },
\n ];<\/p>\n

return (<\/p>\n

Explore cutting-edge technologies and innovative solutions<\/p>\n

{demos.map((demo, index) => (<\/p>\n

{demo.title}<\/p>\n

))}<\/p>\n

Why Choose PixLab?<\/p>\n

\u2728 Cutting-edge technologies
\n \ud83d\ude80 High-performance solutions
\n \ud83d\udd12 Advanced security features
\n \ud83c\udf10 Seamless integrations<\/p>\n

\u00a9 2024 PixLab. All rights reserved. Empowering innovation through technology.<\/p>\n

);
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0647\u0645\u06cc\u0646! \u0627\u06a9\u0646\u0648\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 FACEIO \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 “Authenticate with Face” \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0648\u06cc\u062c\u062a FACEIO \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u06af\u0631\u0641\u062a\u0646 \u0648\u06cc\u062c\u062a FACEIO \u062f\u0631 \u0639\u0645\u0644 – \u062b\u0628\u062a \u0646\u0627\u0645<\/p>\n

\u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u06cc\u062c\u062a FACEIO\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 GIF \u0627\u0632 \u0631\u0648\u0646\u062f \u062b\u0628\u062a \u0646\u0627\u0645 \u0628\u06af\u06cc\u0631\u06cc\u0645:<\/p>\n

\u0627\u06cc\u0646 GIF \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0641\u0631\u0622\u06cc\u0646\u062f \u062b\u0628\u062a \u0686\u0647\u0631\u0647 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f. \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0686\u0647\u0631\u0647 \u062e\u0648\u062f \u0631\u0627 \u062b\u0628\u062a \u06a9\u0646\u062f\u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u062f\u0648\u0646 \u062f\u0631\u0632 \u062f\u0631 \u0644\u0627\u06af\u06cc\u0646 \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n

\u06af\u0631\u0641\u062a\u0646 \u0648\u06cc\u062c\u062a FACEIO \u062f\u0631 \u0639\u0645\u0644<\/p>\n

\u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u06cc\u062c\u062a FACEIO\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 GIF \u0627\u0632 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u06af\u06cc\u0631\u06cc\u0645:<\/p>\n

\u0627\u06cc\u0646 GIF \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 FACEIO \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f.<\/p>\n

\u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc FACEIO<\/p>\n

\u062d\u0630\u0641 \u062b\u0628\u062a \u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc: \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u062b\u0628\u062a \u0646\u0627\u0645 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u062f\u0631\u06af\u06cc\u0631\u06cc \u0647\u0627\u06cc \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u06cc\u0627 \u0633\u0648\u0621 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f.
\n\u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0636\u062f \u062c\u0639\u0644: \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0648 \u0645\u0633\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u062a\u0644\u0627\u0634\u200c\u0647\u0627\u06cc \u062c\u0639\u0644 \u0686\u0647\u0631\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0641\u0642\u0637 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0648 \u0648\u0627\u0642\u0639\u06cc \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0631\u062f.
\n\u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0628\u0648\u062f\u0646 \u067e\u06cc\u0646 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u06a9\u0646\u06cc\u062f: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u067e\u06cc\u0646 \u200b\u200b\u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0633\u062a \u062a\u0627 \u0627\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u063a\u06cc\u0631\u0645\u062c\u0627\u0632 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.
\n\u0627\u0639\u0645\u0627\u0644 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u062c\u063a\u0631\u0627\u0641\u06cc\u0627\u06cc\u06cc: \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0627\u0645\u0646\u06cc\u062a\u06cc \u0628\u06cc\u0634\u062a\u0631\u060c \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u0632\u06cc \u0648\u06cc\u062c\u062a FACEIO \u0631\u0627 \u0628\u0647 \u0646\u0627\u0645 \u0647\u0627\u06cc \u062f\u0627\u0645\u0646\u0647 \u0648 \u06a9\u0634\u0648\u0631\u0647\u0627\u06cc \u0645\u062c\u0627\u0632 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0634\u0645\u0627<\/p>\n

\u0627\u062f\u063a\u0627\u0645 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0686\u0646\u062f\u06cc\u0646 \u0645\u0632\u06cc\u062a \u062f\u0627\u0631\u062f:<\/p>\n

\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647: \u0648\u06cc\u062c\u062a FACEIO \u06cc\u06a9 \u062c\u0631\u06cc\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0648 \u0634\u0647\u0648\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.
\n\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u06cc\u0646 \u067e\u0644\u062a\u0641\u0631\u0645: FACEIO \u062f\u0631 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u0648 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062b\u0627\u0628\u062a\u06cc \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.
\n\u0627\u062f\u063a\u0627\u0645 \u0622\u0633\u0627\u0646: \u0628\u0633\u062a\u0647 faceio-npm \u0641\u0631\u0622\u06cc\u0646\u062f \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.
\n\u0627\u0646\u062c\u0645\u0646 \u0627\u0646\u062c\u0645\u0646 FACEIO: \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0645\u0634\u06a9\u0644\u0627\u062a \u0627\u0632 \u0627\u0646\u062c\u0645\u0646 FACEIO \u06a9\u0645\u06a9 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0633\u0631\u0648\u06cc\u0633 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 FACEIO \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u0631\u0627\u062d\u0644 \u0630\u06a9\u0631 \u0634\u062f\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u062c\u0631\u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u0646 \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0648\u062f \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u06cc\u0641\u06cc\u062a \u06a9\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f.<\/p>\n

\u0627\u06af\u0631 \u0633\u0624\u0627\u0644 \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u06cc\u062f \u06cc\u0627 \u0628\u0647 \u06a9\u0645\u06a9 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u0627 \u062a\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc FACEIO \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06cc\u0627 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u062c\u0627\u0645\u0639 FACEIO \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n

\u0628\u0631\u0627\u06cc \u06a9\u062f \u0645\u0646\u0628\u0639 \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u062e\u0632\u0646 GitHub \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\n

\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0627 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0622\u06cc\u0646\u062f \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0647\u0631\u0647 FACEIO \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f\u060c \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u062d\u0633\u0627\u0628 FACEIO \u062a\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f\u062a\u0627\u0646\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/strong><\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0634\u06cc\u0631\u062c\u0647 \u0631\u0641\u062a\u0646\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0645\u062d\u0644 \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u062f:<\/p>\n