Guia Detalhado de Uso

Sumário

  1. Visão Geral
  2. Requisitos de Compatibilidade
  3. Instalação
  4. Configuração
  5. Criação do provedor de Liveness
    5.1. Provedor IProov
    5.2. Provedor Facetec
  6. Estrutura das Classes Importantes
  7. Principais Classes e Métodos de Chamada
  8. Fluxo de Telas
    8.1. Telas CertiFace (Compartilhadas)
    8.2. Telas IProov
    8.3. Telas Facetec
  9. Assets e Fontes
  10. Ambiente de Testes
  11. Boas Práticas
  12. Changelogs e Versões

Visão Geral

O CertiFace RN SDK (@certiface/sdk) é um SDK para React Native que permite integrar, dentro de aplicativos móveis, as soluções biométricas e de identificação da CertiFace, como verificação facial (liveness), captura guiada e demais serviços de identidade digital.

Ele exige configurações mínimas (permissões de câmera e ajustes no iOS/Android), mas o uso no JavaScript é simples e direto.

O SDK oferece:

  • Integração unificada dos serviços CertiFace no React Native
  • Acesso a funcionalidades biométricas (ex.: liveness, face match, captura de documentos, dependendo do módulo habilitado)
  • Liveness com FaceTec e iProov
  • Experiência guiada de captura com interface própria do SDK
  • Comunicação segura com os serviços remotos da CertiFace
  • Retornos detalhados sobre o resultado da verificação
  • Camada nativa pronta (TurboModules)
  • Customização visual avançada via CertifaceTheme

Versões nativas embutidas (1.1.3):

PlataformaDependênciaVersão
Androidbr.com.certiface:certifacesdk1.2.0
iOSCertifaceSDK1.7.0

Requisitos de Compatibilidade

  • React Native ≥ 0.79 (compatível com 0.60+)
  • Android API ≥ 26
  • iOS ≥ 12.0
  • TypeScript ≥ 4.0 (recomendado)
  • Node.js 18+

Ambientes suportados:

ValorDescrição
Environment.HMLHomologação
Environment.PRDProdução

Instalação

Via NPM

npm install @certiface/sdk

Ou

yarn add @certiface/sdk

Via Git (alternativa)

yarn add @certiface/sdk@git+https://github.com/oititec/certiface-sdk-rn.git#1.1.3

Importação

import {
  CertifaceSDK,
  Environment,
  LivenessProvider,
  type CertifaceTheme,
  type LivenessResult,
} from '@certiface/sdk';

Nota: o tipo de tema foi renomeado de OitiTheme para CertifaceTheme a partir da série 1.1.x.


Configuração

Android

  1. Configure os repositórios necessários no android/build.gradle:
allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url 'https://raw.githubusercontent.com/oititec/android-oiti-sdk-versions/master'
        }
    }
}
  1. Adicione as permissões no android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />

iOS

  1. Configure as fontes do CocoaPods no ios/Podfile:
source 'https://github.com/oititec/ios-artifactory.git'
source 'https://cdn.cocoapods.org/'
  1. Adicione as permissões no ios/YourApp/Info.plist:
<key>NSCameraUsageDescription</key>
<string>Precisamos acessar sua câmera para verificação de identidade</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Precisamos acessar suas fotos para verificação de identidade</string>
  1. Execute a instalação dos pods:
cd ios && pod install

Criação do provedor de Liveness

Esta seção descreve como inicializar e configurar o provedor de captura/liveness utilizado pelo SDK.

Provedores Disponíveis

ProvedorIdentificador EnumSuporte
IProovLivenessProvider.IPROOVSuporte atual
FaceTecLivenessProvider.FACETECSuporte atual
Novo Provedorem brevePlanejado

Provedor: IProov

Este é o provedor atualmente integrado ao SDK. Ele oferece uma jornada de verificação baseada em luz e detecção passiva.

Execução da Jornada

const result: LivenessResult = await CertifaceSDK.startJourney(
  appKey,
  Environment.HML,
  LivenessProvider.IPROOV,
  false
);

Personalização Visual

Personalize a interface usando CertifaceTheme:

