@trully/true-deepfake-detection v1.3.0

TrueDeepfakeDetection

TrueDeepfakeDetection is a liveness validator especially equip to detect deepfake fraud.

⚠️ The component only works under the HTTPS protocol

⚠️ For develop, you should pass isDev true. See How to use section

⚠️ This is a client-side component. If your project was created with Next.js, follow the steps in the Add it to Next.js section

Install

npm i @trully/true-deepfake-detection

Add styles

To import the styles, go to your main.js file and add the following import

import "../node_modules/@trully/true-deepfake-detection/dist/styles.css";

How to use

The component receives the "configuration" prop. This prop should be an object containing the keys that will let you adapt it to your needs. There are the only five required keys: "isDev", "apiKey", "user_id", "handleData" and "handleError".

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    isDev: true,
    apiKey: "YOUR_API_KEY",
    user_id: "YOUR_USER_ID",
    handleData: (response) => {
      //What should be done with the obtained response?
    },
    handleError: (error) => {
      //What should be done if there is an error retrieving the response?
    },
  }}
/>;

Tracking process

You can declare a tag to track every process TrueDeepfakeDetection has run. This key is optional but we recommend using it from the start.

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    isDev: true,
    apiKey: "YOUR_API_KEY",
    user_id: "YOUR_USER_ID",
    tag: "VALID_V4_UUID",
    handleData: (response) => {
      //What should be done with the obtained response?
    },
    handleError: (error) => {
      //What should be done if there is an error retrieving the response?
    },
  }}
/>;

Personalize

To customize the component, add the corresponding keys to the configuration prop. Every one of these keys are optional

Example

This example shows the default values for the showLogo and showExit keys

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    // ...required keys
    showLogo: true,
    showExit: true,
  }}
/>;

Change images

Images are loaded using an image HTML tag, so to change it you should pass the corresponding path to the image. Every one of these keys are optional. These are the default values

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    // ...required keys
    images: {
      logo: "YOUR_LOGO_PATH",
      lightIcon: "YOUR__ICON_PATH",
      crossIcon: "YOUR__ICON_PATH",
      iconCheck: "YOUR__ICON_PATH",
      videoFallback: "YOUR_IMAGE_PATH",
    },
  }}
/>;

Change videos

Videos are loaded using a video HTML tag, to change it you should pass the corresponding path to the video. We recommend to change the videoFallback image if you're going to change livenessVideo. videoFallback is use as livenessVideo poster. Every one of these keys are optional. These are the default values.

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    // ...required keys
    videos: {
      livenessVideo: "YOUR_VIDEO_PATH",
    },
  }}
/>;

Change styles

The styles personalization is divided in sections

textsStyles

You can change the entire font using fonFamily or changes an specific font using the individualFamily object. Every one of these keys are optional. These are the default values.

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    // ...required keys
    styles: {
      textsStyles: {
        fontFamily: "YOUR_FONT",
        // Colors should be expressed in hexadecimal
        primaryTextColor: "YOUR_HEX_COLOR",
        secondaryTextColor: "YOUR_HEX_COLOR",
      },
    },
  }}
/>;

individualFamily

Every one of these keys are optional. If not specified will default to "DM Sans", sans-serif

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    // ...required keys
    styles: {
      textsStyles: {
        individualFamily: {
          text1BoldFamily: "YOUR_FONT", //titles
          text1Family: "YOUR_FONT", //subtitle
          textFamily: "YOUR_FONT", //text
        },
        // Colors should be expressed in hexadecimal
        primaryTextColor: "YOUR_HEX_COLOR",
        secondaryTextColor: "YOUR_HEX_COLOR",
      },
    },
  }}
/>;

colors

Colors will allow you change the different colors to match your brand design. Every one of these keys are optional. These are the default values.

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

<TrueDeepfakeDetection
  configuration={{
    // ...required keys
    styles: {
      colors: {
        primary: "YOUR_HEX_COLOR",
        secondary: "YOUR_HEX_COLOR",
        disabled: "YOUR_HEX_COLOR",
        white: "YOUR_HEX_COLOR",
        background: "YOUR_HEX_COLOR",
      },
    },
  }}
/>;

Add it to Next.js

Next.js App Router System

Add styles

To import the styles, go to your app level layout.js file (RootLayout Component) and add the following import

import "../node_modules/@trully/true-deepfake-detection/dist/styles.css";

Example

import { Inter } from "next/font/google";
import "./globals.css";
import "../node_modules/@trully/true-deepfake-detection/dist/styles.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

TrueDeepfakeDetection is a client-side component, which means it needs to run on the client. By default, every component created in Next.js is executed on the server. You need to make sure our component runs only on the client.

