Adicionando verificação de identidade a um aplicativo React Native ou Flutter

Integrar a verificação de identidade em um aplicativo React Native ou Flutter envolve poucas linhas de código e uma quantidade razoável de configuração nativa. Toden Os SDKs processam todo o fluxo (consentimento, seleção de identidade, captura de documentos, selfie e verificação de atividade) e o enviam para você. O que você controla é a configuração de compilação, a permissão da câmera, a chave que você distribui e o que seu aplicativo faz depois que o solicitante clica em enviar.

A abordagem mais eficaz ao longo do tempo é criar um fluxo de trabalho integrado ao painel de controle, transmitir apenas dados por usuário a partir do código e ler os resultados no servidor. Dessa forma, uma alteração no fluxo se resume a uma republicação, em vez de uma atualização na loja de aplicativos, e nenhum dado de identidade precisa ser enviado de volta para o telefone. O restante deste artigo aborda cada etapa e as decisões específicas para dispositivos móveis ao longo do processo.

O que você está adicionando ao aplicativo, exatamente?

Ambos os SDKs executam detecção de presença nativa no dispositivo : Apple Vision no iOS e Google ML Kit no Android. Essa é a razão para a maior parte da configuração. A detecção de presença, nesse caso, é a Inteligência de Presença (uma selfie ao vivo combinada com desafios de gestos aleatórios, uma sequência de cores com flash na tela ou ambos), e é executada em frames da câmera em código nativo, em vez de em uma visualização da web.

Os dois SDKs possuem paridade de funcionalidades com a versão web. SDK Para o fluxo principal, incorporação do fluxo de trabalho e complementos de captura (contato) OTP , comprovante de endereço, questionário), verificação comercial e quaisquer documentos globais do país. Eles adicionam algo que a web não pode fazer: ler o chip em passaportes eletrônicos e carteiras de identidade com chip. NFC .

Quais são os requisitos para as compilações?

Os requisitos mínimos, do React Native (abre num novo separador) e do Flutter. (abre num novo separador) SDK páginas:

A linha de código React Native é a que pega as equipes desprevenidas. SDK Utiliza um processador de quadros VisionCamera v5 (Nitro), que é código nativo, portanto não pode ser executado dentro do Expo Go. Planeje um cliente de desenvolvimento personalizado desde o primeiro dia de integração, não na véspera do lançamento.

Como faço para instalar?

Para um aplicativo Expo em React Native, instale o SDK e seus pares, adicione o plugin de configuração e crie um cliente de desenvolvimento:

npx expo install @myazahq/kyc-sdk-react-native \
  react-native-vision-camera react-native-vision-camera-worklets \
  react-native-worklets react-native-nitro-modules react-native-nitro-image \
  react-native-safe-area-context react-native-svg

// app.json
{
  "expo": {
    "plugins": ["@myazahq/kyc-sdk-react-native"]
  }
}

npx expo prebuild
npx expo run:ios       # or: npx expo run:android

Não adicione a própria VisionCamera aopluginsA versão 5 não inclui nenhum plugin de configuração, e listá-lo torna-se um problema.expo prebuildfalhar. O Toden O plugin adiciona a string de uso da câmera do iOS e a do Android.CAMERAeINTERNETpermissões para você. Aplicativos React Native puros adicionam o ambiente de execução do módulo Expo comnpx install-expo-modules@lateste declarar as permissões à mão; o SDK A página contém os comandos exatos.

Para Flutter, adicione a dependência e execute.flutter pub get:

dependencies:
  myaza_kyc_sdk_flutter: ^2.2.0

Em seguida, declare você mesmo a permissão para usar a câmera:NSCameraUsageDescriptionemios/Runner/Info.plist, eCAMERAmaisINTERNETemAndroidManifest.xml.

Quais permissões seus usuários verão?

Câmera, sempre. Localização, somente se um fluxo de trabalho usar a etapa de Inteligência de Endereços. O plugin de configuração do React Native adiciona as strings de localização por padrão (pass).{ "location": false }(para desativar); no Flutter e no React Native puro, você os adiciona manualmente. No iOS, o aplicativo trava na solicitação de localização seNSLocationWhenInUseUsageDescriptionestá faltando, então adicione-o sempre que uma etapa de endereço for possível. Microfone, nunca: a orientação por voz é uma saída de texto para fala e o SDK Não grava áudio. Esse último ponto é importante para incluir nas suas respostas sobre privacidade na loja de aplicativos.

