Liveness 3D - Tema Interativo

Plataforma interativa de customizações do Liveness3DTheme() para dispositivos iOS

1. Guia Rápido

O Tema Interativo para personalização da biblioteca do OILiveness3D é 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 iOS 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

  • Além disso, será necessário importar as fontes desejadas para o seu projeto para que elas sejam aplicadas corretamente.

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.
Sequência de telas exibidas no iframe para customização.

Sequência de telas exibidas no iframe para customização.

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).

Coluna de propriedades customizáveis.

Coluna de propriedades customizáveis.

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.

Localização do botão "código" para exportação das customizações.

Passo 2: adicione o código gerado

Copie e cole no seu projeto o código de customização gerado pelo Tema Interativo e, se necessário, ajuste as propriedades conforme sua necessidade. Logo abaixo, na seção Propriedades customizáveis, você encontrará as propriedades ilustradas com imagens e identificadores, que facilitam o processo de configuração e ajustes.

Passo 3: importe as fontes

Adicione os arquivos no projeto e registre as fontes no Info.plist.

Print do XCode informando como adicionar arquivos de fontes no projeto

Como adicionar arquivos de fontes no projeto

Info.plist do seu projeto utilizando  a propriedade "Fonts provided by application"

Info.plist do seu projeto utilizando a propriedade "Fonts provided by application"

Passo 4: forneça o objeto de customização para o SDK

O objeto de customização (theme) que foi gerado deve ser passado como argumento para a struct Liveness3DUser, que possui dois parâmetros para tal:

  • defaultTheme: o tema padrão aplicado pelo SDK.
  • lowLightTheme: o tema aplicado quando o SDK reconhece que o ambiente possui pouca luminosidade durante o processo de Liveness.
let liveness3DUser = Liveness3DUser(
    appKey: "APP_KEYS",
    environment: environment,
    defaultTheme: theme,
    lowLightTheme: theme
)

let viewController = Liveness3DViewController(
    liveness3DUser: liveness3DUser,
    delegate: delegate
)
present(viewController, animated: true)

2. Tema Interativo - iOS

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


3. Propriedades customizáveis

Abaixo, estão mapeadas as propriedades de customização do Liveness3DTheme.

Guidance

IdentificadorPropriedadeTipo
1guidanceCustomizationHeaderFontUIFont?
2guidanceCustomizationSubtextFontUIFont?
3guidanceCustomizationButtonBackgroundNormalColorUIColor
3guidanceCustomizationButtonBackgroundHighlightColorUIColor
3guidanceCustomizationButtonBackgroundDisabledColorUIColor
3guidanceCustomizationButtonTextNormalColorUIColor
3guidanceCustomizationButtonTextHighlightColorUIColor
3guidanceCustomizationButtonTextDisabledColorUIColor
3guidanceCustomizationButtonFontUIFont?
3guidanceCustomizationButtonBorderColorUIColor
3guidanceCustomizationButtonBorderWidthInt32
3guidanceCustomizationButtonCornerRadiusInt32

Ready Screen

IdentificadorPropriedadeTipo
1readyScreenCustomizationHeaderFontUIFont?
1readyScreenCustomizationHeaderTextColorUIColor
1readyScreenCustomizationTextBackgroundColorUIColor?
1readyScreenCustomizationTextBackgroundCornerRadiusInt32
2readyScreenCustomizationSubtextFontUIFont?
2readyScreenCustomizationSubtextTextColorUIColor

Retry Screen

IdentificadorPropriedadeTipo
1retryScreenCustomizationHeaderFontUIFont?
1retryScreenCustomizationHeaderTextColorUIColor
2retryScreenCustomizationSubtextFontUIFont?
2retryScreenCustomizationSubtextTextColorUIColor
3retryScreenCustomizationImageBorderColorUIColor
3retryScreenCustomizationImageBorderWidthInt32
3retryScreenCustomizationImageCornerRadiusInt32