Creating a client-side component

To ensure a component runs on the client, it should be marked as a client-side component using the "use client" tag. In the Next.js project, create a new component and mark it as a client-side component.

"use client";
import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

const Trully = () => {
  return (
    <TrueDeepfakeDetection
      configuration={{
        isDev: true,
        apiKey: "YOUR_API_KEY",
        handleData: (response) => {
          //What should be done with the obtained response?
        },
        handleError: (error) => {
          //What should be done if there is an error retrieving the response?
        },
      }}
    />
  );
};
export default Trully;

Import the client-side component

Once created, import it into any page

import Trully from "@/components/Trully";

export default function Home() {
  return <Trully />;
}

Next.js Page Router System

Add styles

To import the styles, go to your _app.js file and add the following import

import "../node_modules/@trully/true-deepfake-detection/dist/styles.css";

Example

import "../styles/globals.css";
import "../node_modules/@trully/true-deepfake-detection/dist/styles.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Creating a component

First, create a new component so you can configure TrueDeepfakeDetection component

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection-next12";

const Trully = () => {
  return (
    <TrueDeepfakeDetection
      configuration={{
        isDev: true,
        apiKey: "YOUR_API_KEY",
        handleData: (data) => {
          //What should be done with the obtained data?
        },
        handleError: (error) => {
          //What should be done if there is an error retrieving the data?
        },
      }}
    />
  );
};

export default Trully;

Dynamically import the component

Then, to ensure the component runs only on the client, make a dynamic import with ssr: false.

Example

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("@/components/Trully"), {
  ssr: false,
});

export default function Home() {
  return <DynamicComponent />;
}

Data handling

TrueDeepfakeDetection will perform an analysis of the video capture during the process and will make the result available by running the callback you declare in "handleData" key. Same way, if there is any problem during the process will run the callback in "handleError" key. Here are the values you can access through them.

handleData

DMResponse data

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

const handleData = (response) => {
  console.log("Response - isAlive", response.isAlive);
  console.log("Response - selfie", response.selfie);
  console.log("Response - userId", response.userId);
  console.log("Response - tag", response.tag);
  console.log("Response - sessionId", response.sessionId);
  console.log("Response - DM", response.DMResponse);
};

<TrueDeepfakeDetection
  configuration={{
    isDev: true,
    apiKey: "YOUR_API_KEY",
    user_id: "YOUR_USER_ID",
    handleData,
    handleError: (error) => {
      //What should be done if there is an error retrieving the response?
    },
  }}
/>;

handleError

We recommend you save this error into a log file.

Names Table

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

const handleError = (error) => {
  console.log("Error - name", error.name);
  console.log("Error - description", error.description);
  console.log("Error - error", error.error);
};

<TrueDeepfakeDetection
  configuration={{
    isDev: true,
    apiKey: "YOUR_API_KEY",
    user_id: "YOUR_USER_ID",
    handleData: (response) => {
      //What should be done with the obtained response?
    },
    handleError,
  }}
/>;

Full Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

const handleData = (response) => {
  console.log("Response - isAlive", response.isAlive);
  console.log("Response - selfie", response.selfie);
  console.log("Response - userId", response.userId);
  console.log("Response - tag", response.tag);
  console.log("Response - sessionId", response.sessionId);
  console.log("Response - DM", response.DMResponse);
};

const handleError = (error) => {
  console.log("Error - name", error.name);
  console.log("Error - description", error.description);
  console.log("Error - error", error.error);
};

<TrueDeepfakeDetection
  configuration={{
    isDev: true,
    apiKey: "YOUR_API_KEY",
    user_id: "YOUR_USER_ID",
    tag: "VALID_V4_UUID",
    handleData,
    handleError,
    showLogo: true,
    showExit: true,
    images: {
      logo: "YOUR_LOGO_PATH",
      lightIcon: "YOUR__ICON_PATH",
      crossIcon: "YOUR__ICON_PATH",
      iconCheck: "YOUR__ICON_PATH",
      videoFallback: "YOUR_IMAGE_PATH",
    },
    videos: {
      livenessVideo: "YOUR_VIDEO_PATH",
    },
    styles: {
      textsStyles: {
        fontFamily: "YOUR_FONT",
        // Colors should be expressed in hexadecimal
        primaryTextColor: "YOUR_HEX_COLOR",
        secondaryTextColor: "YOUR_HEX_COLOR",
      },
      colors: {
        primary: "YOUR_HEX_COLOR",
        secondary: "YOUR_HEX_COLOR",
        disabled: "YOUR_HEX_COLOR",
        white: "YOUR_HEX_COLOR",
        background: "YOUR_HEX_COLOR",
      },
    },
  }}
/>;