1. Guia Rápido

O Tema Interativo para personalização da biblioteca do Liveness 3D é uma plataforma essencial que permite a seleção de cores, bordas, arredondamento de bordas e sombreamento. Isso simplifica a geração de código, possibilitando a fácil implementação no seu Liveness 3D.

Aprenda a personalizar o Liveness 3D no React Native para integrar as propriedades customizadas em seu código de forma simples e ágil.

Siga os passos para interagir com o Tema Interativo.

Antes de começar

• Será necessário importar as fontes desejadas para a pasta de fontes do seu ambiente Android e iOS, nativamente arrastando e soltando seus arquivos .tff na pasta "assets res/fonts.xml" no Android, e no iOS registrando nos assets da aplicação.

Telas para customização

O Tema Interativo apresenta três telas de customização que orientam o usuário durante a execução do Liveness 3D:

• Na primeira tela, encontramos as instruções para a preparação do usuário, sendo o ponto inicial de interação com o Liveness 3D.
• A segunda tela é destinada à retentativa. Caso o usuário precise refazer a jornada, essa tela fornece diretrizes, incluindo um exemplo de foto ideal.
• A terceira tela consiste na tela de resultado. Nela, o usuário recebe a mensagem de conclusão do processo de Liveness.

Propriedades customizáveis

As propriedades destinadas à customização estão localizadas na segunda coluna do iframe. Nesta coluna, é possível encontrar o nome da propriedade (1) e sua respectiva descrição (2).

Para exportar o código das customizações

Passo 1: visualize o código

Após concluir todas as personalizações, é necessário clicar no botão "código" (1) para visualizar todas as modificações realizadas e, em seguida, exportá-las para incorporação no seu projeto.

Passo 2: importe as fontes

Coloque os arquivos de fontes na pasta "assets res/fonts.xml" no Android ou registre nos assets caso seja iOS.

Passo 3: inicie o objeto de theme

Utilize o exemplo a seguir para iniciar o theme do tema com as propriedades desejadas.

{
  appkey: "",
  ticket: "",
  environment: "HML",
   // THEME AQUI
  theme: {
    guidanceCustomizationHeaderFont: "#000000"
  },
   // FONTS AQUI
  fonts: {
  	guidanceCustomizationButtonFont: 'lobster',
  },
  liveness3Dtext: {
    READY_HEADER_1: "Prepare-se para seu",
    READY_HEADER_2: "reconhecimento facial."
  }
}

Passo 4: identifique e implemente as propriedades

O objeto de cores inclui uma série de propriedades que podem ser customizadas, divididas em categorias como Guidance, Botões, Ready e Retry Screen, entre outras.

O código das propriedades customizadas também reflete essa série mencionada anteriormente. Identifique e implemente de acordo com as respectivas customizações.

2. Tema Interativo - RN

Use a plataforma para iniciar as customizações do Liveness 3D.

Customizar Liveness 3D

3. Propriedades customizáveis

Abaixo, estão mapeadas as propriedades para customização do objeto JSON theme.

Customizações de telas Liveness3D

Guidance

Botões

Ready Screen

Retry Screen

Result Screen Customization

Oval Customization

Frame Customization

Overlay Customization

Feedback Customization

Cancel Button

Customização dos Textos

Da mesma forma que criamos um objeto dento do options, criamos para as fontes no 3D, seguindo esse exemplo:

{
  appkey: "",
  ticket: "",
  environment: "HML",
  theme: {
    guidanceCustomizationHeaderFont: "#000000"
  },
  //TEXTOS AQUI
  liveness3Dtext: {
    READY_HEADER_1: "Prepare-se para seu",
    READY_HEADER_2: "reconhecimento facial."
  }
}

Ready Screen

Retry Screen

Result Screen

Feedback