const customTheme: CertifaceTheme = {
  iproov: {
    fontResource: 'sixty',
    fontPath: 'fonts/sixty.ttf',
    colors: {
      closeButtonColor: '#FFFFFF',
      title: '#FFFFFF',
      titleBackground: '#2E2E2E',
      promptText: '#FFFFFF',
      promptBackground: '#1A1A1A',
      background: '#FF6B35',
      ovalReady: '#FF6B35',
      ovalNotReady: '#FF3030',
      ovalCapturing: '#FFFFFF',
      ovalCompleted: '#FF6B35',
      filterLineDrawingForeground: '#FFFFFF',
      filterLineDrawingBackground: '#000000',
    },
    texts: {
      title: 'Verificação Biométrica',
    },
    assets: {
      closeButtonIcon: 'close_icon',
      logoImage: 'logo',
    },
    fonts: {
      instructionsTitleFont: 'sixty',
      instructionsCaptionFont: 'sixty',
      instructionsDocumentTypesInstructionsFont: 'sixty',
      instructionsDocumentTipsInstructionsFont: 'sixty',
      instructionsButtonFont: 'sixty',
      permissionTitleFont: 'sixty',
      permissionCaptionFont: 'sixty',
      permissionButtonFont: 'sixty',
      resultMessageFont: 'sixty',
      resultRetryButtonFont: 'sixty',
    },
    configuration: {
      timeoutSecs: 60,
      orientationGpa: 'PORTRAIT',
      orientationLa: 'PORTRAIT',
    },
    flags: {
      isEnabledScreenShots: true,
      disableExteriorEffects: false,
      promptRoundedCorners: true,
    },
  },
  instructions: {
    configuration: {
      showInstructionScreen: true,
    },
    flags: {
      statusBarIsDarkIcons: false,
    },
    colors: {
      statusBar: '#2E2E2E',
      background: '#2E2E2E',
      backButtonColor: '#FFFFFF',
      bottomSheet: '#1A1A1A',
      title: '#FFFFFF',
      caption: '#CCCCCC',
      firstInstructionTitle: '#FFFFFF',
      secondInstructionTitle: '#FFFFFF',
      firstInstructionIconBackground: '#FF6B35',
      firstInstructionIconBorder: '#FF6B35',
      secondInstructionIconBackground: '#FF6B35',
      secondInstructionIconBorder: '#FF6B35',
      continueButtonTextColor: '#FFFFFF',
      continueButtonBackground: '#FF6B35',
      continueButtonBorder: '#FF6B35',
    },
    texts: {
      title: 'Verificação de Identidade',
      caption: 'Siga as instruções para completar o processo',
      firstInstruction: 'Escolha um ambiente bem iluminado',
      secondInstruction: 'Não use bonés, máscaras ou óculos escuros',
      continueButton: 'Continuar',
    },
    assets: {
      backButtonIcon: 'close_icon',
      contextImage: 'neutral_face',
      contextImageScale: 'fit',
      contextImageHeightFraction: 0.8,
      firstInstructionIcon: 'backhand_left',
      secondInstructionIcon: 'camera_icon',
      instructionIconScale: 'fit',
      instructionIconSize: 60,
    },
    fonts: {
      title: 'sixty',
      caption: 'sixty',
      firstInstructionTitle: 'sixty',
      secondInstructionTitle: 'sixty',
      continueButton: 'sixty',
    },
    sizes: {
      bottomSheetCornerRadius: 16,
      titleFontSize: 20,
      captionFontSize: 16,
      firstInstructionTitleFontSize: 14,
      secondInstructionTitleFontSize: 14,
      continueButtonFontSize: 16,
    },
  },
  permission: {
    flags: {
      statusBarIsDarkIcons: false,
    },
    colors: {
      statusBar: '#2E2E2E',
      background: '#2E2E2E',
      backButtonIcon: '#FFFFFF',
      backButtonBackground: 'transparent',
      backButtonBorder: 'transparent',
      cameraImage: '#FFFFFF',
      title: '#FFFFFF',
      caption: '#CCCCCC',
      checkPermissionButtonText: '#FFFFFF',
      checkPermissionButtonBackground: '#FF6B35',
      checkPermissionButtonBorder: '#FF6B35',
      bottomSheet: '#1A1A1A',
      bottomSheetTitle: '#FFFFFF',
      bottomSheetCaption: '#CCCCCC',
      openSettingsButtonText: '#FFFFFF',
      openSettingsButtonBackground: '#FF6B35',
      openSettingsButtonBorder: '#FF6B35',
      closeButtonText: '#FFFFFF',
      closeButtonBackground: 'transparent',
      closeButtonBorder: 'transparent',
    },
    texts: {
      title: 'Permissões Necessárias',
      caption: 'Precisamos acessar sua câmera para a verificação biométrica',
      checkPermissionButton: 'Permitir Acesso',
      bottomSheetTitle: 'Acesso à câmera negado',
      bottomSheetCaption: 'Abra as configurações do dispositivo e permita o uso da câmera',
      openSettingsButton: 'Abrir Configurações',
      closeButton: 'Fechar',
    },
    assets: {
      backButtonIcon: 'close_icon',
      cameraImage: 'camera_icon',
    },
    fonts: {
      title: 'sixty',
      caption: 'sixty',
      checkPermissionButton: 'sixty',
      bottomSheetTitle: 'sixty',
      bottomSheetCaption: 'sixty',
      openSettingsButton: 'sixty',
      closeButton: 'sixty',
    },
    sizes: {
      titleFontSize: 20,
      captionFontSize: 16,
      checkPermissionButtonFontSize: 16,
      bottomSheetTitleFontSize: 20,
      bottomSheetCaptionFontSize: 16,
      openSettingsButtonFontSize: 16,
      closeButtonFontSize: 16,
    },
  },
  processing: {
    flags: {
      statusBarIsDarkIcons: false,
    },
    colors: {
      statusBar: '#1A1A1A',
      background: '#1A1A1A',
      loading: '#FFFFFF',
    },
    sizes: {
      loadingIndicatorSize: 100,
      loadingIndicatorWidth: 10,
      spinnerSize: 100,
      spinnerWidth: 10,
    },
  },
  result: {
    flags: {
      successStatusBarIsDarkIcons: true,
      errorStatusBarIsDarkIcons: true,
    },
    colors: {
      successStatusBar: '#E8F5E8',
      successBackground: '#E8F5E8',
      successText: '#2E7D32',
      errorStatusBar: '#FFEBEE',
      errorBackground: '#FFEBEE',
      errorText: '#C62828',
      retryBackground: '#C62828',
      retryText: '#FFEBEE',
      retryButtonText: '#FF6B35',
      retryButtonBackground: '#FFFFFF',
      retryButtonBorder: '#FFFFFF',
    },
    texts: {
      success: 'Verificação concluída com sucesso!',
      error: 'Houve um erro na verificação. Tente novamente.',
      retryButton: 'Tentar Novamente',
    },
    assets: {
      successImage: 'success_icon',
      errorImage: 'error_icon',
      retryImage: 'return_button',
    },
    fonts: {
      text: 'sixty',
      retryButton: 'sixty',
    },
    sizes: {
      textFontSize: 20,
      retryButtonFontSize: 16,
    },
  },
};

