ASLIRI - PASSIVE LIVENESS - WEB SDK (React Component)

Description

You can verification face with passive liveness by ASLIRI. The SDK support for ReactJS 18 or latest / NextJS 14 or latest or latest. Please run under nodeJs 18.x.x or latest

Check out the SDK for a simplified integration.

1. Copy wasm folder to public directory

• wasm folder provided by ASLIRI
• copy to projectname/public/copyhere...

2. Get your token with ASLIRI Team

3. Install Library via NPM

npm i [email protected]

sample in App.tsx (Reactjs):

import { CheckAuthentication, PassiveLiveness } from "asliri-passive-liveness-react"
import { useCallback, useEffect, useState } from "react";
function App() {

  const result = (data:any) => {
    console.log(data.message); // message response
    console.log(data.result); // result liveness
    console.log(data.image); // image base64
  };

  const [auth, setAuth]:any = useState("");
  const [apiCalled, setApiCalled] = useState(false);

  const getAuth = async () => {
    const getAuthenticationResult = await CheckAuthentication("provided by ASLIRI");
    setAuth(getAuthenticationResult);
    console.log({ getAuthenticationResult });
  };

  useEffect(() => {
    setApiCalled(true);
  }, []);

  useEffect(() => {
    if (apiCalled) {
      getAuth();
    }
  }, [apiCalled]);

  const handleError = useCallback((error: Error) => {
    alert(error);
  }, []);

  return (
    <>
      <PassiveLiveness getAuthentication={auth} getResult={result} onError={handleError} />
    </>
  )
}

export default App

sample NextJS AppRouter mode

a. add css in layout.tsx

import "asliri-passive-liveness-react/dist/index.css"

b. create component src/components/PassiveLivenessComponent.tsx

import { CheckAuthentication, PassiveLiveness } from "asliri-passive-liveness-react";
import { useCallback, useEffect, useState } from "react";

export default function PassiveLivenessComponent() {
	const [auth, setAuth]: any = useState("");
	const [apiCalled, setApiCalled] = useState(false);
	const passiveLivenessToken = "Provided by ASLIRI"

	const result = async (data: any) => {
		console.log(data.message)
		console.log(data.image)
	}

	const getAuth = async () => {
		const getAuthenticationResult = await CheckAuthentication(passiveLivenessToken);
		setAuth(getAuthenticationResult);
		console.log({ getAuthenticationResult });
	};

	useEffect(() => {
		setApiCalled(true);
	}, []);

	useEffect(() => {
		if (apiCalled) {
			getAuth();
		}
	}, [apiCalled]);

	const handleError = useCallback((error: any) => {
		alert(error);
	}, []);

	return (
		<>
			{(apiCalled && JSON.stringify(auth).includes("reqid")) ? (
				<PassiveLiveness getAuthentication={auth} getResult={result} onError={handleError} />
			) : (
				<center>
					<h1 className="mt-4 font-bold text-black-10 sm:text-5xl">{auth}</h1>
				</center>
			)}
		</>
	)
}

c. create component import dynamic src/components/PassiveLivenessComponentDynamic.tsx

import dynamic from "next/dynamic";

export default function PassiveLivenessComponentDynamic() {
	const PassiveLivenessLazy = dynamic(() => import("@/components/PassiveLivenessComponent"), {
		ssr: false
	});

	return (
		<>
			<PassiveLivenessLazy></PassiveLivenessLazy>
		</>
	)
}

d. create page sample src/passive/page.tsx

import PassiveLivenessComponentDynamic from "@/components/PassiveLivenessComponentDynamic"
export default function Page() {
	return (
		<PassiveLivenessComponentDynamic />
	)
}

Thank you.