Quais módulos opcionais do React Native são importantes?

Quatroexpo-*Os módulos são pares opcionais e cada um adquire uma funcionalidade. A que a maioria das equipes não tem éexpo-document-pickerSem isso, as etapas de comprovante de endereço e documento comercial aceitam apenas uma captura de câmera, portanto, PDF Não é possível apresentar extrato bancário.expo-deviceAprimora a impressão digital do dispositivo usada pela inteligência do dispositivo.expo-applicationRegistra a versão do seu aplicativo no envio, eexpo-localizationdá o SDK a região do dispositivo.

Como você deve montar o fluxo?

Monte um fluxo de trabalho publicado pelo seu ID. O fluxo de trabalho inclui o país, os tipos de ID, as etapas de captura, a marca e o texto, e também pode incluir regras de decisão do lado do servidor. React Native:

import { MyazaKYC } from "@myazahq/kyc-sdk-react-native";

export default function VerifyScreen() {
  return (
    <MyazaKYC
      apiKey="pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      workflowId="wf_AbC123dEf456"
      userId="user_42"
      userData={{ firstName: "Jane", lastName: "Doe" }}
      metadata={{ requestId: "order_1001" }}
      onSubmit={(submission) => console.log("submitted", submission.verificationId)}
      onError={(err) => console.error(err.code, err.message)}
      onClose={() => console.log("closed")}
    >
      Verify Identity
    </MyazaKYC>
  );
}

O Flutter abre o mesmo fluxo que uma folha modal. Observe quecontexté um parâmetro nomeado e os callbacks ficam ao lado.config, não dentro dele:

MyazaKYC.show(
  context: context,
  config: const MyazaKYCConfig(
    apiKey: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    workflowId: 'wf_AbC123dEf456',
    userId: 'user_42',
    userData: UserData(firstName: 'Jane', lastName: 'Doe'),
    metadata: {'requestId': 'order_1001'},
  ),
  onSubmit: (submission) => debugPrint('Submitted: ${submission.verificationId}'),
  onError: (error) => debugPrint('Error: ${error.code}: ${error.message}'),
  onClose: () => debugPrint('KYC closed'),
);

Três detalhes nesses trechos são intencionais.