const result = await CertifaceSDK.startJourney(
  appKey,
  Environment.HML,
  LivenessProvider.IPROOV,
  true,
  customTheme
);

Observações: iproov.assets.closeButtonIcon define o ícone de fechar na captura (Android e iOS); iproov.colors.closeButtonColor aplica a cor/tint. processing.sizes.spinnerSize/spinnerWidth são iOS; loadingIndicatorSize/loadingIndicatorWidth são Android. Em result.colors, prefira retryButtonBackground para o botão de tentar novamente.

Novidades relevantes (1.1.2+):

  • iproov.fontResource — fonte base por nome de recurso
  • iproov.fontPath — fallback por caminho do arquivo (ex.: fonts/sixty.ttf)
  • iproov.colors.closeButtonColor — cor do botão fechar
  • Aliases de cores aceitos: titleColor, headerBackgroundColor, promptTextColor, promptBackgroundColor, ovalStrokeColor, etc.

Novidades (1.1.3):

  • instructions.colors.backButtonColor — tint do ícone de voltar (Android e iOS)
  • instructions.assets.instructionIconScale e instructionIconSize — ícones circulares de instrução (iOS; escala também no Android)
  • Cores de fundo/borda dos ícones de instrução no Android (firstInstructionIcon*, secondInstructionIcon*)
  • result.assets.successImage / errorImage (Android e iOS); retryImage (iOS)
  • Assets padrão incluídos no pacote iOS do SDK
  • Dependências nativas: Android certifacesdk 1.2.0, iOS CertifaceSDK 1.7.0

Provedor: Facetec

A FaceTec oferece um fluxo de verificação com detecção ativa (movimentos, rotação de rosto), com alta personalização visual e textual.

Execução da Jornada

const result: LivenessResult = await CertifaceSDK.startJourney(
  appKey,
  Environment.HML,
  LivenessProvider.FACETEC,
  false
);

Personalização Visual

Personalize a interface usando CertifaceTheme:

const customTheme: CertifaceTheme = {
  facetec: {
    colors: {
      readyScreenHeader: '#FFFFFF',
      readyScreenSubtext: '#CCCCCC',
      readyScreenOvalFill: '#FF6B35',
      resultScreenMessage: '#FF6B35',
      ovalStroke: '#FF6B35',
      ovalProgressFirst: '#FF6B35',
      ovalProgressSecond: '#FFD700',
      frameBorder: '#FF6B35',
      frameBackground: '#1A1A1A',
      guidanceButtonBackgroundNormal: '#FF6B35',
      guidanceButtonTextNormal: '#FFFFFF',
    },
    texts: {
      readyHeader1: 'Prepare-se',
      readyHeader2: 'para verificação',
      readyMessage1: 'Posicione seu rosto',
      readyMessage2: 'dentro do círculo',
      readyButton: 'Iniciar',
      retryHeader: 'Vamos tentar novamente',
      retrySubheader: 'Ajustes necessários',
      retryButton: 'Tentar Novamente',
      resultSuccessMessage: 'Verificação concluída!',
      feedbackCenterFace: 'Centralize seu rosto',
      feedbackHoldSteady: 'Mantenha-se parado',
      feedbackMovePhoneCloser: 'Aproxime o dispositivo',
      feedbackMovePhoneAway: 'Afaste o dispositivo',
    },
    assets: {
      overlayBrandImage: 'logo',
      cancelButtonIcon: 'cancel_button',
    },
    fonts: {
      readyScreenHeader: 'sixty',
      resultScreenMessage: 'sixty',
      feedbackMessage: 'sixty',
    },
    sizes: {
      guidanceButtonBorderWidth: 0,
      frameBorderWidth: 2,
      frameCornerRadius: 8,
      feedbackCornerRadius: 12,
    },
    flags: {
      overlayShowBrandingImage: false,
      feedbackEnablePulsatingText: true,
    },
    configuration: {
      cancelButtonLocation: 'TOP_LEFT',
    },
  },
};

const result = await CertifaceSDK.startJourney(
  appKey,
  Environment.HML,
  LivenessProvider.FACETEC,
  true,
  customTheme
);

Novidades relevantes (1.1.2+):

  • facetec.sizes — dimensões (bordas, raios, elevação)
  • facetec.flagsoverlayShowBrandingImage, feedbackEnablePulsatingText (Android)
  • facetec.configurationcancelButtonLocation (TOP_LEFT | TOP_RIGHT), exitAnimationStyle

No Android, algumas cores padrão do FaceTec divergem do iOS. Defina explicitamente guidanceButtonTextNormal, guidanceButtonBackgroundNormal e guidanceButtonBackgroundDisabled para paridade visual.


Estrutura das Classes Importantes

CertifaceSDK

MétodoDescrição
CertifaceSDK.checkCameraPermission()Verifica se a permissão de câmera foi concedida
CertifaceSDK.requestCameraPermission()Solicita permissão de acesso à câmera
CertifaceSDK.startJourney(...)Inicia o fluxo de liveness

Enums

NomeDescrição
LivenessProviderFACETEC ou IPROOV
EnvironmentHML ou PRD

Tipos de Resultado

interface LivenessResult {
  valid: boolean;
  codID: string;
  cause: string;
  protocol: string;
  scanResultBlob: string;
}
TipoDescrição
LivenessResultResultado da validação de liveness
LivenessResponseUnião de sucesso/erro usada no parse da ponte nativa

Tema Principal

interface CertifaceTheme {
  provider?: LivenessProvider;
  facetec?: FacetecTheme;
  iproov?: IProovTheme;
  instructions?: InstructionsTheme;
  permission?: PermissionTheme;
  processing?: ProcessingTheme;
  result?: ResultTheme;
}

