Guia Detalhado de Uso
Sumário
- Visão Geral
- Requisitos de Compatibilidade
- Instalação
- Configuração
- Criação do provedor de Liveness
5.1. Provedor IProov
5.2. Provedor Facetec - Estrutura das Classes Importantes
- Principais Classes e Métodos de Chamada
- Fluxo de Telas
8.1. Telas CertiFace (Compartilhadas)
8.2. Telas IProov
8.3. Telas Facetec - Assets e Fontes
- Ambiente de Testes
- Boas Práticas
- 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):
| Plataforma | Dependência | Versão |
|---|---|---|
| Android | br.com.certiface:certifacesdk | 1.2.0 |
| iOS | CertifaceSDK | 1.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:
| Valor | Descrição |
|---|---|
Environment.HML | Homologação |
Environment.PRD | Produção |
Instalação
Via NPM
npm install @certiface/sdkOu
yarn add @certiface/sdkVia Git (alternativa)
yarn add @certiface/sdk@git+https://github.com/oititec/certiface-sdk-rn.git#1.1.3Importação
import {
CertifaceSDK,
Environment,
LivenessProvider,
type CertifaceTheme,
type LivenessResult,
} from '@certiface/sdk';Nota: o tipo de tema foi renomeado de
OitiThemeparaCertifaceThemea partir da série 1.1.x.
Configuração
Android
- 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'
}
}
}- 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
- Configure as fontes do CocoaPods no
ios/Podfile:
source 'https://github.com/oititec/ios-artifactory.git'
source 'https://cdn.cocoapods.org/'- 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>- Execute a instalação dos pods:
cd ios && pod installCriação do provedor de Liveness
Esta seção descreve como inicializar e configurar o provedor de captura/liveness utilizado pelo SDK.
Provedores Disponíveis
| Provedor | Identificador Enum | Suporte |
|---|---|---|
| IProov | LivenessProvider.IPROOV | Suporte atual |
| FaceTec | LivenessProvider.FACETEC | Suporte atual |
| Novo Provedor | em breve | Planejado |
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.closeButtonIcondefine o ícone de fechar na captura (Android e iOS);iproov.colors.closeButtonColoraplica a cor/tint.processing.sizes.spinnerSize/spinnerWidthsão iOS;loadingIndicatorSize/loadingIndicatorWidthsão Android. Emresult.colors, prefiraretryButtonBackgroundpara o botão de tentar novamente.
Novidades relevantes (1.1.2+):
iproov.fontResource— fonte base por nome de recursoiproov.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.instructionIconScaleeinstructionIconSize— í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
certifacesdk1.2.0, iOSCertifaceSDK1.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.flags—overlayShowBrandingImage,feedbackEnablePulsatingText(Android)facetec.configuration—cancelButtonLocation(TOP_LEFT|TOP_RIGHT),exitAnimationStyle
No Android, algumas cores padrão do FaceTec divergem do iOS. Defina explicitamente
guidanceButtonTextNormal,guidanceButtonBackgroundNormaleguidanceButtonBackgroundDisabledpara paridade visual.
Estrutura das Classes Importantes
CertifaceSDK
| Método | Descriçã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
| Nome | Descrição |
|---|---|
LivenessProvider | FACETEC ou IPROOV |
Environment | HML ou PRD |
Tipos de Resultado
interface LivenessResult {
valid: boolean;
codID: string;
cause: string;
protocol: string;
scanResultBlob: string;
}| Tipo | Descrição |
|---|---|
LivenessResult | Resultado da validação de liveness |
LivenessResponse | Uniã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âmetro | Descrição |
|---|---|
appKey | Chave de aplicação fornecida pela CertiFace |
environment | Environment.HML ou Environment.PRD |
provider | LivenessProvider.FACETEC ou LivenessProvider.IPROOV |
isCustomEnabled | Habilita tema personalizado (padrão: false) |
theme | Objeto 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:
| Valor | Significado |
|---|---|
| Ambos | Android e iOS |
| Android | Apenas Android |
| iOS | Apenas iOS |
Observações importantes
statusBar,successStatusBareerrorStatusBarsão exclusivas do Androidinstructions.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.retryBackgroundtem semântica distinta por plataforma — prefiraretryButtonBackgroundpara o botãoresult.assets.retryImageeresult.colors.retryTextsão iOSfacetec.colors.readyScreenOvalFill,guidanceForeground,guidanceBackground,retryScreenOvalStrokeeresultScreenBackgroundsão Androidfacetec.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)
instructions)
Cores (instructions.colors)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| - | statusBar | Android | Cor da barra de status do sistema | string | "#2E2E2E" |
| 1 | backButtonIcon | Ambos | Cor do ícone do botão voltar | string | "#FFFFFF" |
| 1 | backButtonColor | Ambos | Tint do ícone quando assets.backButtonIcon está definido | string | "#00A89C" |
| 1 | backButtonBackground | iOS | Cor de fundo do botão voltar | string | "#2E2E2E" |
| 1 | backButtonBorder | iOS | Cor da borda do botão voltar | string | "#2E2E2E" |
| 2 | background | Ambos | Cor de fundo da área principal | string | "#2E2E2E" |
| 3 | title | Ambos | Cor do texto do título | string | "#000000" |
| 4 | firstInstructionTitle | Ambos | Cor do texto da primeira instrução | string | "#000000" |
| 4 | firstInstructionIconBackground | Android | Cor de fundo do círculo do primeiro ícone | string | "#00A89C" |
| 4 | firstInstructionIconBorder | Android | Cor da borda do círculo do primeiro ícone | string | "#00A89C" |
| 5 | secondInstructionTitle | Ambos | Cor do texto da segunda instrução | string | "#000000" |
| 5 | secondInstructionIconBackground | Android | Cor de fundo do círculo do segundo ícone | string | "#00A89C" |
| 5 | secondInstructionIconBorder | Android | Cor da borda do círculo do segundo ícone | string | "#00A89C" |
| 6 | bottomSheet | Ambos | Cor de fundo do painel inferior | string | "#FFFFFF" |
| 7 | caption | Ambos | Cor do texto descritivo abaixo do título | string | "#666666" |
| 10 | continueButtonText | Ambos | Alias legado para cor do texto do botão continuar | string | "#FFFFFF" |
| 10 | continueButtonTextColor | Ambos | Cor do texto do botão continuar | string | "#FFFFFF" |
| 10 | continueButtonBackground | Ambos | Cor de fundo do botão continuar | string | "#00C853" |
| 10 | continueButtonBorder | iOS | Cor da borda do botão continuar | string | "#00C853" |
Textos (instructions.texts)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 3 | title | Ambos | Texto do título principal da tela | string | "Verificação de Identidade" |
| 7 | caption | Ambos | Texto da legenda abaixo do título | string | "Siga as instruções para completar o processo" |
| 8 | firstInstruction | Ambos | Texto da primeira instrução | string | "Escolha um ambiente bem iluminado" |
| 9 | secondInstruction | Ambos | Texto da segunda instrução | string | "Não use bonés, máscaras ou óculos escuros" |
| 10 | continueButton | Ambos | Texto do botão continuar | string | "Continuar" |
Assets (instructions.assets)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 1 | backButtonIcon | Ambos | Nome do asset para o botão voltar | string | "close_icon" |
| 2 | contextImage | Ambos | Imagem ilustrativa exibida na área principal | string | "neutral_face" |
| 2 | contextImageScale | Android | Escala da imagem: fit, fillBounds, crop, inside, none, fillWidth, fillHeight | string | "fillBounds" |
| 2 | contextImageHeightFraction | Android | Fração da altura disponível (0.0-1.0) | number | 0.8 |
| 4 | firstInstructionIcon | Ambos | Nome do asset para o ícone da primeira instrução | string | "backhand_left" |
| 5 | secondInstructionIcon | Ambos | Nome do asset para o ícone da segunda instrução | string | "camera_icon" |
| - | instructionIconScale | Ambos | Escala do ícone dentro do círculo: fit, fillBounds, crop, inside, none | string | "fillBounds" |
| - | instructionIconSize | Ambos | Tamanho do círculo dos ícones (dp no Android, pt no iOS) | number | 60 |
Fontes (instructions.fonts)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 3 | title | Ambos | Fonte do título | string | "sixty" |
| 7 | caption | Ambos | Fonte da legenda | string | "sixty" |
| 4 | firstInstructionTitle | Ambos | Fonte da primeira instrução | string | "sixty" |
| 5 | secondInstructionTitle | Ambos | Fonte da segunda instrução | string | "sixty" |
| 10 | continueButton | Ambos | Fonte do botão continuar | string | "sixty" |
Tamanhos (instructions.sizes)
| Nº | Propriedade | Plataforma | Descrição | Tipo |
|---|---|---|---|---|
| 3 | titleFontSize | Ambos | Tamanho do título | number |
| 4 | firstInstructionTitleFontSize | Ambos | Tamanho da primeira instrução | number |
| 5 | secondInstructionTitleFontSize | Ambos | Tamanho da segunda instrução | number |
| 6 | bottomSheetCornerRadius | Ambos | Raio do bottom sheet | number |
| 7 | captionFontSize | Ambos | Tamanho da legenda | number |
| 10 | continueButtonFontSize | Ambos | Tamanho do texto do botão continuar | number |
Configuração e flags
| Nº | Propriedade | Plataforma | Descrição |
|---|---|---|---|
| - | configuration.showInstructionScreen | Ambos | Exibe ou oculta a tela de instruções |
| - | flags.statusBarIsDarkIcons | Android | Í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 deinstructions.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,
contextImageScaleecontextImageHeightFractionseguem 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,instructionIconSizee cores de fundo/borda são aplicados no bridge RN.
Tela de Permissão (permission)
permission)Tela para solicitar permissão de câmera ao usuário.
Cores (permission.colors)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| - | statusBar | Android | Cor da barra de status do sistema | string | "#FFFFFF" |
| 1 | backButtonIcon | iOS | Cor do ícone do botão voltar/fechar | string | "#000000" |
| 1 | backButtonBackground | iOS | Cor de fundo do botão voltar/fechar | string | "transparent" |
| 1 | backButtonBorder | iOS | Cor da borda do botão voltar/fechar | string | "transparent" |
| 2 | cameraImage | iOS | Cor do ícone/imagem da câmera | string | "#FFFFFF" |
| 3 | title | Ambos | Cor do título principal | string | "#000000" |
| 4 | caption | Ambos | Cor da legenda | string | "#666666" |
| 5 | checkPermissionButtonText | Ambos | Cor do texto do botão de permissão | string | "#FFFFFF" |
| 5 | checkPermissionButtonBackground | Ambos | Cor de fundo do botão de permissão | string | "#00C853" |
| 5 | checkPermissionButtonBorder | iOS | Cor da borda do botão de permissão | string | "#00C853" |
| 6 | background | Ambos | Cor de fundo principal da tela | string | "#FFFFFF" |
| 6 | bottomSheet | iOS | Cor do painel inferior | string | "#FFFFFF" |
| 6 | bottomSheetTitle | iOS | Cor do título do bottom sheet | string | "#000000" |
| - | bottomSheetCaption | iOS | Cor da legenda do bottom sheet | string | "#666666" |
| - | openSettingsButtonText | iOS | Cor do texto do botão abrir configurações | string | "#00C853" |
| - | openSettingsButtonBackground | iOS | Cor de fundo do botão abrir configurações | string | "#FFFFFF" |
| - | openSettingsButtonBorder | iOS | Cor da borda do botão abrir configurações | string | "#00C853" |
| - | closeButtonText | iOS | Cor do texto do botão fechar | string | "#00C853" |
| - | closeButtonBackground | iOS | Cor de fundo do botão fechar | string | "transparent" |
| - | closeButtonBorder | iOS | Cor da borda do botão fechar | string | "transparent" |
Textos (permission.texts)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 3 | title | Ambos | Texto do título principal | string | "Permissões Necessárias" |
| 4 | caption | Ambos | Texto explicativo abaixo do título | string | "Precisamos acessar sua câmera" |
| 5 | checkPermissionButton | Ambos | Texto do botão para solicitar permissão | string | "Permitir Acesso" |
| 6 | bottomSheetTitle | iOS | Título do bottom sheet | string | "Acesso à câmera negado" |
| - | bottomSheetCaption | iOS | Legenda do bottom sheet | string | "Abra as configurações do dispositivo" |
| - | openSettingsButton | iOS | Texto do botão para abrir configurações | string | "Abrir Configurações" |
| - | closeButton | iOS | Texto do botão fechar | string | "Fechar" |
Assets (permission.assets)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 1 | backButtonIcon | Ambos | Nome do asset do botão voltar/fechar | string | "close_icon" |
| 2 | cameraImage | Ambos | Nome do asset da câmera | string | "camera_icon" |
Fontes (permission.fonts)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 3 | title | Ambos | Fonte do título | string | "sixty" |
| 4 | caption | Ambos | Fonte da legenda | string | "sixty" |
| 5 | checkPermissionButton | Ambos | Fonte do botão de permissão | string | "sixty" |
| 6 | bottomSheetTitle | iOS | Fonte do título do bottom sheet | string | "sixty" |
| - | bottomSheetCaption | iOS | Fonte da legenda do bottom sheet | string | "sixty" |
| - | openSettingsButton | iOS | Fonte do botão abrir configurações | string | "sixty" |
| - | opentSettingsButton | iOS | Alias legado de openSettingsButton | string | "sixty" |
| - | closeButton | iOS | Fonte do botão fechar | string | "sixty" |
Flags e tamanhos (permission.flags / permission.sizes)
| Nº | Propriedade | Plataforma | Descrição | Tipo |
|---|---|---|---|---|
| 1 | flags.statusBarIsDarkIcons | Android | Ícones escuros na status bar | boolean |
| 3 | sizes.titleFontSize | Ambos | Tamanho do título | number |
| 4 | sizes.captionFontSize | Ambos | Tamanho da legenda | number |
| 5 | sizes.checkPermissionButtonFontSize | Ambos | Tamanho do botão de permissão | number |
| 6 | sizes.bottomSheetTitleFontSize | iOS | Tamanho do título do bottom sheet | number |
| - | sizes.bottomSheetCaptionFontSize | iOS | Tamanho da legenda do bottom sheet | number |
| - | sizes.openSettingsButtonFontSize | iOS | Tamanho do botão abrir configurações | number |
| - | sizes.closeButtonFontSize | iOS | Tamanho do botão fechar | number |
Tela de Processamento (processing)
processing)Tela exibida durante o processamento do liveness.
Cores (processing.colors)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| - | statusBar | Android | Cor da barra de status do sistema | string | "#1A1A1A" |
| 1 | loading | Ambos | Cor do indicador de carregamento | string | "#FFFFFF" |
| 2 | background | Ambos | Cor de fundo da tela | string | "#1A1A1A" |
Flags e tamanhos (processing.flags / processing.sizes)
| Nº | Propriedade | Plataforma | Descrição | Tipo |
|---|---|---|---|---|
| - | flags.statusBarIsDarkIcons | Android | Ícones escuros na status bar | boolean |
| 1 | sizes.loadingIndicatorSize | Ambos | Tamanho do loading | number |
| 1 | sizes.loadingIndicatorWidth | Android/iProov | Largura do indicador | number |
| 1 | sizes.spinnerSize | iOS | Tamanho do spinner | number |
| 1 | sizes.spinnerWidth | iOS | Largura do spinner | number |
Tela de Resultado (result)
result)Tela exibida após a conclusão do processo de liveness, mostrando sucesso ou erro.
Cores (result.colors)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 2 | successText | Ambos | Cor do texto de sucesso | string | "#2E7D32" |
| 2 | retryText | iOS | Cor do texto de retry | string | "#FFEBEE" |
| 2 | errorBackground | Ambos | Fundo da tela de erro | string | "#FFEBEE" |
| 2 | errorText | Ambos | Cor do texto de erro | string | "#C62828" |
| 3 | retryButtonText | Ambos | Cor do texto do botão tentar novamente | string | "#FF6B35" |
| 3 | retryButtonBackground | Ambos | Fundo do botão tentar novamente | string | "#FFFFFF" |
| 3 | retryButtonBorder | iOS | Borda do botão tentar novamente | string | "#FFFFFF" |
| 4 | retryBackground | Ambos | iOS: fundo da tela de retry. Android/iProov: fallback para o botão retry | string | "#C62828" |
| 4 | successBackground | Ambos | Fundo da tela de sucesso | string | "#E8F5E8" |
| - | successStatusBar | Android | Cor da barra de status na tela de sucesso | string | "#E8F5E8" |
| - | errorStatusBar | Android | Cor da barra de status na tela de erro | string | "#FFEBEE" |
Textos (result.texts)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 2 | success | Ambos | Texto da tela de sucesso | string | "Verificação concluída com sucesso!" |
| 2 | error | Ambos | Texto da tela de erro | string | "Houve um erro na verificação. Tente novamente." |
| 3 | retryButton | Ambos | Texto do botão tentar novamente | string | "Tentar Novamente" |
Assets (result.assets)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 1 | successImage | Ambos | Nome do asset de sucesso | string | "success_icon" |
| 1 | errorImage | Ambos | Nome do asset de erro | string | "error_icon" |
| 1 | retryImage | iOS | Nome do asset de retry | string | "return_button" |
Fontes, flags e tamanhos
| Nº | Propriedade | Plataforma | Descrição | Tipo |
|---|---|---|---|---|
| 2 | fonts.text | Ambos | Fonte do texto de resultado | string |
| 2 | sizes.textFontSize | Ambos | Tamanho do texto de resultado | number |
| 3 | fonts.retryButton | Ambos | Fonte do botão retry | string |
| 3 | sizes.retryButtonFontSize | Ambos | Tamanho do botão retry | number |
| - | flags.successStatusBarIsDarkIcons | Android | Ícones escuros na status bar de sucesso | boolean |
| - | flags.errorStatusBarIsDarkIcons | Android | Ícones escuros na status bar de erro | boolean |
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)
iproov)
Cores (iproov.colors)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 1 | closeButtonColor | Ambos | Cor/tint do botão fechar (alias legado em colors: closeButtonIcon) | string | "#FFFFFF" |
| 2 | background | Ambos | Cor de fundo da tela | string | "#FF6B35" |
| 3 | promptText | Ambos | Cor do texto de instrução/prompt | string | "#FFFFFF" |
| 3 | promptBackground | Ambos | Cor de fundo do prompt | string | "#1A1A1A" |
| 4 | ovalReady | Ambos | Cor do oval quando pronto | string | "#FF6B35" |
| 4 | ovalNotReady | Ambos | Cor do oval quando não está pronto | string | "#FF3030" |
| 4 | ovalCapturing | Ambos | Cor do oval durante a captura | string | "#FFFFFF" |
| 4 | ovalCompleted | Ambos | Cor do oval quando concluído | string | "#FF6B35" |
| 5 | filterLineDrawingForeground | Ambos | Cor do primeiro plano do filtro de linha | string | "#FFFFFF" |
| 5 | filterLineDrawingBackground | Ambos | Fundo do filtro de linha | string | "#000000" |
| 6 | title | Ambos | Cor do texto do título | string | "#FFFFFF" |
| 6 | titleBackground | Ambos | Cor de fundo do título | string | "#2E2E2E" |
Textos (iproov.texts)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 6 | title | Ambos | Texto do título da tela de captura | string | "Verificação Biométrica" |
Assets (iproov.assets)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| 1 | closeButtonIcon | Ambos | Nome do asset para o botão fechar | string | "close_icon" |
| 6 | logoImage | Ambos | Nome do asset para o logo | string | "logo" |
Fontes (iproov.fonts)
| Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|
instructionsTitleFont | Ambos | Fonte do título das instruções | string | "sixty" |
instructionsCaptionFont | Ambos | Fonte da legenda das instruções | string | "sixty" |
instructionsDocumentTypesInstructionsFont | Ambos | Fonte da primeira instrução | string | "sixty" |
instructionsDocumentTipsInstructionsFont | Ambos | Fonte da segunda instrução | string | "sixty" |
instructionsButtonFont | Ambos | Fonte do botão das instruções | string | "sixty" |
permissionTitleFont | Ambos | Fonte do título de permissão | string | "sixty" |
permissionCaptionFont | Ambos | Fonte da legenda de permissão | string | "sixty" |
permissionButtonFont | Ambos | Fonte do botão de permissão | string | "sixty" |
resultMessageFont | Ambos | Fonte da mensagem de resultado | string | "sixty" |
resultRetryButtonFont | Ambos | Fonte do botão de tentar novamente | string | "sixty" |
Configuração e flags (iproov.configuration / iproov.flags)
| Nº | Propriedade | Plataforma | Descrição | Tipo | Exemplo |
|---|---|---|---|---|---|
| - | fontResource | Ambos | Fonte base por nome de recurso | string | "sixty" |
| - | fontPath | Ambos | Caminho da fonte base em assets | string | "fonts/sixty.ttf" |
| - | configuration.timeoutSecs | Ambos | Timeout da jornada | number | 60 |
| - | configuration.orientationGpa | Ambos | Orientação GPA (PORTRAIT, REVERSE_PORTRAIT, LANDSCAPE, REVERSE_LANDSCAPE) | string | "PORTRAIT" |
| - | configuration.orientationLa | Ambos | Orientação LA (PORTRAIT, REVERSE_PORTRAIT) | string | "PORTRAIT" |
| - | flags.isEnabledScreenShots | Ambos | Habilita screenshots | boolean | false |
| - | flags.disableExteriorEffects | Ambos | Desabilita efeitos externos | boolean | false |
| - | flags.promptRoundedCorners | Ambos | Cantos arredondados no prompt | boolean | true |
Telas FaceTec
O bloco facetec controla as telas nativas do FaceTec.
Cores (facetec.colors)
facetec.colors)| Propriedade | Plataforma | Observação |
|---|---|---|
readyScreenHeader | Ambos | Cor do título da ready screen |
readyScreenSubtext | Ambos | Cor do subtítulo da ready screen |
readyScreenTextBackground | Ambos | Fundo da área de texto da ready screen |
readyScreenOvalFill | Android | iOS não expõe este setter |
resultScreenMessage | Ambos | Chave canônica para cor do resultado |
resultScreenForeground | Ambos | Alias; prefira resultScreenMessage |
resultScreenBackground | Android | iOS não expõe setter de fundo |
resultScreenUploadProgressBarFill | Ambos | Cor de preenchimento do progresso |
resultScreenUploadProgressBarTrack | Ambos | Cor do track do progresso |
resultScreenActivityIndicator | Ambos | Cor do indicador de atividade |
resultScreenResultAnimationBackground | Ambos | Fundo da animação de resultado |
resultScreenResultAnimationForeground | Ambos | Frente da animação de resultado |
retryScreenHeader | Ambos | Cor do título da retry screen |
retryScreenSubtext | Ambos | Cor do subtítulo da retry screen |
retryScreenImageBorder | Ambos | Cor da borda da imagem de retry |
retryScreenOvalStroke | Android | iOS não expõe este setter |
feedbackMessage | Ambos | Cor da mensagem de feedback |
feedbackBarBackground | Ambos | Fundo da barra de feedback |
guidanceForeground | Android | iOS não expõe este setter |
guidanceBackground | Android | iOS não expõe este setter |
guidanceButtonTextNormal | Ambos | Texto normal do botão |
guidanceButtonTextHighlight | Ambos | Texto destacado do botão |
guidanceButtonTextDisabled | Ambos | Texto desabilitado do botão |
guidanceButtonBackgroundNormal | Ambos | Fundo normal do botão |
guidanceButtonBackgroundHighlight | Ambos | Fundo destacado do botão |
guidanceButtonBackgroundDisabled | Ambos | Fundo desabilitado do botão |
guidanceButtonBorder | Ambos | Borda do botão |
frameBackground | Ambos | Fundo do frame |
frameBorder | Ambos | Borda do frame |
ovalStroke | Ambos | Stroke do oval |
ovalProgressFirst | Ambos | Primeira cor do progresso oval |
ovalProgressSecond | Ambos | Segunda cor do progresso oval |
overlayBackground | Ambos | Fundo do overlay |
Textos principais
| Tela | Identificadores |
|---|---|
| Ready | readyHeader1, readyHeader2, readyMessage1, readyMessage2, readyButton |
| Feedback | feedbackLookStraightInOval, feedbackCenterFace, feedbackFaceNotFound, feedbackFaceNotLookingStraightAhead, feedbackFaceNotUpright, feedbackHoldSteady, feedbackMovePhoneAway, feedbackMovePhoneCloser, feedbackMovePhoneToEyeLevel, feedbackUseEvenLighting, feedbackFrameYourFace, feedbackHoldSteady1, feedbackHoldSteady2, feedbackHoldSteady3, feedbackRemoveDarkGlasses, feedbackNeutralExpression, feedbackConditionsTooBright, feedbackBrightenYourEnvironment |
| Retry | retryHeader, retrySubheader, retryMessageSmile, retryMessageLighting, retryMessageContrast, retryYourPicture, retryIdealPicture, retryButton |
| Result | resultSuccessMessage, resultUploadMessage |
Exemplos de textos FaceTec
Ready Screen
| Nº | Identificador | Exemplo |
|---|---|---|
| 1 | readyHeader1 | Prepare-se |
| 2 | readyHeader2 | para verificação |
| 3 | readyMessage1 | Posicione seu rosto |
| 4 | readyMessage2 | dentro do círculo |
| 5 | readyButton | Iniciar |
Feedback
| Identificador | Exemplo |
|---|---|
feedbackCenterFace | Centralize seu rosto |
feedbackHoldSteady | Mantenha-se parado |
feedbackMovePhoneCloser | Aproxime o dispositivo |
feedbackMovePhoneAway | Afaste o dispositivo |
Result Screen
| Identificador | Exemplo |
|---|---|
resultScreenMessage | Mensagem Final |
resultSuccessMessage | Sucesso |
Retry Screen
| Nº | Identificador | Exemplo |
|---|---|---|
| 1 | retryHeader | Vamos tentar novamente |
| 2 | retrySubHeader | Ajustes necessários |
| 5 | retryButton | Tentar Novamente |
Assets (facetec.assets)
facetec.assets)| Propriedade | Plataforma | Descrição |
|---|---|---|
overlayBrandImage | Ambos | Imagem de branding no overlay; também controlada por facetec.flags.overlayShowBrandingImage |
cancelButtonIcon | Ambos | Ícone do botão cancelar |
resultScreenCustomActivityIndicatorImage | Android | Imagem customizada do indicador de atividade |
resultScreenCustomActivityIndicatorAnimation | Android | Animação customizada do indicador |
resultScreenSuccessImage | Android | Imagem de sucesso |
resultScreenErrorImage | Android | Imagem de erro |
resultScreenSuccessBackgroundImage | Android | Fundo de sucesso |
resultScreenErrorBackgroundImage | Android | Fundo de erro |
resultScreenSuccessAnimation | Android | Animação de sucesso |
resultScreenErrorAnimation | Android | Animação de erro |
Fontes (facetec.fonts)
facetec.fonts)| Propriedade | Descrição |
|---|---|
readyScreenHeader | Fonte do título da ready screen |
readyScreenSubtext | Fonte do subtítulo da ready screen |
resultScreenMessage | Fonte da mensagem de resultado |
retryScreenHeader | Fonte do título da retry screen |
retryScreenSubtext | Fonte do subtítulo da retry screen |
feedbackMessage | Fonte da mensagem de feedback |
guidanceHeader | Fonte do título de guidance |
guidanceSubtext | Fonte do subtítulo de guidance |
guidanceButton | Fonte do botão de guidance |
facetec.sizes
facetec.sizes| Propriedade | Plataforma | Descrição | Tipo |
|---|---|---|---|
guidanceButtonBorderWidth | Ambos | Largura da borda do botão de guidance | number |
guidanceButtonCornerRadius | Ambos | Raio do botão de guidance | number |
guidanceRetryScreenImageBorderWidth | Android | Largura da borda da imagem de retry | number |
guidanceRetryScreenImageCornerRadius | Android | Raio da imagem de retry | number |
frameBorderWidth | Ambos | Largura da borda do frame | number |
frameCornerRadius | Ambos | Raio do frame | number |
frameElevation | Android | Elevação/sombra do frame | number |
feedbackCornerRadius | Ambos | Raio da barra de feedback | number |
feedbackElevation | Ambos | Elevação/sombra do feedback | number |
readyScreenTextBackgroundCornerRadius | Android | Raio do fundo de texto da ready screen | number |
ovalStrokeWidth | Android | Largura do stroke do oval | number |
ovalProgressStrokeWidth | Android | Largura do progresso oval | number |
ovalProgressRadialOffset | Android | Offset radial do progresso oval | number |
ovalProgressWidth | iOS | Largura do progresso oval | number |
ovalProgressOffset | iOS | Offset do progresso oval | number |
resultScreenAnimationRelativeScale | Android | Escala relativa da animação de resultado | number |
resultScreenCustomActivityIndicatorRotationInterval | Android | Intervalo de rotação do indicador | number |
facetec.flags
facetec.flags| Propriedade | Plataforma | Descrição |
|---|---|---|
overlayShowBrandingImage | Ambos | Controla exibição de overlayBrandImage |
feedbackEnablePulsatingText | Android | Texto pulsante no feedback |
resultScreenShowUploadProgressBar | Android | Exibe barra de progresso de upload |
facetec.configuration
facetec.configuration| Propriedade | Plataforma | Descrição | Valores |
|---|---|---|---|
cancelButtonLocation | Ambos | Posição do botão cancelar | TOP_LEFT, TOP_RIGHT |
exitAnimationStyle | Ambos | Estilo de animação de saída | CIRCLE_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/requestCameraPermissionantes de iniciar a jornada - Use
Environment.HMLem desenvolvimento - Customize a interface via
CertifaceThemeconforme a identidade do app - Defina cores FaceTec explicitamente para paridade Android/iOS
- Prefira
retryButtonBackgroundem vez deretryBackground - Trate erros de
startJourneycom 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ão | Data | Descrição |
|---|---|---|
| 1.0.0 | 24/03/2026 | Lançamento inicial: temas FaceTec e iProov, ambientes HML/PRD, TurboModules |
| 1.1.0 | 08/04/2026 | CertifaceSDK iOS atualizado para 1.3.0 |
| 1.1.1 | 05/05/2026 | Packages Android atualizados |
| 1.1.2 | 07/05/2026 | iproov.fontResource/fontPath, facetec.sizes/flags, coluna de plataforma na documentação de tema |
| 1.1.3 | 24/06/2026 | backButtonColor, í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.mdno repositório do SDK.
