ตรวจสอบและปกป้องเว็บแอป

หลังจากเผยแพร่แอปแล้ว คุณควรตรวจสอบและรักษาความปลอดภัยให้แอปโดยทำดังนี้

ตรวจสอบประสิทธิภาพของเว็บไซต์ด้วยการตรวจสอบ App Hosting

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

  • คลิกเผยแพร่ เพื่อเผยแพร่แอปเวอร์ชันใหม่
  • แชร์ลิงก์ไปยังแอปหรือเปิดแอปโดยตรงในไปที่แอป
  • ดูข้อมูลสรุปประสิทธิภาพของแอปในช่วง 7 วันที่ผ่านมา ซึ่งรวมถึงจำนวนคำขอทั้งหมดและสถานะของการเปิดตัวล่าสุด คลิก ดูรายละเอียด เพื่อเข้าถึงข้อมูลเพิ่มเติมใน Firebase คอนโซล
  • ดูกราฟจำนวนคำขอที่แอปได้รับในช่วง 24 ชั่วโมงที่ผ่านมา ซึ่งแบ่งตามรหัสสถานะ HTTP
  • ดูสถานะการเปิดใช้งานบริการ Firebase เช่น Firebase Authentication และ Cloud Firestore

หากปิดแผงภาพรวมของแอป คุณสามารถเปิดแผงนี้อีกครั้งได้ทุกเมื่อโดยคลิกเผยแพร่

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบการเปิดตัว App Hosting ได้ที่ จัดการการเปิดตัวและการเผยแพร่

Genkit การตรวจสอบสำหรับฟีเจอร์ที่ทำให้ใช้งานได้

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

หากต้องการตั้งค่าการตรวจสอบใน Genkit ให้เพิ่มการวัดและส่งข้อมูลทางไกลลงในโฟลว์ AI ของ Genkit แล้วดูผลลัพธ์ในคอนโซล Firebase

ขั้นตอนที่ 1: เพิ่มการวัดและส่งข้อมูลทางไกลลงในโค้ดโฟลว์ Genkit ใน Firebase Studio

วิธีตั้งค่าการตรวจสอบในโค้ด

  1. หากยังไม่ได้อยู่ในมุมมอง Code ให้คลิก เปลี่ยนโค้ด ไอคอน เปลี่ยนเป็นโค้ด เพื่อเปิด

  2. ตรวจสอบ package.json เพื่อยืนยันเวอร์ชันของ Genkit ที่ติดตั้ง

  3. เปิดเทอร์มินัล (Ctrl-Shift-C หรือ Cmd-Shift-C ใน MacOS)

  4. คลิกภายในเทอร์มินัลและติดตั้งปลั๊กอิน Firebase โดยใช้เวอร์ชันที่ตรงกับไฟล์ package.json เช่น หาก Genkit แพ็กเกจใน package.json อยู่ที่เวอร์ชัน 1.0.4 คุณควรเรียกใช้คำสั่งต่อไปนี้เพื่อ ติดตั้งปลั๊กอิน

    npm i --save @genkit-ai/firebase@1.0.4

  5. จาก Explorer ให้ขยาย src > ai > flows ไฟล์ TypeScript อย่างน้อย 1 ไฟล์ ที่มีโฟลว์ Genkit จะปรากฏในโฟลเดอร์ flows

  6. คลิกโฟลว์รายการใดรายการหนึ่งเพื่อเปิด

  7. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของส่วนการนำเข้าของไฟล์เพื่อนำเข้าและเปิดใช้ FirebaseTelemetry

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

ขั้นตอนที่ 2: ตั้งค่าสิทธิ์

Firebase Studio ได้เปิดใช้ API ที่จำเป็น ให้คุณแล้วเมื่อตั้งค่าโปรเจ็กต์ Firebase แต่คุณต้องให้ สิทธิ์แก่บัญชีบริการ App Hosting ด้วย

วิธีตั้งค่าสิทธิ์

  1. ในคอนโซล Google Cloud ให้ไปที่หน้า IAM แล้ว เลือกโปรเจ็กต์ Firebase

  2. ให้บทบาทต่อไปนี้แก่บัญชีบริการ App Hosting

    • ผู้เขียนเมตริกการตรวจสอบ (roles/monitoring.metricWriter)
    • ตัวแทน Cloud Trace (roles/cloudtrace.agent)
    • ผู้เขียนบันทึก (roles/logging.logWriter)

  3. เผยแพร่แอปไปยัง App Hostingอีกครั้ง

  4. เมื่อเผยแพร่เสร็จแล้ว ให้โหลดแอปและเริ่มใช้งาน หลังจากผ่านไป 5 นาที แอปควรเริ่มบันทึกข้อมูลการวัดและส่งข้อมูลทางไกล

