ผสานรวม Google Picker เข้ากับแอปบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

เอกสารนี้อธิบายวิธีผสานรวม Google Picker เข้ากับแอปเดสก์ท็อป และแอปบนอุปกรณ์เคลื่อนที่โดยใช้ Google Picker API

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

ฟีเจอร์

เครื่องมือเลือกของ Google มีฟีเจอร์หลายอย่าง ได้แก่

  • มีรูปลักษณ์และความรู้สึกคล้ายกับ UI ของ Google ไดรฟ์
  • มุมมองหลายรายการที่แสดงตัวอย่างและภาพขนาดย่อของไฟล์ในไดรฟ์
  • มุมมองที่กรองไว้ล่วงหน้าซึ่งแสดงเฉพาะประเภทไฟล์ที่เฉพาะเจาะจง (เช่น PDF หรือรูปภาพ) หรือโฟลเดอร์บางโฟลเดอร์
  • การเปลี่ยนเส้นทางไปยัง Google Picker ในแท็บใหม่ในเบราว์เซอร์เริ่มต้นของผู้ใช้ หากต้องการให้ Google Picker API เปิดในหน้าไคลเอ็นต์ ให้ใช้ Google Picker API สำหรับเว็บแอป แทน

โปรดทราบว่าแม้คุณจะเลือกและอัปโหลดไฟล์ด้วย Google Picker ได้ แต่ก็ไม่อนุญาตให้ผู้ใช้จัดระเบียบ ย้าย หรือคัดลอกไฟล์จากโฟลเดอร์หนึ่งไปยัง อีกโฟลเดอร์หนึ่ง หากต้องการจัดการไฟล์ คุณต้องใช้ Google Drive API หรือ UI ของไดรฟ์

ข้อกำหนดเบื้องต้น

แอปที่ใช้ Google Picker ต้องปฏิบัติตามข้อกำหนดในการให้บริการที่มีอยู่ทั้งหมด ที่สำคัญที่สุดคือคุณต้องระบุตัวตนในคำขออย่างถูกต้อง

นอกจากนี้ คุณต้องมีโปรเจ็กต์ Google Cloud ด้วย

ตั้งค่าสภาพแวดล้อม

หากต้องการเริ่มใช้ Google Picker API คุณต้องตั้งค่าสภาพแวดล้อม

เปิดใช้ API

ก่อนใช้ Google API คุณต้องเปิดใช้ API ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google คุณเปิด API อย่างน้อย 1 รายการในโปรเจ็กต์ Google Cloud เดียวได้

ตั้งค่าการตรวจสอบสิทธิ์และการให้สิทธิ์

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

ให้สิทธิ์ข้อมูลเข้าสู่ระบบสำหรับแอปบนเดสก์ท็อป

หากต้องการสร้างรหัสไคลเอ็นต์ OAuth 2.0 ให้ทำตามขั้นตอนต่อไปนี้

  1. ใน คอนโซล Google API ให้ไปที่เมนู > แพลตฟอร์มการตรวจสอบสิทธิ์ของ Google > ไคลเอ็นต์

    ไปที่ไคลเอ็นต์

  2. คลิกสร้างไคลเอ็นต์
  3. คลิกประเภทแอปพลิเคชัน > แอปเดสก์ท็อป
  4. พิมพ์ชื่อของข้อมูลเข้าสู่ระบบในช่องชื่อ ชื่อนี้จะแสดงในคอนโซล Google API เท่านั้น
  5. คลิกสร้าง

    ข้อมูลเข้าสู่ระบบที่สร้างขึ้นใหม่จะปรากฏในส่วน "รหัสไคลเอ็นต์ OAuth 2.0"

หากต้องการให้แอปได้รับสิทธิ์เข้าถึงไฟล์ที่เคยให้ไว้ คุณต้องทำตาม ขั้นตอนต่อไปนี้

  1. คุณต้องขอโทเค็น OAuth 2.0 ที่มีขอบเขต drive.file, drive หรือ drive.readonly โดยใช้คำสั่งเหล่านี้: การใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs ดูข้อมูลเพิ่มเติมเกี่ยวกับขอบเขตได้ที่เลือกขอบเขต Google Drive API

  2. ส่งโทเค็น OAuth 2.0 ไปยัง Drive API เพื่ออ่านและแก้ไขไฟล์ ที่ผู้ใช้เคยให้สิทธิ์เข้าถึงไว้

