ติดป้ายกำกับรูปภาพอย่างปลอดภัยด้วย Cloud Vision โดยใช้ Firebase Auth และฟังก์ชันบนแพลตฟอร์ม Apple

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

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

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

ก่อนที่คุณจะเริ่ม

กำหนดค่าโครงการของคุณ

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

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

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

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

  1. ในแอปของคุณ ให้นำเข้า Firebase:

    สวิฟท์

    import FirebaseMLModelDownloader

    วัตถุประสงค์-C

    @import FirebaseMLModelDownloader;

ขั้นตอนการกำหนดค่าเพิ่มเติมอีกสองสามขั้นตอน และเราพร้อมที่จะดำเนินการแล้ว:

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

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

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

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

ปรับใช้ฟังก์ชันที่เรียกได้

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

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

หากต้องการปรับใช้ฟังก์ชัน:

  1. โคลนหรือดาวน์โหลด repo ฟังก์ชั่นตัวอย่าง และเปลี่ยนเป็นไดเร็กทอรี 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 ลงในแอปของคุณ

เพิ่มการพึ่งพาที่จำเป็นให้กับแอปของคุณ

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

ตอนนี้คุณพร้อมที่จะติดป้ายกำกับรูปภาพแล้ว

1. เตรียมภาพที่นำเข้า

หากต้องการเรียกใช้ Cloud Vision รูปภาพจะต้องได้รับการจัดรูปแบบเป็นสตริงที่เข้ารหัส base64 ในการประมวลผล UIImage :

สวิฟท์

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

วัตถุประสงค์-C

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

2. เรียกใช้ฟังก์ชัน callable เพื่อติดป้ายกำกับรูปภาพ

หากต้องการติดป้ายกำกับวัตถุในรูปภาพ ให้เรียกใช้ฟังก์ชันที่เรียกใช้ได้ผ่าน คำขอ JSON Cloud Vision

  1. ขั้นแรก ให้เริ่มต้นอินสแตนซ์ของฟังก์ชันคลาวด์:

    สวิฟท์

    lazy var functions = Functions.functions()
    

    วัตถุประสงค์-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. สร้างคำขอโดยตั้ง Type เป็น LABEL_DETECTION :

    สวิฟท์

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

    วัตถุประสงค์-C

    NSDictionary *requestData = @{
      @"image": @{@"content": base64encodedImage},
      @"features": @{@"maxResults": @5, @"type": @"LABEL_DETECTION"}
    };
    
  3. สุดท้ายให้เรียกใช้ฟังก์ชัน:

    สวิฟท์

    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]
        }
        // ...
      }
    }
    

    วัตถุประสงค์-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 จะถูกส่งกลับในผลลัพธ์ของงาน แต่ละออบเจ็กต์ในอาร์เรย์ labelAnnotations แสดงถึงสิ่งที่มีป้ายกำกับอยู่ในรูปภาพ สำหรับป้ายกำกับแต่ละรายการ คุณจะได้รับคำอธิบายข้อความของป้ายกำกับ รหัสเอนทิตีกราฟความรู้ (หากมี) และคะแนนความเชื่อมั่นของการจับคู่ ตัวอย่างเช่น:

สวิฟท์

if let labelArray = (result?.data as? [String: Any])?["labelAnnotations"] as? [[String:Any]] {
  for labelObj in labelArray {
    let text = labelObj["description"]
    let entityId = labelObj["mid"]
    let confidence = labelObj["score"]
  }
}

วัตถุประสงค์-C

NSArray *labelArray = result.data[@"labelAnnotations"];
for (NSDictionary *labelObj in labelArray) {
  NSString *text = labelObj[@"description"];
  NSString *entityId = labelObj[@"mid"];
  NSNumber *confidence = labelObj[@"score"];
}