จดจำจุดสังเกตได้อย่างปลอดภัยด้วย Cloud Vision โดยใช้การตรวจสอบสิทธิ์และฟังก์ชัน Firebase บนแพลตฟอร์ม Apple

หากต้องการเรียกใช้ Google Cloud API จากแอป คุณต้องสร้าง REST API ระดับกลาง ที่จัดการการให้สิทธิ์และปกป้องค่าลับ เช่น คีย์ API จากนั้นคุณต้อง เขียนโค้ดในแอปบนอุปกรณ์เคลื่อนที่เพื่อตรวจสอบสิทธิ์และสื่อสารกับบริการตัวกลางนี้

วิธีหนึ่งในการสร้าง REST API นี้คือการใช้ Firebase Authentication และฟังก์ชัน ซึ่งจะช่วยให้คุณมีเกตเวย์แบบ Serverless ที่มีการจัดการไปยัง Google Cloud APIs ที่จัดการการตรวจสอบสิทธิ์และเรียกใช้จากแอปบนอุปกรณ์เคลื่อนที่ได้ด้วย SDK ที่สร้างไว้ล่วงหน้า

คู่มือนี้แสดงวิธีใช้เทคนิคนี้เพื่อเรียกใช้ Cloud Vision API จากแอป วิธีนี้จะช่วยให้ผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์ทั้งหมดเข้าถึงบริการที่เรียกเก็บเงินของ Cloud Vision ผ่านโปรเจ็กต์ Cloud ของคุณได้ ดังนั้น โปรดพิจารณาว่ากลไกการตรวจสอบสิทธิ์นี้เพียงพอสำหรับกรณีการใช้งานของคุณหรือไม่ก่อนดำเนินการต่อ

ก่อนเริ่มต้น

กำหนดค่าโปรเจ็กต์

หากยังไม่ได้เพิ่ม Firebase ลงในแอป ให้เพิ่มโดยทำตาม ขั้นตอนในคู่มือเริ่มต้นใช้งาน

ใช้ Swift Package Manager เพื่อติดตั้งและจัดการทรัพยากร Dependency ของ Firebase

  1. เปิดโปรเจ็กต์แอปใน Xcode แล้วไปที่File > Add Packages
  2. เมื่อได้รับข้อความแจ้ง ให้เพิ่มที่เก็บ SDK ของแพลตฟอร์ม Apple ของ Firebase ดังนี้
  3.   https://github.com/firebase/firebase-ios-sdk.git
  4. เลือกFirebase ML คลัง
  5. เพิ่มแฟล็ก -ObjC ลงในส่วนแฟล็ก Linker อื่นๆ ของการตั้งค่าบิลด์ของเป้าหมาย
  6. เมื่อเสร็จแล้ว Xcode จะเริ่มจับคู่ข้อมูลและดาวน์โหลดทรัพยากร Dependency ในเบื้องหลังโดยอัตโนมัติ

จากนั้นทำการตั้งค่าในแอปดังนี้

  1. ในแอป ให้นำเข้า Firebase ดังนี้

    Swift

    import FirebaseMLModelDownloader

    Objective-C

    @import FirebaseMLModelDownloader;

อีกไม่กี่ขั้นตอนในการกำหนดค่า เราก็พร้อมใช้งานแล้ว

  1. หากยังไม่ได้เปิดใช้ API บนระบบคลาวด์สำหรับโปรเจ็กต์ ให้ทำดังนี้ ตอนนี้

    1. เปิดFirebase ML หน้า API ในคอนโซล Firebase
    2. หากยังไม่ได้อัปเกรดโปรเจ็กต์เป็นแพ็กเกจราคา Blaze แบบจ่ายตามการใช้งาน ให้คลิกอัปเกรดเพื่อดำเนินการ (ระบบจะแจ้งให้คุณอัปเกรดก็ต่อเมื่อโปรเจ็กต์ไม่ได้ใช้แพ็กเกจราคา Blaze)

      เฉพาะโปรเจ็กต์ในแพ็กเกจการเรียกเก็บเงิน Blaze เท่านั้นที่ใช้ API บนระบบคลาวด์ได้

    3. หากยังไม่ได้เปิดใช้ API บนระบบคลาวด์ ให้คลิก เปิดใช้ API บนระบบคลาวด์
  2. กำหนดค่าคีย์ API ของ Firebase ที่มีอยู่เพื่อไม่อนุญาตให้เข้าถึง Cloud Vision API ดังนี้
    1. เปิดหน้าข้อมูลเข้าสู่ระบบของ Cloud Console
    2. สำหรับคีย์ API แต่ละรายการในรายการ ให้เปิดมุมมองการแก้ไข แล้วเพิ่ม API ที่พร้อมใช้งานทั้งหมดยกเว้น Cloud Vision API ลงในรายการในส่วนข้อจำกัดของคีย์

