ASLIRI - COMPREHENSIVE LIVENESS - WEB SDK (React Component)

Description

You can verification face and eye with comprehensive liveness by ASLIRI. The SDK support for ReactJS / NextJS

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 asliri-comprehensive-liveness-react --save

sample in App.tsx :

import React, { useEffect, useState } from 'react'

import { CheckAuthentication, ComprehensiveLiveness } from "asliri-comprehensive-liveness-react"

function App() {

  interface resultInterface {
    score: number,
    message: string,
    image: string
  }
  
  const result = (result:resultInterface) => {
    console.log(result.message); // message response
    console.log(result.score); // score liveness
    console.log(result.image); // image base64
  };

  const handleError = (err: string) => {
    console.log({ err });
  };

  const [auth, setAuth] = 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]);

  return (
    <>
      <div>
        <ComprehensiveLiveness
          getAuthentication={auth}
          getResult={result}
          handleError={handleError}
        ></ComprehensiveLiveness>
      </div>
    </>
  );
}

export default App

sample in App.js :

import React, { useEffect, useState } from 'react'

import { CheckAuthentication, ComprehensiveLiveness } from "asliri-comprehensive-liveness-react"

function App() {

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

  const handleError = (err) => {
    console.log({ err });
  };

  const [auth, setAuth] = 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]);

  return (
    <>
      <div>
        <ComprehensiveLiveness
          getAuthentication={auth}
          getResult={result}
          handleError={handleError}
        ></ComprehensiveLiveness>
      </div>
    </>
  );
}

export default App

Thank you.

Version History

2.0.0

• Result with object {message, score, image}

1.3.0

• Result with object {message, score, image}

1.2.0

• Bug fix something error
• Bug Fix Load ACU component

1.1.0

• Score back to 0 - 1
• Result with object {message, score}

1.0.1

• Change result Score 0 - 1 to 0 - 100

1.0.0

• Initial release