ขั้นตอนที่ 3: ตรวจสอบฟีเจอร์ Generative AI ในคอนโซล Firebase

เมื่อกำหนดค่าการวัดและส่งข้อมูลทางไกลแล้ว Genkit จะบันทึกจำนวนคำขอ ความสำเร็จ และเวลาในการตอบสนองสำหรับโฟลว์ทั้งหมด และสำหรับแต่ละโฟลว์ Genkit จะรวบรวมเมตริกความเสถียร แสดงกราฟโดยละเอียด และบันทึก ร่องรอยที่จับได้

วิธีตรวจสอบฟีเจอร์ AI ที่ใช้งานด้วย Genkit

  1. หลังจากผ่านไป 5 นาที ให้ไปที่คอนโซล Firebase ไปที่ บริการ AI > Genkit เพื่อ ตรวจสอบพรอมต์และคำตอบจาก Genkit

  2. คุณสามารถตรวจสอบเมตริกความเสถียร ต่อไปนี้ที่ Genkit รวบรวมไว้

    • คำขอทั้งหมด: จำนวนคำขอทั้งหมดที่โฟลว์ได้รับ
    • อัตราความสำเร็จ: เปอร์เซ็นต์ของคำขอที่ประมวลผลสำเร็จ
    • เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95: เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95 ของโฟลว์ ซึ่งเป็นเวลาที่ใช้ในการประมวลผลคำขอ 95%

    • การใช้งานโทเค็น:

      • โทเค็นอินพุต: จำนวนโทเค็นที่ส่งไปยังโมเดลในพรอมต์
      • โทเค็นเอาต์พุต: จำนวนโทเค็นที่โมเดลสร้างขึ้นในคำตอบ

    • การใช้งานรูปภาพ:

      • รูปภาพอินพุต: จำนวนรูปภาพที่ส่งไปยังโมเดลในพรอมต์
      • รูปภาพเอาต์พุต: จำนวนรูปภาพที่โมเดลสร้างขึ้นในคำตอบ

  3. คุณสามารถขยายเมตริกความเสถียรเพื่อดูกราฟโดยละเอียดต่อไปนี้

    • ปริมาณคำขอเมื่อเวลาผ่านไป
    • อัตราความสำเร็จเมื่อเวลาผ่านไป
    • โทเค็นอินพุตและเอาต์พุตเมื่อเวลาผ่านไป
    • เวลาในการตอบสนอง (เปอร์เซ็นไทล์ที่ 95 และ 50) เมื่อเวลาผ่านไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit ได้ใน เอกสารประกอบ

ปกป้องแอปด้วย Firebase App Check

หากคุณผสานรวมบริการ Firebase หรือ Google Cloud เข้ากับแอป Firebase App Check จะช่วยปกป้องแบ็กเอนด์ของแอปจากการละเมิดโดยป้องกันไม่ให้ ไคลเอ็นต์ที่ไม่ได้รับอนุญาตเข้าถึงทรัพยากร Firebase โดยจะทำงานร่วมกับทั้งบริการของ Google (รวมถึงบริการ Firebase และ Google Cloud) และแบ็กเอนด์ที่กำหนดเองของคุณเองเพื่อรักษาทรัพยากรให้ปลอดภัย

เราขอแนะนำให้เพิ่ม App Check ลงในแอปที่คุณโพสต์ต่อสาธารณะเพื่อปกป้องทรัพยากรแบ็กเอนด์ของคุณ จากการละเมิด

ส่วนนี้จะแนะนำคุณตลอดการตั้งค่า App Check ภายใน Firebase Studio โดยใช้ reCAPTCHA Enterprise สำหรับเว็บแอป ที่สร้างโดย App Prototyping agent แต่คุณสามารถตั้งค่า App Check ภายใน แอปใดก็ได้ที่ใช้บริการ Firebase และใช้ผู้ให้บริการที่กำหนดเองได้ ดูข้อมูลเพิ่มเติมได้ที่ Firebase App Check