ทําให้ฟังก์ชันที่เรียกใช้ได้ใช้งานได้

จากนั้น ให้ติดตั้งใช้งาน Cloud Function ที่คุณจะใช้เพื่อเชื่อมต่อแอปกับ Cloud Vision API functions-samples ที่เก็บมีตัวอย่าง ที่คุณใช้ได้

โดยค่าเริ่มต้น การเข้าถึง Cloud Vision API ผ่านฟังก์ชันนี้จะอนุญาตให้ เฉพาะผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ของแอปเข้าถึง Cloud Vision API ได้ คุณ แก้ไขฟังก์ชันให้เหมาะกับข้อกำหนดต่างๆ ได้

วิธีทำให้ฟังก์ชันใช้งานได้

  1. โคลนหรือดาวน์โหลดที่เก็บฟังก์ชันตัวอย่าง แล้วเปลี่ยนเป็นไดเรกทอรี Node-1st-gen/vision-annotate-image
    git clone https://github.com/firebase/functions-samples
    cd Node-1st-gen/vision-annotate-image
    
  2. ติดตั้งการอ้างอิงด้วยคำสั่งต่อไปนี้
    cd functions
    npm install
    cd ..
  3. หากยังไม่มี Firebase CLI ให้ติดตั้ง
  4. เริ่มต้นโปรเจ็กต์ Firebase ในไดเรกทอรี vision-annotate-image เมื่อได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์ในรายการ
    firebase init
  5. ทำให้ฟังก์ชันใช้งานได้
    firebase deploy --only functions:annotateImage

เพิ่ม Firebase Auth ไปยังแอป

ฟังก์ชันที่เรียกใช้ได้ซึ่งติดตั้งใช้งานข้างต้นจะปฏิเสธคำขอจากผู้ใช้แอปที่ไม่ได้รับการตรวจสอบสิทธิ์ หากยังไม่ได้ดำเนินการ คุณจะต้องเพิ่ม Firebase Auth ลงในแอป

เพิ่มทรัพยากร Dependency ที่จำเป็นลงในแอป

ใช้ Swift Package Manager เพื่อติดตั้งไลบรารี Cloud Functions for Firebase

1. เตรียมรูปภาพอินพุต

หากต้องการเรียกใช้ Cloud Vision รูปภาพต้องจัดรูปแบบเป็นสตริงที่เข้ารหัสฐาน 64 วิธีประมวลผล 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. เรียกใช้ฟังก์ชันที่เรียกใช้ได้เพื่อจดจำสถานที่สำคัญ

หากต้องการจดจำสถานที่สำคัญในรูปภาพ ให้เรียกใช้ฟังก์ชันที่เรียกใช้ได้โดยส่ง คำขอ JSON ของ Cloud Vision

  1. ก่อนอื่น ให้เริ่มต้นอินสแตนซ์ของ Cloud Functions ดังนี้

    Swift

    lazy var functions = Functions.functions()
    

    Objective-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. สร้างคำขอโดยตั้งค่าประเภทเป็น 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. สุดท้าย ให้เรียกใช้ฟังก์ชันโดยใช้คำสั่งต่อไปนี้

    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. ดูข้อมูลเกี่ยวกับจุดสังเกตที่ระบบจดจำได้

หากการดำเนินการจดจำสถานที่สำคัญสำเร็จ ระบบจะแสดงผลการตอบกลับ JSON ของ BatchAnnotateImagesResponse ในผลลัพธ์ของงาน ออบเจ็กต์แต่ละรายการในอาร์เรย์ landmarkAnnotations จะแสดงสถานที่สำคัญที่ระบบจดจำได้ในรูปภาพ สำหรับสถานที่สำคัญแต่ละแห่ง คุณจะได้รับพิกัดขอบเขตในรูปภาพอินพุต ชื่อของสถานที่สำคัญ ละติจูดและลองจิจูด รหัสเอนทิตีของกราฟความรู้ (หากมี) และ คะแนนความเชื่อมั่นของการจับคู่ เช่น

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"];
  }
}