Principais Classes e Métodos de Chamada

ParâmetroDescrição
appKeyChave de aplicação fornecida pela CertiFace
environmentEnvironment.HML ou Environment.PRD
providerLivenessProvider.FACETEC ou LivenessProvider.IPROOV
isCustomEnabledHabilita tema personalizado (padrão: false)
themeObjeto CertifaceTheme com customizações

Assinatura:

CertifaceSDK.startJourney(
  appKey: string,
  environment: Environment,
  provider: LivenessProvider,
  isCustomEnabled?: boolean,
  theme?: CertifaceTheme
): Promise<LivenessResult>

Fluxo de Telas

Legenda de plataforma nas tabelas:

ValorSignificado
AmbosAndroid e iOS
AndroidApenas Android
iOSApenas iOS

Observações importantes

  • statusBar, successStatusBar e errorStatusBar são exclusivas do Android
  • instructions.flags.statusBarIsDarkIcons é somente Android
  • Na tela de permission, o Android usa layout simplificado; cores/textos de bottom sheet (bottomSheet*, openSettings*, closeButton*) aplicam-se ao iOS
  • result.colors.retryBackground tem semântica distinta por plataforma — prefira retryButtonBackground para o botão
  • result.assets.retryImage e result.colors.retryText são iOS
  • facetec.colors.readyScreenOvalFill, guidanceForeground, guidanceBackground, retryScreenOvalStroke e resultScreenBackground são Android
  • facetec.assets.resultScreenCustomActivityIndicatorImage é Android

Telas CertiFace (compartilhadas)

Telas genéricas, reutilizadas por todos os provedores. Permitem customização de cores, textos, assets, fontes e algumas configurações.

Tela de Instruções (instructions)

Cores (instructions.colors)

PropriedadePlataformaDescriçãoTipoExemplo
-statusBarAndroidCor da barra de status do sistemastring"#2E2E2E"
1backButtonIconAmbosCor do ícone do botão voltarstring"#FFFFFF"
1backButtonColorAmbosTint do ícone quando assets.backButtonIcon está definidostring"#00A89C"
1backButtonBackgroundiOSCor de fundo do botão voltarstring"#2E2E2E"
1backButtonBorderiOSCor da borda do botão voltarstring"#2E2E2E"
2backgroundAmbosCor de fundo da área principalstring"#2E2E2E"
3titleAmbosCor do texto do títulostring"#000000"
4firstInstructionTitleAmbosCor do texto da primeira instruçãostring"#000000"
4firstInstructionIconBackgroundAndroidCor de fundo do círculo do primeiro íconestring"#00A89C"
4firstInstructionIconBorderAndroidCor da borda do círculo do primeiro íconestring"#00A89C"
5secondInstructionTitleAmbosCor do texto da segunda instruçãostring"#000000"
5secondInstructionIconBackgroundAndroidCor de fundo do círculo do segundo íconestring"#00A89C"
5secondInstructionIconBorderAndroidCor da borda do círculo do segundo íconestring"#00A89C"
6bottomSheetAmbosCor de fundo do painel inferiorstring"#FFFFFF"
7captionAmbosCor do texto descritivo abaixo do títulostring"#666666"
10continueButtonTextAmbosAlias legado para cor do texto do botão continuarstring"#FFFFFF"
10continueButtonTextColorAmbosCor do texto do botão continuarstring"#FFFFFF"
10continueButtonBackgroundAmbosCor de fundo do botão continuarstring"#00C853"
10continueButtonBorderiOSCor da borda do botão continuarstring"#00C853"

Textos (instructions.texts)

PropriedadePlataformaDescriçãoTipoExemplo
3titleAmbosTexto do título principal da telastring"Verificação de Identidade"
7captionAmbosTexto da legenda abaixo do títulostring"Siga as instruções para completar o processo"
8firstInstructionAmbosTexto da primeira instruçãostring"Escolha um ambiente bem iluminado"
9secondInstructionAmbosTexto da segunda instruçãostring"Não use bonés, máscaras ou óculos escuros"
10continueButtonAmbosTexto do botão continuarstring"Continuar"

Assets (instructions.assets)

PropriedadePlataformaDescriçãoTipoExemplo
1backButtonIconAmbosNome do asset para o botão voltarstring"close_icon"
2contextImageAmbosImagem ilustrativa exibida na área principalstring"neutral_face"
2contextImageScaleAndroidEscala da imagem: fit, fillBounds, crop, inside, none, fillWidth, fillHeightstring"fillBounds"
2contextImageHeightFractionAndroidFração da altura disponível (0.0-1.0)number0.8
4firstInstructionIconAmbosNome do asset para o ícone da primeira instruçãostring"backhand_left"
5secondInstructionIconAmbosNome do asset para o ícone da segunda instruçãostring"camera_icon"
-instructionIconScaleAmbosEscala do ícone dentro do círculo: fit, fillBounds, crop, inside, nonestring"fillBounds"
-instructionIconSizeAmbosTamanho do círculo dos ícones (dp no Android, pt no iOS)number60

Fontes (instructions.fonts)

PropriedadePlataformaDescriçãoTipoExemplo
3titleAmbosFonte do títulostring"sixty"
7captionAmbosFonte da legendastring"sixty"
4firstInstructionTitleAmbosFonte da primeira instruçãostring"sixty"
5secondInstructionTitleAmbosFonte da segunda instruçãostring"sixty"
10continueButtonAmbosFonte do botão continuarstring"sixty"

Tamanhos (instructions.sizes)

