Bezpieczne rozpoznawanie punktów orientacyjnych dzięki Cloud Vision przy użyciu Uwierzytelniania i funkcji Firebase na platformach Apple

Aby wywołać interfejs Google Cloud API z aplikacji, musisz utworzyć pośredni interfejs API REST, który obsługuje autoryzację i chroni tajne wartości, takie jak klucze interfejsu API. Następnie musisz napisać kod w aplikacji mobilnej, aby uwierzytelnić się w tej usłudze pośredniej i komunikować się z nią.

Jednym ze sposobów utworzenia tego interfejsu API REST jest użycie Uwierzytelniania Firebase i Funkcji Firebase, które zapewniają zarządzaną, bezserwerową bramę do interfejsów API Google Cloud, która obsługuje uwierzytelnianie i może być wywoływana z aplikacji mobilnej za pomocą gotowych pakietów SDK.

W tym przewodniku pokazujemy, jak używać tej techniki do wywoływania interfejsu Cloud Vision API z poziomu aplikacji. Ta metoda umożliwia wszystkim uwierzytelnionym użytkownikom dostęp do płatnych usług Cloud Vision za pomocą Twojego projektu w Google Cloud. Zanim przejdziesz dalej, zastanów się, czy ten mechanizm uwierzytelniania jest wystarczający w Twoim przypadku.

Zanim zaczniesz

Skonfiguruj projekt

Jeśli nie masz jeszcze Firebase w swojej aplikacji, dodaj ją, wykonując czynności opisane w przewodniku dla początkujących.

Do instalacji zależności Firebase i do zarządzania nimi możesz używać menedżera pakietów Swift.

  1. Po otwarciu projektu aplikacji wybierz w Xcode opcję File > Add Packages (Plik > Dodaj pakiety).
  2. Gdy pojawi się prośba, dodaj repozytorium pakietu SDK Firebase na platformy Apple:
  3.   https://github.com/firebase/firebase-ios-sdk.git
  4. Wybierz bibliotekę Firebase ML.
  5. Dodaj flagę -ObjC do sekcji Other Linker Flags (Inne flagi linkera) w ustawieniach kompilacji elementu docelowego.
  6. Gdy skończysz, Xcode zacznie automatycznie wyszukiwać i pobierać zależności w tle.

Następnie przeprowadź konfigurację w aplikacji:

  1. Zaimportuj Firebase w aplikacji:

    Swift

    import FirebaseMLModelDownloader

    Objective-C

    @import FirebaseMLModelDownloader;

Jeszcze tylko kilka kroków konfiguracji i gotowe:

  1. Jeśli nie masz jeszcze włączonych interfejsów API w chmurze w swoim projekcie, zrób to teraz:

    1. Otwórz Firebase MLstronę Interfejsy API w konsoli Firebase.
    2. Jeśli nie masz jeszcze projektu z abonamentem Blaze z płatnością za wykorzystanie, kliknij Uaktualnij. (Prośba o uaktualnienie pojawi się tylko wtedy, gdy Twój projekt nie korzysta z abonamentu Blaze).

      Tylko projekty w ramach abonamentu Blaze mogą korzystać z interfejsów API opartych na chmurze.

    3. Jeśli interfejsy API oparte na chmurze nie są jeszcze włączone, kliknij Włącz interfejsy API oparte na chmurze.
  2. Skonfiguruj istniejące klucze interfejsu Firebase API, aby zablokować dostęp do interfejsu Cloud Vision API:
    1. Otwórz stronę Dane logowania w konsoli Cloud.
    2. W przypadku każdego klucza interfejsu API na liście otwórz widok edycji i w sekcji Ograniczenia klucza dodaj do listy wszystkie dostępne interfejsy API z wyjątkiem interfejsu Cloud Vision API.

Wdrażanie funkcji wywoływanej

Następnie wdróż funkcję w Cloud Functions, która będzie łączyć Twoją aplikację z interfejsem Cloud Vision API. W repozytorium functions-samples znajdziesz przykładowy plik, którego możesz użyć.

Domyślnie dostęp do interfejsu Cloud Vision API za pomocą tej funkcji będzie możliwy tylko dla uwierzytelnionych użytkowników aplikacji. Możesz zmodyfikować funkcję, aby dostosować ją do różnych wymagań.

Aby wdrożyć funkcję:

  1. Skopiuj lub pobierz repozytorium functions-samples i przejdź do katalogu Node-1st-gen/vision-annotate-image:
    git clone https://github.com/firebase/functions-samples
    cd Node-1st-gen/vision-annotate-image
    
  2. Zainstaluj zależności:
    cd functions
    npm install
    cd ..
  3. Jeśli nie masz wiersza poleceń Firebase, zainstaluj go.
  4. Zainicjuj projekt Firebase w katalogu vision-annotate-image. Gdy pojawi się prośba, wybierz projekt z listy.
    firebase init
  5. Wdróż funkcję:
    firebase deploy --only functions:annotateImage

