Creare un'app React Native per aggiungere utenti a un servizio Viso

Questa guida illustra come iniziare a usare un'applicazione di registrazione viso di esempio. L'app illustra le procedure consigliate per ottenere un consenso significativo per aggiungere utenti a un servizio di riconoscimento del viso e acquisire dati di viso di alta qualità. Un sistema integrato può usare un'app come questa per fornire controllo di accesso senza tocco, identificazione, rilevamento delle presenze o chiosco multimediale di personalizzazione, in base ai dati del viso.

Quando gli utenti avviano l'app, viene visualizzata una schermata di consenso dettagliata. Se l'utente concede il consenso, l'app richiede un nome utente e una password e quindi acquisisce un'immagine del viso di alta qualità usando la fotocamera del dispositivo.

L'app di esempio viene scritta usando JavaScript e il framework React Native. Può essere distribuito nei dispositivi Android e iOS.

Prerequisiti

• Una sottoscrizione di Azure: crearne una gratuitamente.
• Dopo aver creato la sottoscrizione di Azure, creare una risorsa Viso nel portale di Azure per ottenere la chiave e l'endpoint. Al termine della distribuzione, fare clic su Vai alla risorsa.
  • Sarà necessaria la chiave e l'endpoint dalla risorsa creata per connettere l'applicazione all'API Viso.

Importante

Considerazioni relative alla sicurezza

• Per lo sviluppo locale e i test limitati iniziali, è accettabile (anche se non è consigliabile) usare le variabili di ambiente per contenere la chiave API e l'endpoint. Per le distribuzioni pilota e finale, la chiave API deve essere archiviata in modo sicuro, che probabilmente implica l'uso di un servizio intermedio per convalidare un token utente generato durante l'accesso.
• Non archiviare mai la chiave API o l'endpoint nel codice o eseguirne il commit in un sistema di controllo della versione (ad esempio Git). Se ciò si verifica per errore, è consigliabile generare immediatamente una nuova chiave API/endpoint e revocare quelli precedenti.
• Come procedura consigliata, prendere in considerazione la possibilità di avere chiavi API separate per lo sviluppo e la produzione.

Impostazione dell'ambiente di sviluppo

Android

1. Clonare il repository Git per l'app di esempio.

2. Per configurare l'ambiente di sviluppo, seguire la documentazione di React Native. Selezionare Avvio rapido dell'interfaccia della riga di comando nativa React. Selezionare il sistema operativo di sviluppo e Android come sistema operativo di destinazione. Completare le sezioni Installazione delle dipendenze e dell'ambiente di sviluppo Android.

3. Scaricare l'editor di testo preferito, ad esempio Visual Studio Code.

4. Recuperare l'endpoint e la chiave FaceAPI nella portale di Azure nella scheda Panoramica della risorsa. Non archiviare la chiave API Viso nel repository remoto.

   Avviso

   Solo per lo sviluppo e il test locali, è possibile immettere la chiave API e l'endpoint come variabili di ambiente. Per la distribuzione finale, archiviare la chiave API in una posizione sicura e mai nel codice o nelle variabili di ambiente. Vedere la guida all'autenticazione dei servizi di intelligenza artificiale di Azure per altri modi per autenticare il servizio.

5. Eseguire l'app usando l'emulatore di dispositivo virtuale Android da Android Studio o il proprio dispositivo Android. Per testare l'app in un dispositivo fisico, seguire la documentazione di React Native pertinente.

iOS

1. Clonare il repository Git per l'app di esempio.

2. Per configurare l'ambiente di sviluppo, seguire la documentazione di React Native. Selezionare Avvio rapido dell'interfaccia della riga di comando nativa React. Selezionare macOS come sistema operativo di sviluppo e iOS come sistema operativo di destinazione. Completare la sezione Installazione delle dipendenze.

3. Scaricare l'editor di testo preferito, ad esempio Visual Studio Code. Dovrai anche scaricare Xcode.

4. Recuperare l'endpoint e la chiave FaceAPI nella portale di Azure nella scheda Panoramica della risorsa.

   Avviso

   Solo per lo sviluppo e il test locali, è possibile immettere la chiave API e l'endpoint come variabili di ambiente. Per la distribuzione finale, archiviare la chiave API in una posizione sicura e mai nel codice o nelle variabili di ambiente. Vedere la guida all'autenticazione dei servizi di intelligenza artificiale di Azure per altri modi per autenticare il servizio.