PropriedadePlataformaDescriçãoTipo
3titleFontSizeAmbosTamanho do títulonumber
4firstInstructionTitleFontSizeAmbosTamanho da primeira instruçãonumber
5secondInstructionTitleFontSizeAmbosTamanho da segunda instruçãonumber
6bottomSheetCornerRadiusAmbosRaio do bottom sheetnumber
7captionFontSizeAmbosTamanho da legendanumber
10continueButtonFontSizeAmbosTamanho do texto do botão continuarnumber

Configuração e flags

PropriedadePlataformaDescrição
-configuration.showInstructionScreenAmbosExibe ou oculta a tela de instruções
-flags.statusBarIsDarkIconsAndroidÍcones escuros na status bar

Formato dos assets de instrução

  • contextImage: use ilustração ou ícone sem fundo (PNG/SVG com transparência). O fundo vem de instructions.colors.background.
  • contextImageScale = "fit": mantém proporção e encaixa a imagem na área disponível.
  • contextImageScale = "fillBounds": estica a imagem para preencher a área. Útil para imagens com fundo sólido.
  • contextImageScale = "crop": centraliza e corta preservando proporção.
  • No iOS, contextImageScale e contextImageHeightFraction seguem o contrato semântico, mas o layout da imagem de contexto é fixo no SDK iOS.
  • instructionIconScale = "fit": mantém glifo com padding interno.
  • instructionIconScale = "fillBounds" ou "crop": a imagem preenche o círculo; áreas transparentes exibem as cores de fundo/borda dos ícones.
  • No iOS, instructionIconScale, instructionIconSize e cores de fundo/borda são aplicados no bridge RN.

Tela de Permissão (permission)

Tela para solicitar permissão de câmera ao usuário.

Cores (permission.colors)

PropriedadePlataformaDescriçãoTipoExemplo
-statusBarAndroidCor da barra de status do sistemastring"#FFFFFF"
1backButtonIconiOSCor do ícone do botão voltar/fecharstring"#000000"
1backButtonBackgroundiOSCor de fundo do botão voltar/fecharstring"transparent"
1backButtonBorderiOSCor da borda do botão voltar/fecharstring"transparent"
2cameraImageiOSCor do ícone/imagem da câmerastring"#FFFFFF"
3titleAmbosCor do título principalstring"#000000"
4captionAmbosCor da legendastring"#666666"
5checkPermissionButtonTextAmbosCor do texto do botão de permissãostring"#FFFFFF"
5checkPermissionButtonBackgroundAmbosCor de fundo do botão de permissãostring"#00C853"
5checkPermissionButtonBorderiOSCor da borda do botão de permissãostring"#00C853"
6backgroundAmbosCor de fundo principal da telastring"#FFFFFF"
6bottomSheetiOSCor do painel inferiorstring"#FFFFFF"
6bottomSheetTitleiOSCor do título do bottom sheetstring"#000000"
-bottomSheetCaptioniOSCor da legenda do bottom sheetstring"#666666"
-openSettingsButtonTextiOSCor do texto do botão abrir configuraçõesstring"#00C853"
-openSettingsButtonBackgroundiOSCor de fundo do botão abrir configuraçõesstring"#FFFFFF"
-openSettingsButtonBorderiOSCor da borda do botão abrir configuraçõesstring"#00C853"
-closeButtonTextiOSCor do texto do botão fecharstring"#00C853"
-closeButtonBackgroundiOSCor de fundo do botão fecharstring"transparent"
-closeButtonBorderiOSCor da borda do botão fecharstring"transparent"

Textos (permission.texts)

PropriedadePlataformaDescriçãoTipoExemplo
3titleAmbosTexto do título principalstring"Permissões Necessárias"
4captionAmbosTexto explicativo abaixo do títulostring"Precisamos acessar sua câmera"
5checkPermissionButtonAmbosTexto do botão para solicitar permissãostring"Permitir Acesso"
6bottomSheetTitleiOSTítulo do bottom sheetstring"Acesso à câmera negado"
-bottomSheetCaptioniOSLegenda do bottom sheetstring"Abra as configurações do dispositivo"
-openSettingsButtoniOSTexto do botão para abrir configuraçõesstring"Abrir Configurações"
-closeButtoniOSTexto do botão fecharstring"Fechar"

Assets (permission.assets)

PropriedadePlataformaDescriçãoTipoExemplo
1backButtonIconAmbosNome do asset do botão voltar/fecharstring"close_icon"
2cameraImageAmbosNome do asset da câmerastring"camera_icon"

Fontes (permission.fonts)

PropriedadePlataformaDescriçãoTipoExemplo
3titleAmbosFonte do títulostring"sixty"
4captionAmbosFonte da legendastring"sixty"
5checkPermissionButtonAmbosFonte do botão de permissãostring"sixty"
6bottomSheetTitleiOSFonte do título do bottom sheetstring"sixty"
-bottomSheetCaptioniOSFonte da legenda do bottom sheetstring"sixty"
-openSettingsButtoniOSFonte do botão abrir configuraçõesstring"sixty"
-opentSettingsButtoniOSAlias legado de openSettingsButtonstring"sixty"
-closeButtoniOSFonte do botão fecharstring"sixty"

Flags e tamanhos (permission.flags / permission.sizes)

PropriedadePlataformaDescriçãoTipo
1flags.statusBarIsDarkIconsAndroidÍcones escuros na status barboolean
3sizes.titleFontSizeAmbosTamanho do títulonumber
4sizes.captionFontSizeAmbosTamanho da legendanumber
5sizes.checkPermissionButtonFontSizeAmbosTamanho do botão de permissãonumber
6sizes.bottomSheetTitleFontSizeiOSTamanho do título do bottom sheetnumber
-sizes.bottomSheetCaptionFontSizeiOSTamanho da legenda do bottom sheetnumber
-sizes.openSettingsButtonFontSizeiOSTamanho do botão abrir configuraçõesnumber
-sizes.closeButtonFontSizeiOSTamanho do botão fecharnumber