Dodawanie Uwierzytelniania Firebase do aplikacji

Wdrożona powyżej funkcja wywoływana odrzuci każde żądanie od nieuwierzytelnionych użytkowników aplikacji. Jeśli jeszcze tego nie zrobisz, musisz dodać do aplikacji Firebase Authentication.

Dodawanie do aplikacji niezbędnych zależności

Do zainstalowania biblioteki Cloud Functions dla Firebase użyj menedżera pakietów Swift.

1. Przygotowywanie obrazu wejściowego

Aby wywołać Cloud Vision, obraz musi mieć format ciągu tekstowego z kodowaniem Base64. Aby przetworzyć UIImage:

Swift

guard let imageData = uiImage.jpegData(compressionQuality: 1.0) else { return }
let base64encodedImage = imageData.base64EncodedString()

Objective-C

NSData *imageData = UIImageJPEGRepresentation(uiImage, 1.0f);
NSString *base64encodedImage =
  [imageData base64EncodedStringWithOptions:NSDataBase64Encoding76CharacterLineLength];

2. Wywołaj funkcję wywoływaną, aby rozpoznać punkty orientacyjne

Aby rozpoznać punkty orientacyjne na obrazie, wywołaj funkcję wywoływaną, przekazując żądanie JSON Cloud Vision.

  1. Najpierw zainicjuj instancję Cloud Functions:

    Swift

    lazy var functions = Functions.functions()
    

    Objective-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. Utwórz prośbę z ustawieniem Typ na LANDMARK_DETECTION:

    Swift

    let requestData = [
      "image": ["content": base64encodedImage],
      "features": ["maxResults": 5, "type": "LANDMARK_DETECTION"]
    ]
    

    Objective-C

    NSDictionary *requestData = @{
      @"image": @{@"content": base64encodedImage},
      @"features": @{@"maxResults": @5, @"type": @"LANDMARK_DETECTION"}
    };
    
  3. Na koniec wywołaj funkcję:

    Swift

    do {
      let result = try await functions.httpsCallable("annotateImage").call(requestData)
      print(result)
    } catch {
      if let error = error as NSError? {
        if error.domain == FunctionsErrorDomain {
          let code = FunctionsErrorCode(rawValue: error.code)
          let message = error.localizedDescription
          let details = error.userInfo[FunctionsErrorDetailsKey]
        }
        // ...
      }
    }
    

    Objective-C

    [[_functions HTTPSCallableWithName:@"annotateImage"]
                              callWithObject:requestData
                                  completion:^(FIRHTTPSCallableResult * _Nullable result, NSError * _Nullable error) {
            if (error) {
              if ([error.domain isEqualToString:@"com.firebase.functions"]) {
                FIRFunctionsErrorCode code = error.code;
                NSString *message = error.localizedDescription;
                NSObject *details = error.userInfo[@"details"];
              }
              // ...
            }
            // Function completed succesfully
            // Get information about labeled objects
    
          }];
    

3. Uzyskiwanie informacji o rozpoznanych punktach orientacyjnych

Jeśli operacja rozpoznawania punktów orientacyjnych się powiedzie, w wyniku zadania zostanie zwrócona odpowiedź JSON w formacie BatchAnnotateImagesResponse. Każdy obiekt w tablicy landmarkAnnotations reprezentuje punkt orientacyjny rozpoznany na obrazie. Dla każdego punktu orientacyjnego możesz uzyskać jego współrzędne ograniczające na obrazie wejściowym, nazwę, szerokość i długość geograficzną, identyfikator encji w Grafie wiedzy (jeśli jest dostępny) oraz poziom ufności dopasowania. Przykład:

Swift

if let labelArray = (result?.data as? [String: Any])?["landmarkAnnotations"] as? [[String:Any]] {
  for labelObj in labelArray {
    let landmarkName = labelObj["description"]
    let entityId = labelObj["mid"]
    let score = labelObj["score"]
    let bounds = labelObj["boundingPoly"]
    // Multiple locations are possible, e.g., the location of the depicted
    // landmark and the location the picture was taken.
    guard let locations = labelObj["locations"] as? [[String: [String: Any]]] else { continue }
    for location in locations {
      let latitude = location["latLng"]?["latitude"]
      let longitude = location["latLng"]?["longitude"]
    }
  }
}

Objective-C

NSArray *labelArray = result.data[@"landmarkAnnotations"];
for (NSDictionary *labelObj in labelArray) {
  NSString *landmarkName = labelObj[@"description"];
  NSString *entityId = labelObj[@"mid"];
  NSNumber *score = labelObj[@"score"];
  NSArray *bounds = labelObj[@"boundingPoly"];
  // Multiple locations are possible, e.g., the location of the depicted
  // landmark and the location the picture was taken.
  NSArray *locations = labelObj[@"locations"];
  for (NSDictionary *location in locations) {
    NSNumber *latitude = location[@"latLng"][@"latitude"];
    NSNumber *longitude = location[@"latLng"][@"longitude"];
  }
}