Criar um aplicativo do React Native para adicionar usuários a um serviço de Detecção Facial

Este guia mostrará a você como começar a usar um aplicativo de registro de Detecção Facial de exemplo. O aplicativo demonstra as melhores práticas para obter um consentimento significativo para adicionar usuários a um serviço de reconhecimento facial e adquirir dados de alta qualidade de rostos. Um sistema integrado pode usar um aplicativo como esse para fornecer controle de acesso sem toque, identificação, acompanhamento de presença ou quiosque de personalização, com base nos dados do seu rosto.

Quando os usuários iniciam o aplicativo, ele mostra uma tela de consentimento detalhada. Se o usuário der o consentimento, o aplicativo solicitará a ele um nome de usuário e uma senha e capturará uma imagem do rosto de alta qualidade usando a câmera do dispositivo.

O aplicativo de exemplo é escrito usando JavaScript e a estrutura React Native. Ele pode ser implantado em dispositivos Android e iOS.

Pré-requisitos

• Uma assinatura do Azure – crie uma gratuitamente.
• Depois de obter sua assinatura do Azure, crie um recurso da Detecção Facial no portal do Azure para obter a chave e o ponto de extremidade. Após a implantação, selecione Ir para recurso.
  • Você precisará da chave e do ponto de extremidade do recurso criado para conectar seu aplicativo à API de Detecção Facial.

Importante

Considerações de segurança

• Para desenvolvimento local e teste limitado inicial, é aceitável (embora não seja a melhor prática) usar variáveis de ambiente para manter a chave de API e o ponto de extremidade. Para implantações piloto e final, a chave de API deve ser armazenada com segurança, o que provavelmente envolve o uso de um serviço intermediário para validar um token de usuário gerado durante o logon.
• Nunca armazene a chave de API ou o ponto de extremidade no código nem confirme-os em um sistema de controle de versão (por exemplo, Git). Se isso acontecer por engano, você deverá gerar imediatamente uma nova chave de API/ponto de extremidade e revogar as anteriores.
• De acordo com as melhores práticas, considere ter chaves de API separadas para o desenvolvimento e a produção.

Configurar o ambiente de desenvolvimento

Android

1. Clone o repositório Git para o aplicativo de exemplo.

2. Para configurar o ambiente de desenvolvimento, siga a Documentação do React Native . Selecione Início Rápido da CLI do React Native. Selecione seu sistema operacional de desenvolvimento e Android como o sistema operacional de destino. Conclua as seções Instalando as dependências e Ambiente de desenvolvimento Android.

3. Baixe seu editor de texto preferido, como o Visual Studio Code.

4. Recupere o ponto de extremidade e a chave de API de Detecção Facial no portal do Azure na guia Visão Geral do recurso. Não faça check-in da sua chave de API de Detecção Facial em seu repositório remoto.

   Aviso

   Apenas para desenvolvimento e teste local, você pode inserir a chave de API e o ponto de extremidade como variáveis de ambiente. Para a implantação final, armazene a chave de API em uma localização segura e nunca no código ou nas variáveis de ambiente. Consulte o Guia de autenticação dos serviços de IA do Azure para obter outras maneiras de autenticar o serviço.

5. Execute o aplicativo usando o emulador de Dispositivo Virtual Android no Android Studio ou no seu dispositivo Android. Para testar seu aplicativo em um dispositivo físico, siga a documentação relevante do React Native.

iOS

1. Clone o repositório Git para o aplicativo de exemplo.

2. Para configurar o ambiente de desenvolvimento, siga a Documentação do React Native . Selecione Início Rápido da CLI do React Native. Selecione macOS como seu SO de desenvolvimento e iOS como o SO de destino. Conclua a seção Instalar dependências.

3. Baixe seu editor de texto preferido, como o Visual Studio Code. Você também precisará baixar o Xcode.

4. Recupere o ponto de extremidade e a chave de API de Detecção Facial no portal do Azure na guia Visão Geral do recurso.

   Aviso

   Apenas para desenvolvimento e teste local, você pode inserir a chave de API e o ponto de extremidade como variáveis de ambiente. Para a implantação final, armazene a chave de API em uma localização segura e nunca no código ou nas variáveis de ambiente. Consulte o Guia de autenticação dos serviços de IA do Azure para obter outras maneiras de autenticar o serviço.