Result Screen

IdentificadorPropriedadeTipo
1resultScreenCustomizationAnimationRelativeScaleFloat
1resultScreenCustomizationAnimationStyleResultAnimationStyle
2resultScreenCustomizationShowUploadProgressBarBool
2resultScreenCustomizationUploadProgressFillColorUIColor
2resultScreenCustomizationUploadProgressTrackColorUIColor
3resultScreenCustomizationMessageFontUIFont?
3resultScreenCustomizationTextColorUIColor

Frame

IdentificadorPropriedadeTipo
1frameCustomizationBorderWidthInt32
1frameCustomizationBorderColorUIColor
1frameCustomizationBackgroundColorUIColor
1frameCustomizationCornerRadiusInt32
1frameCustomizationShadowLiveness3DShadow?

Oval

IdentificadorPropriedadeTipo
1ovalCustomizationProgressColor1UIColor
1ovalCustomizationProgressColor2UIColor
1ovalCustomizationProgressStrokeWidthInt32
1ovalCustomizationProgressRadialOffsetInt32
2ovalCustomizationStrokeColorUIColor
2ovalCustomizationStrokeWidthInt32

Overlay

IdentificadorPropriedadeTipo
1overlayCustomizationBackgroundColorUIColor
1overlayCustomizationBrandingImageUIImage?
1overlayCustomizationShowBrandingImageBool

Feedback

IdentificadorPropriedadeTipo
1feedbackCustomizationTextColorUIColor
1feedbackCustomizationTextFontUIFont
2feedbackCustomizationCornerRadiusInt32
2feedbackCustomizationBackgroundColorUIColor
2feedbackCustomizationShadowLiveness3DShadow

Cancel Button

IdentificadorPropriedadeTipo
1cancelButtonCustomizationCustomImageUIImage?
1cancelButtonCustomizationLocationCancelButtonLocation

4. Customização dos textos

Ready Screen

IdentificadorTexto padrão
readyHeader1"Vamos"
readyHeader2"começar!"
readyMessage1"Posicione seu rosto na moldura,"
readyMessage2"se aproxime e toque em começar."
readyButton"Começar"

Retry Screen

IdentificadorTexto padrão
retryHeader"Vamos tentar novamente?"
retrySubheader"Siga o exemplo de foto ideal abaixo:"
retryYourPicture"Não sorria"
retryIdealPicture"Evite reflexos e iluminação extrema"
retryMessageSmile"Precisamos de uma foto nítida"
retryMessageLightning"Sua foto"
retryMessageContrast"Foto ideal"
retryButton"Tentar novamente"

Result Screen

IdentificadorTexto padrão
resultUploadMessage"Enviando"
resultSuccessMessage"Tudo certo!"

Feedback

IdentificadorTexto padrão
feedbackCenterFace"Centralize seu rosto"
feedbackFaceNotFound"Posicione seu rosto"
feedbackFaceNotLookingStraightAhead"Olhe para frente"
feedbackFaceNotUpright"Mantenha a cabeça reta"
feedbackHoldSteady"Segure firme"
feedbackMovePhoneAway"Afaste-se"
feedbackMovePhoneCloser"Aproxime-se"
feedbackMovePhoneToEyeLevel"Mantenha o telefone ao nível dos olhos"
feedbackUseEvenLighting"Encontre um ambiente iluminado"
feedbackFrameYourFace"Vamos começar"
feedbackPositionFaceStraightInOval"Olhe para frente"
feedbackHoldSteady1"Segure firme por: 3"
feedbackHoldSteady2"Segure firme por: 2"
feedbackHoldSteady3"Segure firme por: 1"
feedbackRemoveDarkGlasses"Remova seus óculos escuros"
feedbackNeutralExpression"Olhe para a câmera sem sorrir"
feedbackConditionsTooBright"Evite um ambiente muito iluminado"
feedbackBrightenYourEnvironment"Encontre um ambiente bem iluminado"