ให้สิทธิ์เข้าถึงข้อมูลเข้าสู่ระบบสำหรับแอปบนอุปกรณ์เคลื่อนที่

หากต้องการสร้างรหัสไคลเอ็นต์ OAuth 2.0 ให้ทำตามขั้นตอนในส่วนให้สิทธิ์ข้อมูลเข้าสู่ระบบ สำหรับแอปบนอุปกรณ์เคลื่อนที่

ให้สิทธิ์ข้อมูลเข้าสู่ระบบสำหรับเว็บแอป

หากต้องการสร้างรหัสไคลเอ็นต์ OAuth 2.0 ให้ทำตามขั้นตอนในส่วนให้สิทธิ์ข้อมูลเข้าสู่ระบบ สำหรับเว็บแอป

แสดง Google Picker

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

  • หน้าจอการตรวจสอบสิทธิ์ UI ของ Google Picker

    ตรวจสอบสิทธิ์แอปโดยเรียกใช้ Google Picker

  • กล่องโต้ตอบการลงชื่อเข้าใช้และสิทธิ์ของ Google

    ลงชื่อเข้าใช้ด้วย Google และให้สิทธิ์ที่ขอ

  • อินเทอร์เฟซการเลือกไฟล์ Google ไดรฟ์ภายในเครื่องมือเลือก

    เรียกดูไฟล์ใน Google ไดรฟ์ใน Google Picker แล้วเลือกรายการที่ต้องการ

  • หน้าจอยืนยันการแทรกไฟล์ที่แสดงปุ่มแทรก

    ยืนยันการเลือกแล้วแตะแทรกเพื่อเพิ่มไฟล์ลงในแอป

ผสานรวม Google Picker เข้ากับแอป