Tela de Processamento (processing)

Tela exibida durante o processamento do liveness.


Cores (processing.colors)

PropriedadePlataformaDescriçãoTipoExemplo
-statusBarAndroidCor da barra de status do sistemastring"#1A1A1A"
1loadingAmbosCor do indicador de carregamentostring"#FFFFFF"
2backgroundAmbosCor de fundo da telastring"#1A1A1A"

Flags e tamanhos (processing.flags / processing.sizes)

PropriedadePlataformaDescriçãoTipo
-flags.statusBarIsDarkIconsAndroidÍcones escuros na status barboolean
1sizes.loadingIndicatorSizeAmbosTamanho do loadingnumber
1sizes.loadingIndicatorWidthAndroid/iProovLargura do indicadornumber
1sizes.spinnerSizeiOSTamanho do spinnernumber
1sizes.spinnerWidthiOSLargura do spinnernumber

Tela de Resultado (result)

Tela exibida após a conclusão do processo de liveness, mostrando sucesso ou erro.


Cores (result.colors)

PropriedadePlataformaDescriçãoTipoExemplo
2successTextAmbosCor do texto de sucessostring"#2E7D32"
2retryTextiOSCor do texto de retrystring"#FFEBEE"
2errorBackgroundAmbosFundo da tela de errostring"#FFEBEE"
2errorTextAmbosCor do texto de errostring"#C62828"
3retryButtonTextAmbosCor do texto do botão tentar novamentestring"#FF6B35"
3retryButtonBackgroundAmbosFundo do botão tentar novamentestring"#FFFFFF"
3retryButtonBorderiOSBorda do botão tentar novamentestring"#FFFFFF"
4retryBackgroundAmbosiOS: fundo da tela de retry. Android/iProov: fallback para o botão retrystring"#C62828"
4successBackgroundAmbosFundo da tela de sucessostring"#E8F5E8"
-successStatusBarAndroidCor da barra de status na tela de sucessostring"#E8F5E8"
-errorStatusBarAndroidCor da barra de status na tela de errostring"#FFEBEE"

Textos (result.texts)

PropriedadePlataformaDescriçãoTipoExemplo
2successAmbosTexto da tela de sucessostring"Verificação concluída com sucesso!"
2errorAmbosTexto da tela de errostring"Houve um erro na verificação. Tente novamente."
3retryButtonAmbosTexto do botão tentar novamentestring"Tentar Novamente"

Assets (result.assets)

PropriedadePlataformaDescriçãoTipoExemplo
1successImageAmbosNome do asset de sucessostring"success_icon"
1errorImageAmbosNome do asset de errostring"error_icon"
1retryImageiOSNome do asset de retrystring"return_button"

Fontes, flags e tamanhos

PropriedadePlataformaDescriçãoTipo
2fonts.textAmbosFonte do texto de resultadostring
2sizes.textFontSizeAmbosTamanho do texto de resultadonumber
3fonts.retryButtonAmbosFonte do botão retrystring
3sizes.retryButtonFontSizeAmbosTamanho do botão retrynumber
-flags.successStatusBarIsDarkIconsAndroidÍcones escuros na status bar de sucessoboolean
-flags.errorStatusBarIsDarkIconsAndroidÍcones escuros na status bar de erroboolean

Telas IProov

As telas de instrução, permissão, processamento e resultado usam os blocos compartilhados. A tela nativa do iProov é customizada pelo bloco iproov.

Tela do iProov (iproov)

Cores (iproov.colors)

PropriedadePlataformaDescriçãoTipoExemplo
1closeButtonColorAmbosCor/tint do botão fechar (alias legado em colors: closeButtonIcon)string"#FFFFFF"
2backgroundAmbosCor de fundo da telastring"#FF6B35"
3promptTextAmbosCor do texto de instrução/promptstring"#FFFFFF"
3promptBackgroundAmbosCor de fundo do promptstring"#1A1A1A"
4ovalReadyAmbosCor do oval quando prontostring"#FF6B35"
4ovalNotReadyAmbosCor do oval quando não está prontostring"#FF3030"
4ovalCapturingAmbosCor do oval durante a capturastring"#FFFFFF"
4ovalCompletedAmbosCor do oval quando concluídostring"#FF6B35"
5filterLineDrawingForegroundAmbosCor do primeiro plano do filtro de linhastring"#FFFFFF"
5filterLineDrawingBackgroundAmbosFundo do filtro de linhastring"#000000"
6titleAmbosCor do texto do títulostring"#FFFFFF"
6titleBackgroundAmbosCor de fundo do títulostring"#2E2E2E"

Textos (iproov.texts)

PropriedadePlataformaDescriçãoTipoExemplo
6titleAmbosTexto do título da tela de capturastring"Verificação Biométrica"

Assets (iproov.assets)

PropriedadePlataformaDescriçãoTipoExemplo
1closeButtonIconAmbosNome do asset para o botão fecharstring"close_icon"
6logoImageAmbosNome do asset para o logostring"logo"

Fontes (iproov.fonts)

