Tworzenie aplikacji React Native w celu dodania użytkowników do usługi rozpoznawania twarzy

W tym przewodniku pokazano, jak rozpocząć pracę z przykładową aplikacją rejestracji twarzy. Aplikacja demonstruje najlepsze rozwiązania dotyczące uzyskiwania znaczącej zgody na dodawanie użytkowników do usługi rozpoznawania twarzy i uzyskiwanie wysokiej jakości danych twarzy. Zintegrowany system może użyć takiej aplikacji, aby zapewnić bezobsługową kontrolę dostępu, identyfikację, śledzenie obecności lub kiosk personalizacji na podstawie danych twarzy.

Gdy użytkownicy uruchamiają aplikację, zostanie wyświetlony szczegółowy ekran zgody. Jeśli użytkownik wyrazi zgodę, aplikacja wyświetli monit o podanie nazwy użytkownika i hasła, a następnie przechwytuje wysokiej jakości obraz twarzy przy użyciu aparatu urządzenia.

Przykładowa aplikacja jest napisana przy użyciu języka JavaScript i platformy React Native. Można go wdrożyć na urządzeniach z systemami Android i iOS.

Wymagania wstępne

  • Subskrypcja platformy Azure — utwórz bezpłatnie.
  • Po utworzeniu subskrypcji platformy Azure utwórz zasób rozpoznawania twarzy w witrynie Azure Portal, aby uzyskać klucz i punkt końcowy. Po wdrożeniu wybierz pozycję Przejdź do zasobu.
    • Będziesz potrzebować klucza i punktu końcowego z utworzonego zasobu, aby połączyć aplikację z interfejsem API rozpoznawania twarzy.

Ważne

Zagadnienia związane z zabezpieczeniami

  • W przypadku lokalnego programowania i początkowego ograniczonego testowania dopuszczalne jest użycie zmiennych środowiskowych do przechowywania klucza interfejsu API i punktu końcowego (chociaż nie jest to najlepsze rozwiązanie). W przypadku wdrożeń pilotażowych i końcowych klucz interfejsu API powinien być przechowywany bezpiecznie — co prawdopodobnie wiąże się z użyciem usługi pośredniej w celu zweryfikowania tokenu użytkownika wygenerowanego podczas logowania.
  • Nigdy nie przechowuj klucza interfejsu API lub punktu końcowego w kodzie ani nie zatwierdzaj ich w systemie kontroli wersji (np. Git). W takim przypadku po błędzie należy natychmiast wygenerować nowy klucz/punkt końcowy interfejsu API i odwołać poprzednie.
  • Najlepszym rozwiązaniem jest posiadanie oddzielnych kluczy interfejsu API na potrzeby programowania i produkcji.

Konfigurowanie środowiska projektowego

  1. Sklonuj repozytorium git dla przykładowej aplikacji.

  2. Aby skonfigurować środowisko projektowe, postępuj zgodnie z dokumentacją platformy React Native. Wybierz pozycję React Native CLI Quickstart (Szybki start) interfejsu wiersza polecenia platformy React. Wybierz system operacyjny programowania i system Android jako docelowy system operacyjny. Ukończ sekcje Instalowanie zależności i środowiska programistycznego systemu Android.

  3. Pobierz preferowany edytor tekstów, taki jak Visual Studio Code.

  4. Pobierz punkt końcowy interfejsu FaceAPI i klucz w witrynie Azure Portal na karcie Przegląd zasobu. Nie zaewidencjonuj klucza interfejsu API rozpoznawania twarzy w repozytorium zdalnym.

    Ostrzeżenie

    W przypadku lokalnego programowania i testowania można wprowadzić klucz interfejsu API i punkt końcowy jako zmienne środowiskowe. W przypadku ostatecznego wdrożenia należy przechowywać klucz interfejsu API w bezpiecznej lokalizacji i nigdy w kodzie lub zmiennych środowiskowych. Zapoznaj się z przewodnikiem uwierzytelniania usług Azure AI, aby uzyskać informacje na temat innych sposobów uwierzytelniania usługi.

  5. Uruchom aplikację przy użyciu emulatora urządzenia wirtualnego z systemem Android z programu Android Studio lub własnego urządzenia z systemem Android. Aby przetestować aplikację na urządzeniu fizycznym, postępuj zgodnie z odpowiednią dokumentacją platformy React Native.