หากต้องการอนุญาตให้ผู้ใช้ให้สิทธิ์เข้าถึงไฟล์เพิ่มเติมหรือเลือกไฟล์เพื่อใช้ในโฟลว์ของแอป ให้ทำตามขั้นตอนต่อไปนี้

  1. ขอสิทธิ์เข้าถึงขอบเขต drive.file เพื่อเปิดหน้าการเข้าถึง OAuth 2.0 ในแท็บเบราว์เซอร์ใหม่โดยใช้คำสั่งต่อไปนี้: การใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs ดูข้อมูลเพิ่มเติมเกี่ยวกับขอบเขตได้ที่เลือกขอบเขต Google Drive API

    โปรดทราบว่าแอปเหล่านี้ได้รับอนุญาตให้ใช้ขอบเขต drive.file เท่านั้น และไม่สามารถใช้ร่วมกับขอบเขตอื่นๆ ได้

  2. URL สำหรับแท็บเบราว์เซอร์ใหม่ยอมรับพารามิเตอร์สตริงการค้นหา OAuth มาตรฐานทั้งหมด

    คุณต้องต่อท้ายพารามิเตอร์ URL prompt และ trigger_onepick ไปยัง คำขอ URL การให้สิทธิ์ OAuth 2.0 นอกจากนี้ คุณยังปรับแต่ง เครื่องมือเลือกของ Google ด้วยพารามิเตอร์อื่นๆ ได้ด้วย (ไม่บังคับ)

    พารามิเตอร์ คำอธิบาย สถานะ
    prompt=consent ขอสิทธิ์เข้าถึงไฟล์ ต้องระบุ
    trigger_onepick=true เปิดใช้เครื่องมือเลือกของ Google ต้องระบุ
    allow_multiple=true หากเป็นจริง ให้ผู้ใช้เลือกหลายไฟล์ได้ ไม่บังคับ
    mimetypes=MIMETYPES รายการประเภท MIME ที่คั่นด้วยคอมมาเพื่อกรองผลการค้นหา หากไม่ได้ตั้งค่า ระบบจะแสดงไฟล์สำหรับ MIME ทุกประเภทในมุมมอง ไม่บังคับ
    file_ids=FILE_IDS รายการรหัสไฟล์ที่คั่นด้วยคอมมาเพื่อกรองผลการค้นหา หากไม่ได้ตั้งค่าไว้ ระบบจะแสดงไฟล์ทั้งหมดในมุมมอง ไม่บังคับ
    allow_folder_selection=true หากเป็นจริง ให้อนุญาตให้ผู้ใช้เลือกโฟลเดอร์ด้วย ไม่บังคับ

    ตัวอย่างต่อไปนี้แสดงคำขอ URL การให้สิทธิ์ OAuth 2.0

    https://accounts.google.com/o/oauth2/v2/auth? \
    client_id=CLIENT_ID \
    &scope=https://www.googleapis.com/auth/drive.file \
    &redirect_uri=REDIRECT_URI \
    &response_type=code \
    &access_type=offline \
    &prompt=consent \
    &trigger_onepick=true
    

    แทนที่ค่าต่อไปนี้

    • CLIENT_ID: รหัสไคลเอ็นต์ของแอป

    • REDIRECT_URI: ตำแหน่งที่เซิร์ฟเวอร์การให้สิทธิ์ เปลี่ยนเส้นทางเบราว์เซอร์ของผู้ใช้หลังจากตรวจสอบสิทธิ์สำเร็จ เช่น https://www.cymbalgroup.com/oauth2callback

      redirect_uri ที่ระบุต้องเป็น HTTPS URL สาธารณะ หากต้องการใช้ โปรโตคอลที่กำหนดเองหรือ URL ของ localhost สำหรับ redirect_uri คุณต้องใช้ HTTPS URL สาธารณะที่เปลี่ยนเส้นทางไปยังโปรโตคอลที่กำหนดเองหรือ URL ของ localhost

  3. เมื่อผู้ใช้ให้สิทธิ์เข้าถึงและเลือกไฟล์ที่เกี่ยวข้องแล้ว OAuth จะเปลี่ยนเส้นทางไปยัง redirect_uri ที่ระบุไว้ในคำขอพร้อมกับพารามิเตอร์ URL ต่อไปนี้

    • picked_file_ids: หากผู้ใช้ให้สิทธิ์เข้าถึงและเลือกไฟล์ จะเป็น รายการรหัสไฟล์ที่เลือกซึ่งคั่นด้วยคอมมา

    • code: โทเค็นเพื่อการเข้าถึงหรือรหัสเพื่อการเข้าถึงตามresponse_type พารามิเตอร์ที่ตั้งค่าไว้ในคำขอ พารามิเตอร์นี้มีรหัสการให้สิทธิ์ใหม่

    • scope: ขอบเขตที่รวมอยู่ในคำขอ

    • error: หากผู้ใช้ยกเลิกคำขอภายในโฟลว์ความยินยอม ระบบจะแสดงข้อผิดพลาด

    ตัวอย่างต่อไปนี้แสดงการตอบกลับ URL การให้สิทธิ์ OAuth 2.0

    https://REDIRECT_URI?picked_file_ids=PICKED_FILE_IDS&code=CODE&scope=SCOPES
    
  4. แอปต้องแลกรหัสการให้สิทธิ์จากขั้นตอนที่ 3 เป็นโทเค็น OAuth 2.0 ใหม่ ดูข้อมูลเพิ่มเติมได้ที่เปลี่ยนรหัสการให้สิทธิ์สำหรับโทเค็นรีเฟรช และโทเค็นเพื่อการเข้าถึง

  5. จากนั้นแอปจะใช้รหัสไฟล์จากพารามิเตอร์ URL ในขั้นตอนที่ 3 และโทเค็น OAuth 2.0 ที่ได้รับในขั้นตอนที่ 4 เพื่อเรียกใช้ Drive API ได้ ดูข้อมูลเพิ่มเติมได้ที่ภาพรวมของ Google Drive API