PropriedadePlataformaDescriçãoTipoExemplo
instructionsTitleFontAmbosFonte do título das instruçõesstring"sixty"
instructionsCaptionFontAmbosFonte da legenda das instruçõesstring"sixty"
instructionsDocumentTypesInstructionsFontAmbosFonte da primeira instruçãostring"sixty"
instructionsDocumentTipsInstructionsFontAmbosFonte da segunda instruçãostring"sixty"
instructionsButtonFontAmbosFonte do botão das instruçõesstring"sixty"
permissionTitleFontAmbosFonte do título de permissãostring"sixty"
permissionCaptionFontAmbosFonte da legenda de permissãostring"sixty"
permissionButtonFontAmbosFonte do botão de permissãostring"sixty"
resultMessageFontAmbosFonte da mensagem de resultadostring"sixty"
resultRetryButtonFontAmbosFonte do botão de tentar novamentestring"sixty"

Configuração e flags (iproov.configuration / iproov.flags)

PropriedadePlataformaDescriçãoTipoExemplo
-fontResourceAmbosFonte base por nome de recursostring"sixty"
-fontPathAmbosCaminho da fonte base em assetsstring"fonts/sixty.ttf"
-configuration.timeoutSecsAmbosTimeout da jornadanumber60
-configuration.orientationGpaAmbosOrientação GPA (PORTRAIT, REVERSE_PORTRAIT, LANDSCAPE, REVERSE_LANDSCAPE)string"PORTRAIT"
-configuration.orientationLaAmbosOrientação LA (PORTRAIT, REVERSE_PORTRAIT)string"PORTRAIT"
-flags.isEnabledScreenShotsAmbosHabilita screenshotsbooleanfalse
-flags.disableExteriorEffectsAmbosDesabilita efeitos externosbooleanfalse
-flags.promptRoundedCornersAmbosCantos arredondados no promptbooleantrue

Telas FaceTec

O bloco facetec controla as telas nativas do FaceTec.

Cores (facetec.colors)

PropriedadePlataformaObservação
readyScreenHeaderAmbosCor do título da ready screen
readyScreenSubtextAmbosCor do subtítulo da ready screen
readyScreenTextBackgroundAmbosFundo da área de texto da ready screen
readyScreenOvalFillAndroidiOS não expõe este setter
resultScreenMessageAmbosChave canônica para cor do resultado
resultScreenForegroundAmbosAlias; prefira resultScreenMessage
resultScreenBackgroundAndroidiOS não expõe setter de fundo
resultScreenUploadProgressBarFillAmbosCor de preenchimento do progresso
resultScreenUploadProgressBarTrackAmbosCor do track do progresso
resultScreenActivityIndicatorAmbosCor do indicador de atividade
resultScreenResultAnimationBackgroundAmbosFundo da animação de resultado
resultScreenResultAnimationForegroundAmbosFrente da animação de resultado
retryScreenHeaderAmbosCor do título da retry screen
retryScreenSubtextAmbosCor do subtítulo da retry screen
retryScreenImageBorderAmbosCor da borda da imagem de retry
retryScreenOvalStrokeAndroidiOS não expõe este setter
feedbackMessageAmbosCor da mensagem de feedback
feedbackBarBackgroundAmbosFundo da barra de feedback
guidanceForegroundAndroidiOS não expõe este setter
guidanceBackgroundAndroidiOS não expõe este setter
guidanceButtonTextNormalAmbosTexto normal do botão
guidanceButtonTextHighlightAmbosTexto destacado do botão
guidanceButtonTextDisabledAmbosTexto desabilitado do botão
guidanceButtonBackgroundNormalAmbosFundo normal do botão
guidanceButtonBackgroundHighlightAmbosFundo destacado do botão
guidanceButtonBackgroundDisabledAmbosFundo desabilitado do botão
guidanceButtonBorderAmbosBorda do botão
frameBackgroundAmbosFundo do frame
frameBorderAmbosBorda do frame
ovalStrokeAmbosStroke do oval
ovalProgressFirstAmbosPrimeira cor do progresso oval
ovalProgressSecondAmbosSegunda cor do progresso oval
overlayBackgroundAmbosFundo do overlay

Textos principais

TelaIdentificadores
ReadyreadyHeader1, readyHeader2, readyMessage1, readyMessage2, readyButton
FeedbackfeedbackLookStraightInOval, feedbackCenterFace, feedbackFaceNotFound, feedbackFaceNotLookingStraightAhead, feedbackFaceNotUpright, feedbackHoldSteady, feedbackMovePhoneAway, feedbackMovePhoneCloser, feedbackMovePhoneToEyeLevel, feedbackUseEvenLighting, feedbackFrameYourFace, feedbackHoldSteady1, feedbackHoldSteady2, feedbackHoldSteady3, feedbackRemoveDarkGlasses, feedbackNeutralExpression, feedbackConditionsTooBright, feedbackBrightenYourEnvironment
RetryretryHeader, retrySubheader, retryMessageSmile, retryMessageLighting, retryMessageContrast, retryYourPicture, retryIdealPicture, retryButton
ResultresultSuccessMessage, resultUploadMessage

Exemplos de textos FaceTec

Ready Screen

IdentificadorExemplo
1readyHeader1Prepare-se
2readyHeader2para verificação
3readyMessage1Posicione seu rosto
4readyMessage2dentro do círculo
5readyButtonIniciar

Feedback

IdentificadorExemplo
feedbackCenterFaceCentralize seu rosto
feedbackHoldSteadyMantenha-se parado
feedbackMovePhoneCloserAproxime o dispositivo
feedbackMovePhoneAwayAfaste o dispositivo

Result Screen

IdentificadorExemplo
resultScreenMessageMensagem Final
resultSuccessMessageSucesso

Retry Screen

IdentificadorExemplo
1retryHeaderVamos tentar novamente
2retrySubHeaderAjustes necessários
5retryButtonTentar Novamente

Assets (facetec.assets)