5. Execute o aplicativo usando um dispositivo simulado do Xcode ou seu próprio dispositivo iOS. Para testar seu aplicativo em um dispositivo físico, siga a documentação relevante do React Native.

Personalizar o aplicativo para o locatário

Agora que você configurou o aplicativo de exemplo, você pode adaptá-lo às suas próprias necessidades.

Por exemplo, talvez você queira adicionar informações específicas da situação em sua página de consentimento:

1. Adicione mais instruções para aumentar a precisão da verificação.

   Muitos problemas de reconhecimento facial são causados por imagens de referência de baixa qualidade. Alguns fatores que podem prejudicar o desempenho do modelo são:

   • Tamanho do rosto (rostos distantes da câmera)
   • Orientação do rosto (rostos virados ou inclinados para longe da câmera)
   • Condições de iluminação insuficiente (pouca luz ou retroiluminação) em que a imagem pode ser exposta insatisfatoriamente ou ter muito ruído
   • Oclusão (rostos parcialmente ocultos ou obstruídos), incluindo acessórios como chapéus ou óculos de aros grossos
   • Desfoque (por exemplo, movimento rápido do rosto quando a foto foi tirada).

   O serviço fornece verificações de qualidade de imagem para ajudar você a escolher se a imagem tem qualidade suficiente com base nos fatores acima, para registrar o cliente ou tentar o reconhecimento facial. Este aplicativo demonstra como acessar quadros da câmera do dispositivo, detectar qualidade e mostrar mensagens de interface do usuário para o usuário para ajudá-lo a capturar uma imagem de qualidade superior, selecionar os quadros de maior qualidade e adicionar o rosto detectado ao serviço de API de Detecção Facial.

   

2. O aplicativo também oferece funcionalidade para excluir as informações do usuário e a opção de adicioná-las novamente. Você pode habilitar ou desabilitar essas operações com base em seus requisitos de negócios.

   

   Para estender a funcionalidade do aplicativo para abranger a experiência completa, leia a visão geral para encontrar recursos adicionais para implementar e melhores práticas.

3. Configurar o banco de dados para mapear cada pessoa com a respectiva ID

   Você precisa usar um banco de dados para armazenar a imagem facial junto com os metadados do usuário. O número do seguro social ou outro identificador de pessoa exclusivo pode ser usado como uma chave para pesquisar a ID facial.

4. Para obter métodos seguros de passagem da chave de assinatura e do ponto de extremidade para o serviço de Detecção Facial, consulte o Guia de Segurança dos Serviços de IA do Azure.

Implantar o aplicativo

Android

Primeiro, verifique se o aplicativo está pronto para implantação de produção: remova as chaves ou segredos do código do aplicativo e verifique se você seguiu as melhores práticas de segurança.

Quando estiver pronto para liberar seu aplicativo para produção, você gerará um arquivo APK pronto para lançamento, que é o formato de arquivo de pacote para aplicativos Android. Esse arquivo APK deve ser assinado com uma chave privada. Com esse build de lançamento, você pode começar a distribuir o aplicativo diretamente para seus dispositivos.

Siga a documentação Preparar para o lançamento para saber como gerar uma chave privada, assinar o aplicativo e gerar um APK de lançamento.

Depois de criar um APK assinado, confira a documentação Publicar seu aplicativo para saber mais sobre como lançar um aplicativo.

iOS

Primeiro, verifique se o aplicativo está pronto para implantação de produção: remova as chaves ou segredos do código do aplicativo e verifique se você seguiu as melhores práticas de segurança. Para se preparar para a distribuição, você precisará criar um ícone de aplicativo, uma tela de inicialização e definir as configurações das informações de implantação. Siga a documentação do Xcode para preparar seu aplicativo para distribuição.

Quando estiver pronto para liberar seu aplicativo para produção, você fará build de uma camada de armazenamento de arquivos do seu aplicativo. Siga a documentação do Xcode sobre como criar uma compilação de arquivos e opções para distribuir seu aplicativo.

Próximas etapas

Nesse guia, você aprendeu a configurar seu ambiente de desenvolvimento e a começar a usar o aplicativo de exemplo. Se você for novo no React Native, poderá ler os documentos de introdução para saber mais sobre informações básicas. Também pode ser útil se familiarizar com a API de Detecção Facial. Leia as outras seções sobre como adicionar usuários antes de começar a desenvolver.