ใช้เครื่องมือเลือกของ Google กับแอป Android

นอกจากนี้ คุณยังใช้เครื่องมือเลือกของ Google ในแอปบนอุปกรณ์เคลื่อนที่ Android ได้ด้วย

ให้สิทธิ์เข้าถึงข้อมูลเข้าสู่ระบบสำหรับแอปบนอุปกรณ์เคลื่อนที่

หากต้องการใช้ Google Picker ในแอป Android คุณต้องให้สิทธิ์ ผู้ใช้โดยใช้ OAuth 2.0 เช่นเดียวกับแอป เดสก์ท็อป โปรดดูรายละเอียดเกี่ยวกับการตรวจสอบสิทธิ์ Android ที่หัวข้อให้สิทธิ์เข้าถึงข้อมูลผู้ใช้ Google

หากต้องการแสดง Google Picker ระหว่างการให้สิทธิ์ ให้สร้าง AuthorizationRequest และใช้พารามิเตอร์ทรัพยากร PICKER_OAUTH_TRIGGER ในออบเจ็กต์ AuthorizationRequest.ResourceParameter

เมื่อสร้าง AuthorizationRequest ให้ทำดังนี้

  • ใช้ขอบเขต drive.file

  • เรียกใช้ setOptOutIncludingGrantedScopes ไปยัง true เพื่อให้แน่ใจว่าโทเค็นที่ส่งคืนมีไว้สำหรับขอบเขต drive.file เท่านั้น และไม่ใช่สำหรับขอบเขตที่ให้ไว้ก่อนหน้านี้

  • ตั้งค่าฟิลด์ AuthorizationRequest.Prompt เป็น CONSENT เพื่อแจ้งให้ผู้ใช้ขอความยินยอมแม้ว่าจะได้รับความยินยอม ก่อนหน้านี้แล้วก็ตาม

  • คุณอาจใช้ตัวดำเนินการบิตแมป "OR" (|) เพื่อตั้งค่าฟิลด์ AuthorizationRequest.Prompt เป็น SELECT_ACCOUNT เพื่อให้ผู้ใช้ เลือกบัญชีก่อนที่จะแสดงข้อความขอความยินยอมได้

เรียกใช้เครื่องมือเลือกของ Google

คุณปรับแต่ง Google Picker ได้ด้วยพารามิเตอร์ที่ไม่บังคับหลายรายการเช่นเดียวกับแอปบนเดสก์ท็อป

  • PICKER_ALLOW_MULTIPLE: อนุญาตให้ผู้ใช้เลือกหลายไฟล์
  • PICKER_MIMETYPES: รับรายการประเภท MIME ที่คั่นด้วยคอมมาเพื่อกรองผลการค้นหา หากไม่ได้ตั้งค่า ระบบจะแสดงไฟล์สำหรับ MIME ทุกประเภทในมุมมอง
  • PICKER_FILE_IDS: รับรายการรหัสไฟล์ที่คั่นด้วยคอมมาเพื่อกรอง ผลการค้นหา หากไม่ได้ตั้งค่าไว้ ระบบจะแสดงไฟล์ทั้งหมดในมุมมอง
  • PICKER_ALLOW_FOLDER_SELECTION: อนุญาตให้ผู้ใช้เลือกโฟลเดอร์ได้ด้วย

ดูข้อมูลเพิ่มเติมเกี่ยวกับพารามิเตอร์ที่ไม่บังคับในแอปบนเดสก์ท็อปได้ที่แสดง ตัวเลือกไฟล์ของ Google

เมื่อผู้ใช้ให้สิทธิ์เข้าถึงและเลือกไฟล์ที่เกี่ยวข้องแล้ว ระบบจะแสดงออบเจ็กต์ของทรัพยากร getTokenResponseParams ของ AuthorizationResult หากผู้ใช้ให้สิทธิ์เข้าถึง ออบเจ็กต์นี้จะมีค่า picked_file_ids ซึ่งเป็นรายการที่คั่นด้วยคอมมาของรหัสไฟล์ที่เลือก