A chave é publicável. Apenas umpk_A chave pertence a um aplicativo. O Flutter deriva o ambiente de seu prefixo (pk_test_é Sandbox,pk_live_(está em produção), portanto, a mudança para produção é uma alteração fundamental. Uma chave publicável pode iniciar uma verificação, mas não pode ler seu resultado.

userId,userDataemetadataPermaneça no código. Um fluxo de trabalho é um modelo compartilhado por todos os visitantes, portanto, não pode conter valores específicos para cada usuário.userDataVale a pena passar: é o nome que você acredita que o usuário possui, comparado com o nome lido em seu documento para produzirdataMatchDeixe de fora edataMatchvoltanull.

metadata.requestIdDeve vir do seu próprio registro. É a chave de idempotência para o envio, portanto, derive-a do registro de integração ao qual pertence, em vez de gerar uma nova cada vez que a tela é montada.

Por que um fluxo de trabalho em vez de props? Ambos os SDKs aceitam a configuração completa como props, o que funciona para um fluxo fixo. Mas, em dispositivos móveis, cada alteração nas props representa uma nova versão do aplicativo e um ciclo de revisão, e as versões antigas do aplicativo permanecem instaladas por meses. Com um fluxo de trabalho, adicionar um tipo de ID ou refinar um limite de correspondência facial é aplicado a todas as versões instaladas na próxima vez que o fluxo for aberto. A página do produto Fluxos de Trabalho descreve o construtor.

O que acontece depois que o candidato submete a candidatura?

onSubmitO evento é disparado quando o servidor aceita a verificação. Não é o resultado em si. As verificações são executadas de forma assíncrona e o resultado chega ao seu backend por meio de um webhook ou por uma chamada com chave secreta.GET /api/kyc/verifications/:id.onErrorAciona disparos apenas por erros técnicos (rede, autenticação, crédito, upload), nunca por uma verificação recusada.

Portanto, o padrão em dispositivos móveis é:onSubmit, envie overificationIdNo seu backend, exiba uma tela de "Estamos verificando seus dados" e deixe que o backend informe ao aplicativo o que exibir em seguida quando o webhook chegar. Não busque o resultado completo do aplicativo. Isso requer uma chave secreta, e uma chave secreta em um binário de aplicativo é uma chave secreta que outra pessoa possui.

Quando é que NFC Faz sentido a leitura do chip?

Quando seus candidatos possuem passaportes eletrônicos ou cartões de identificação com chip e você deseja o nível de segurança mais alto, os SDKs móveis leem o chip por meio de seu canal seguro e o servidor executa a autenticação passiva: ele verifica novamente o hash de cada grupo de dados em relação ao objeto de segurança assinado do chip e verifica se o signatário está vinculado a um certificado de um estado emissor confiável ( CSCA Um chip que comprovadamente foi adulterado falha na verificação.chip_not_authentic.

Quatro limites a serem considerados no projeto, a partir de NFC Documentação do chip (abre num novo separador) :

• A cobertura segue os certificados. A etapa do chip é oferecida apenas para países na Toden A lista de certificados abrange 138 países, incluindo Nigéria, Gana, Quênia, Egito, Etiópia e Senegal.GET /configrelatóriossupportsNfcpor tipo de ID para sua conta.

• Alguns chips não podem ser lidos por ninguém. O cartão de identidade inteligente sul-africano, o Emirates ID e o MyKad da Malásia usam aplicativos de chip proprietários. Esses documentos ainda são verificados por meio de checagens documentais.

• Telefones sem NFC Ignorar esta etapa nunca impede a verificação. Um chip ausente ou ilegível recorre à verificação de documentos e registros governamentais.

• A etapa do chip ocorre após a digitalização do documento , porque a chave que abre o canal seguro do chip é derivada da zona legível por máquina do documento.

Quais IDs compatíveis com chip oferecem essa etapa e se os usuários podem ignorá-la são configurações de fluxo de trabalho no construtor. NFC painel.

Como manter o tamanho do aplicativo em um nível razoável?

No Android, a detecção facial e o reconhecimento de texto utilizam o Google ML Kit, e o SDK Depende das variantes do Google Play Services que baixam seus modelos no primeiro uso, em vez de incluí-los em um pacote. Incluir os modelos em um pacote adiciona um download considerável a cada dispositivo, e é por isso que as variantes obtidas por meio de downloads são o padrão. A desvantagem é que as variantes do Google Play Services não funcionam em dispositivos sem o Google Play Services, como os da Huawei. Se você enviar o produto para esses dispositivos, configureext { myazaKycBundledMlKit = true }na sua raizbuild.gradlepara agrupar os modelos.

Enviar um pacote de aplicativos Android em vez de um pacote universal. APK E, ao habilitar o R8 com redução de recursos, o download é ainda mais reduzido. SDK envia suas próprias regras de consumo para o R8.

Lista de verificação antes do lançamento

• React Native: um cliente de desenvolvimento ou build básico em CI, nunca Expo Go; Nova Arquitetura habilitada.

• Permissão para usar a câmera declarada; string de localização declarada caso algum fluxo de trabalho colete um endereço; sem permissão para usar o microfone.

• expo-document-pickerinstalado se algum fluxo de trabalho coletar documentos como arquivos.

• Um fluxo de trabalho publicado montado por ID;userId,userDatae um estávelmetadata.requestIdpassado por código.

• UMpk_test_chave em builds de desenvolvimento e umpk_live_A chave está presente nas versões de lançamento, nunca é uma chave secreta.

• onSubmitmãos overificationIdpara o seu backend; os resultados vêm de webhooks.

• NFC cobertura verificada em relação asupportsNfcpara os países onde você atua.

Primeiro, teste todo o caminho no Sandbox com os IDs de teste publicados e, em seguida, troque a chave. O hub do desenvolvedor vincula ambos .SDK guias.