5. Eseguire l'app usando un dispositivo simulato da Xcode o un dispositivo iOS. Per testare l'app in un dispositivo fisico, seguire la documentazione di React Native pertinente.

Personalizzare l'app per l'azienda

Dopo aver configurato l'app di esempio, è possibile personalizzarla in base alle proprie esigenze.

Ad esempio, è possibile aggiungere informazioni specifiche della situazione nella pagina di consenso:

1. Aggiungere altre istruzioni per migliorare l'accuratezza della verifica.

   Molti problemi di riconoscimento dei volti sono causati da immagini di riferimento di bassa qualità. Alcuni fattori che possono compromettere le prestazioni del modello sono:

   • Dimensioni del viso (visi distanti dalla fotocamera)
   • Orientamento del viso (volti girati o inclinati lontano dalla fotocamera)
   • Condizioni di illuminazione scarse (scarsa luce o backlighting) in cui l'immagine potrebbe essere scarsamente esposta o avere troppo rumore
   • Occlusione (facce parzialmente nascoste o ostruite), inclusi accessori come cappelli o occhiali spessi
   • Sfocatura (ad esempio con un rapido movimento del viso quando è stata scattata la fotografia).

   Il servizio fornisce controlli di qualità dell'immagine che consentono di scegliere se l'immagine è di qualità sufficiente in base ai fattori precedenti per aggiungere il cliente o tentare il riconoscimento del viso. Questa app illustra come accedere ai fotogrammi dalla fotocamera del dispositivo, rilevare la qualità e mostrare messaggi dell'interfaccia utente all'utente per aiutarli a acquisire un'immagine di qualità superiore, selezionare i fotogrammi di alta qualità e aggiungere il viso rilevato nel servizio API Viso.

   

2. L'app di esempio offre funzionalità per l'eliminazione delle informazioni dell'utente e l'opzione per la lettura. È possibile abilitare o disabilitare queste operazioni in base alle esigenze aziendali.

   

   Per estendere la funzionalità dell'app per coprire l'esperienza completa, leggere la panoramica per altre funzionalità da implementare e procedure consigliate.

3. Configurare il database per eseguire il mapping di ogni persona con il relativo ID

   È necessario usare un database per archiviare l'immagine del viso insieme ai metadati utente. Il numero di previdenza sociale o un altro identificatore univoco della persona può essere usato come chiave per cercare il proprio ID viso.

4. Per i metodi sicuri per passare la chiave di sottoscrizione e l'endpoint al servizio Viso, vedere la Guida alla sicurezza dei servizi di intelligenza artificiale di Azure.

Distribuire l'app

Android

Prima di tutto, assicurarsi che l'app sia pronta per la distribuzione di produzione: rimuovere eventuali chiavi o segreti dal codice dell'app e assicurarsi di aver seguito le procedure consigliate per la sicurezza.

Quando sei pronto per rilasciare l'app per la produzione, genererai un file APK pronto per la versione, ovvero il formato di file del pacchetto per le app Android. Questo file APK deve essere firmato con una chiave privata. Con questa build di versione, è possibile iniziare a distribuire l'app direttamente ai dispositivi.

Seguire la documentazione Preparare la versione per informazioni su come generare una chiave privata, firmare l'applicazione e generare un APK di versione.

Dopo aver creato un APK firmato, vedere la documentazione pubblicare l'app per altre informazioni su come rilasciare l'app.

iOS

Prima di tutto, assicurarsi che l'app sia pronta per la distribuzione di produzione: rimuovere eventuali chiavi o segreti dal codice dell'app e assicurarsi di aver seguito le procedure consigliate per la sicurezza. Per prepararsi per la distribuzione, è necessario creare un'icona dell'app, una schermata di avvio e configurare le impostazioni delle informazioni di distribuzione. Seguire la documentazione di Xcode per preparare l'app per la distribuzione.

Quando sei pronto per rilasciare l'app per la produzione, creerai un archivio dell'app. Seguire la documentazione di Xcode su come creare una compilazione di archivio e le opzioni per la distribuzione dell'app.

Passaggi successivi

In questa guida si è appreso come configurare l'ambiente di sviluppo e iniziare a usare l'app di esempio. Se non si ha familiarità con React Native, è possibile leggere la documentazione introduttiva per altre informazioni di base. Può anche essere utile acquisire familiarità con l'API Viso. Leggere le altre sezioni sull'aggiunta di utenti prima di iniziare lo sviluppo.