Dostosowywanie aplikacji dla firmy

Po skonfigurowaniu przykładowej aplikacji możesz dostosować ją do własnych potrzeb.

Na przykład możesz dodać informacje specyficzne dla sytuacji na stronie zgody:

app consent page

  1. Dodaj więcej instrukcji, aby zwiększyć dokładność weryfikacji.

    Wiele problemów z rozpoznawaniem twarzy jest spowodowanych przez obrazy referencyjne o niskiej jakości. Oto niektóre czynniki, które mogą obniżyć wydajność modelu:

    • Rozmiar twarzy (twarze, które są odległe od aparatu)
    • Orientacja twarzy (twarze odwrócone lub przechylone od aparatu)
    • Słabe warunki oświetlenia (słabe światło lub podświetlenie), w których obraz może być słabo narażony lub ma zbyt dużo szumu
    • Okluzji (częściowo ukryte lub utrudniane twarze), w tym akcesoria, takie jak kapelusze lub okulary z grubymi obręczami
    • Rozmycie (takie jak szybki ruch twarzy, gdy zdjęcie zostało zrobione).

    Usługa zapewnia kontrole jakości obrazów, aby ułatwić wybór, czy obraz ma wystarczającą jakość na podstawie powyższych czynników, aby dodać klienta lub spróbować rozpoznać twarz. Ta aplikacja pokazuje, jak uzyskiwać dostęp do ramek z aparatu urządzenia, wykrywać jakość i wyświetlać użytkownikowi komunikaty interfejsu użytkownika, aby ułatwić im przechwytywanie obrazu o wyższej jakości, wybieranie klatek o najwyższej jakości i dodawanie wykrytej twarzy do usługi interfejsu API rozpoznawania twarzy.

    app image capture instruction page

  2. Przykładowa aplikacja oferuje funkcje usuwania informacji użytkownika i opcji odczytu. Możesz włączyć lub wyłączyć te operacje na podstawie wymagań biznesowych.

    profile management page

    Aby rozszerzyć funkcjonalność aplikacji w celu pokrycia pełnego środowiska, przeczytaj omówienie dodatkowych funkcji w celu zaimplementowania i najlepszych rozwiązań.

  3. Konfigurowanie bazy danych tak, aby mapować każdą osobę przy użyciu ich identyfikatora

    Musisz użyć bazy danych do przechowywania obrazu twarzy wraz z metadanymi użytkownika. Numer ubezpieczenia społecznego lub inny unikatowy identyfikator osoby może służyć jako klucz do wyszukania identyfikatora twarzy.

  4. Aby uzyskać bezpieczne metody przekazywania klucza subskrypcji i punktu końcowego do usługi rozpoznawania twarzy, zobacz Przewodnik po zabezpieczeniach usług Azure AI.

Wdrażanie aplikacji

Najpierw upewnij się, że aplikacja jest gotowa do wdrożenia produkcyjnego: usuń wszystkie klucze lub wpisy tajne z kodu aplikacji i upewnij się, że zostały sprawdzone najlepsze rozwiązania w zakresie zabezpieczeń.

Gdy wszystko będzie gotowe do wydania aplikacji produkcyjnej, wygenerujesz plik APK gotowy do wydania, który jest formatem pliku pakietu dla aplikacji systemu Android. Ten plik APK musi być podpisany przy użyciu klucza prywatnego. W tej kompilacji wydania możesz rozpocząć dystrybucję aplikacji bezpośrednio na urządzenia.

Postępuj zgodnie z dokumentacją Przygotowanie do wydania , aby dowiedzieć się, jak wygenerować klucz prywatny, podpisać aplikację i wygenerować pakiet APK wydania.

Po utworzeniu podpisanego pakietu APK zobacz dokumentację Publikowanie aplikacji, aby dowiedzieć się więcej na temat sposobu wydawania aplikacji .

Następne kroki

W tym przewodniku przedstawiono sposób konfigurowania środowiska deweloperskiego i rozpoczynania pracy z przykładową aplikacją. Jeśli dopiero zaczynasz korzystać z oprogramowania React Native, możesz przeczytać ich dokumenty wprowadzające , aby dowiedzieć się więcej na temat podstawowych informacji. Warto również zapoznać się z interfejsem API rozpoznawania twarzy. Zapoznaj się z innymi sekcjami na temat dodawania użytkowników przed rozpoczęciem programowania.