PropriedadePlataformaDescrição
overlayBrandImageAmbosImagem de branding no overlay; também controlada por facetec.flags.overlayShowBrandingImage
cancelButtonIconAmbosÍcone do botão cancelar
resultScreenCustomActivityIndicatorImageAndroidImagem customizada do indicador de atividade
resultScreenCustomActivityIndicatorAnimationAndroidAnimação customizada do indicador
resultScreenSuccessImageAndroidImagem de sucesso
resultScreenErrorImageAndroidImagem de erro
resultScreenSuccessBackgroundImageAndroidFundo de sucesso
resultScreenErrorBackgroundImageAndroidFundo de erro
resultScreenSuccessAnimationAndroidAnimação de sucesso
resultScreenErrorAnimationAndroidAnimação de erro

Fontes (facetec.fonts)

PropriedadeDescrição
readyScreenHeaderFonte do título da ready screen
readyScreenSubtextFonte do subtítulo da ready screen
resultScreenMessageFonte da mensagem de resultado
retryScreenHeaderFonte do título da retry screen
retryScreenSubtextFonte do subtítulo da retry screen
feedbackMessageFonte da mensagem de feedback
guidanceHeaderFonte do título de guidance
guidanceSubtextFonte do subtítulo de guidance
guidanceButtonFonte do botão de guidance

facetec.sizes

PropriedadePlataformaDescriçãoTipo
guidanceButtonBorderWidthAmbosLargura da borda do botão de guidancenumber
guidanceButtonCornerRadiusAmbosRaio do botão de guidancenumber
guidanceRetryScreenImageBorderWidthAndroidLargura da borda da imagem de retrynumber
guidanceRetryScreenImageCornerRadiusAndroidRaio da imagem de retrynumber
frameBorderWidthAmbosLargura da borda do framenumber
frameCornerRadiusAmbosRaio do framenumber
frameElevationAndroidElevação/sombra do framenumber
feedbackCornerRadiusAmbosRaio da barra de feedbacknumber
feedbackElevationAmbosElevação/sombra do feedbacknumber
readyScreenTextBackgroundCornerRadiusAndroidRaio do fundo de texto da ready screennumber
ovalStrokeWidthAndroidLargura do stroke do ovalnumber
ovalProgressStrokeWidthAndroidLargura do progresso ovalnumber
ovalProgressRadialOffsetAndroidOffset radial do progresso ovalnumber
ovalProgressWidthiOSLargura do progresso ovalnumber
ovalProgressOffsetiOSOffset do progresso ovalnumber
resultScreenAnimationRelativeScaleAndroidEscala relativa da animação de resultadonumber
resultScreenCustomActivityIndicatorRotationIntervalAndroidIntervalo de rotação do indicadornumber

facetec.flags

PropriedadePlataformaDescrição
overlayShowBrandingImageAmbosControla exibição de overlayBrandImage
feedbackEnablePulsatingTextAndroidTexto pulsante no feedback
resultScreenShowUploadProgressBarAndroidExibe barra de progresso de upload

facetec.configuration

PropriedadePlataformaDescriçãoValores
cancelButtonLocationAmbosPosição do botão cancelarTOP_LEFT, TOP_RIGHT
exitAnimationStyleAmbosEstilo de animação de saídaCIRCLE_FADE, RIPPLE_OUT, RIPPLE_IN, NONE

Assets e Fontes

Os assets e fontes referenciados no tema devem existir nativamente em cada plataforma.

Android

android/app/src/main/res/
├── drawable/          # imagens (.png, .jpg, .xml)
└── font/              # fontes (.ttf, .otf)

iOS

ios/YourApp/
├── Images.xcassets/   # assets com @1x, @2x, @3x
└── Fonts/             # fontes registradas em Info.plist (UIAppFonts)

Referência no tema

Use apenas o nome base (sem extensão):

assets: { closeButtonIcon: 'close_icon' },
fonts: { title: 'sixty' },

O SDK iOS inclui assets padrão no bundle RnSdkBundle (ícones de instrução, permissão, resultado, etc.).


Ambiente de Testes

Durante o desenvolvimento, utilize Environment.HML com AppKeys fornecidas pela equipe CertiFace.

Evite o uso do ambiente de produção para testes manuais.


Boas Práticas

  • Use o padrão de fábrica para desacoplar a implementação dos provedores quando o app alternar entre FaceTec e IProov
  • Verifique permissão de câmera com checkCameraPermission / requestCameraPermission antes de iniciar a jornada
  • Use Environment.HML em desenvolvimento
  • Customize a interface via CertifaceTheme conforme a identidade do app
  • Defina cores FaceTec explicitamente para paridade Android/iOS
  • Prefira retryButtonBackground em vez de retryBackground
  • Trate erros de startJourney com UX amigável (a Promise rejeita em falhas)
  • Guarde logs e tokens apenas em ambiente seguro
  • Consulte o CHANGELOG a cada atualização

Changelogs e Versões

VersãoDataDescrição
1.0.024/03/2026Lançamento inicial: temas FaceTec e iProov, ambientes HML/PRD, TurboModules
1.1.008/04/2026CertifaceSDK iOS atualizado para 1.3.0
1.1.105/05/2026Packages Android atualizados
1.1.207/05/2026iproov.fontResource/fontPath, facetec.sizes/flags, coluna de plataforma na documentação de tema
1.1.324/06/2026backButtonColor, ícones de instrução, result.assets, iProov/FaceTec — nativos Android 1.2.0 / iOS 1.7.0

Consulte sempre o repositório oficial para detalhes completos de cada release.


Referência complementar:

Para tabelas completas de customização com coluna de plataforma, consulte também docs/INSTRUCTIONS_THEME.md no repositório do SDK.