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

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

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

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

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

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

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

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

  1. เปิดโปรเจ็กต์แอปใน Xcode แล้วไปที่ไฟล์ > เพิ่มแพ็กเกจ
  2. เมื่อได้รับข้อความแจ้ง ให้เพิ่มที่เก็บ SDK สำหรับแพลตฟอร์ม Firebase ของ Apple ดังนี้
    3.   https://github.com/firebase/firebase-ios-sdk.git
  3. เลือกไลบรารี Firebase ML
  4. เพิ่มแฟล็ก -ObjC ลงในส่วนแฟล็ก Linker อื่นๆ ของการตั้งค่าบิลด์ของเป้าหมาย
  5. เมื่อเสร็จแล้ว 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. กำหนดค่าคีย์ Firebase API ที่มีอยู่เพื่อไม่ให้อนุญาตการเข้าถึงระบบคลาวด์ API ของ Vision
    1. เปิดหน้าข้อมูลเข้าสู่ระบบของ Cloud Console
    2. สำหรับคีย์ API แต่ละรายการในรายการ ให้เปิดมุมมองการแก้ไข และใน ส่วนข้อจำกัด ให้เพิ่ม API ที่มีอยู่ทั้งหมด ยกเว้น Cloud Vision API ลงในรายการ

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

ถัดไป ให้ติดตั้งใช้งาน Cloud Function เพื่อเชื่อมโยงแอปและระบบคลาวด์ 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 หากยังไม่ได้เพิ่ม ตรวจสอบสิทธิ์แอปของคุณ

เพิ่มทรัพยากร 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. สร้างคำขอที่มีการตั้งค่าประเภทเป็น LABEL_DETECTION ดังนี้

    Swift

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

    Objective-C

    NSDictionary *requestData = @{
  @"image": @{@"content": base64encodedImage},
  @"features": @{@"maxResults": @5, @"type": @"LABEL_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 จะแสดงในผลลัพธ์ของงาน แต่ละออบเจ็กต์ใน labelAnnotations อาร์เรย์แสดงถึงสิ่งที่มีป้ายกำกับในรูปภาพ คุณมีคุณสมบัติสำหรับป้ายกำกับแต่ละรายการ จะได้รับคำอธิบายข้อความของป้ายกำกับ รหัสเอนทิตีของกราฟความรู้ (หากมี) และคะแนนความเชื่อมั่นของการแข่งขัน เช่น

Swift

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

Objective-C

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