reCAPTCHA Enterprise ให้การประเมินสูงสุด 10,000 รายการโดยไม่มีค่าใช้จ่าย

ขั้นตอนที่ 1: ตั้งค่า reCAPTCHA Enterprise สำหรับแอป

  1. เปิดส่วน reCAPTCHA Enterprise ของคอนโซล Google Cloud

  2. เลือกชื่อโปรเจ็กต์ Firebase จากตัวเลือกโปรเจ็กต์ของคอนโซล Google Cloud

  3. หากระบบแจ้งให้เปิดใช้ reCAPTCHA Enterprise API ให้ดำเนินการ

  4. คลิกเริ่มต้นใช้งาน แล้วเพิ่มชื่อที่แสดง สำหรับคีย์เว็บไซต์ reCAPTCHA

  5. ยอมรับคีย์ประเภทแอปพลิเคชัน เว็บ เริ่มต้น

  6. คลิกเพิ่มโดเมน แล้วเพิ่มโดเมน คุณควรเพิ่มโดเมน App Hosting (เช่น studio--PROJECT_ID.REGION.hosted.app) และโดเมนที่กำหนดเองที่คุณใช้หรือวางแผนที่จะใช้กับแอป

  7. คลิกขั้นตอนถัดไป

  8. ปล่อยให้ตัวเลือกคุณจะใช้การยืนยันตัวตนไหม ไม่ได้เลือก

  9. คลิกสร้างคีย์

  10. คัดลอกและบันทึกรหัสคีย์ แล้วไปที่กำหนดค่า App Check

ขั้นตอนที่ 2: กำหนดค่า App Check

  1. เปิดคอนโซล Firebase แล้วคลิกสร้าง > App Check จากเมนูการนำทาง

  2. คลิกเริ่มต้นใช้งาน แล้วคลิกลงทะเบียน ข้างแอป

  3. คลิกเพื่อขยาย reCAPTCHA แล้ววางรหัสคีย์ที่คุณสร้างขึ้นสำหรับ reCAPTCHA Enterprise

  4. คลิกบันทึก

ขั้นตอนที่ 3: เพิ่ม App Check ลงในโค้ด

  1. กลับไปที่ Firebase Studio แล้วเพิ่ม คีย์เว็บไซต์ที่คุณสร้างขึ้นลงในไฟล์ .env ในมุมมอง Code

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. หากยังไม่ได้บันทึกการกำหนดค่า Firebase ลงใน .env ให้รับการกำหนดค่าโดยทำดังนี้

    • จากคอนโซล ให้เปิด การตั้งค่าโปรเจ็กต์ แล้วค้นหาการกำหนดค่าในส่วนที่ ตรงกับแอปFirebase

    • จากเทอร์มินัลในมุมมอง Code ให้ทำดังนี้

      1. เข้าสู่ระบบ Firebase: firebase auth login
      2. เลือกโปรเจ็กต์: firebase use FIREBASE_PROJECT_ID
      3. รับการกำหนดค่า Firebase: firebase apps:sdkconfig

  3. เพิ่มการกำหนดค่าลงในไฟล์ .env เพื่อให้มีลักษณะดังนี้

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. เพิ่ม App Check ลงในโค้ดแอป คุณสามารถขอให้ Gemini เพิ่ม App Check ด้วย reCAPTCHA Enterprise ลงในแอป (อย่าลืม ระบุ "reCAPTCHA Enterprise" และตรวจสอบอีกครั้ง) หรือ ทำตามขั้นตอนใน เริ่มต้น App Check

  5. เผยแพร่เว็บไซต์ไปยัง App Hosting อีกครั้ง ลองทดสอบฟีเจอร์ฐานข้อมูลและการตรวจสอบสิทธิ์เพื่อสร้างข้อมูลบางอย่าง

  6. ตรวจสอบว่า App Check ได้รับคำขอใน Firebase คอนโซลโดยเปิด สร้าง > App Check

  7. คลิกเพื่อตรวจสอบ Cloud Firestore หลังจากยืนยันว่าได้รับคำขอแล้ว ให้คลิก บังคับใช้ เพื่อบังคับใช้ App Check

  8. ทำซ้ำการยืนยันและการบังคับใช้สำหรับ Firebase Authentication

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

ขั้นตอนถัดไป