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

กล่องโต้ตอบเครื่องมือเลือกของ Google

เอกสารนี้อธิบายวิธีผสานรวม Google Picker เข้ากับเว็บแอปโดยใช้ Google Picker API

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

ฟีเจอร์

Google Picker มีฟีเจอร์หลายอย่าง ดังนี้

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

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

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

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

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

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

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

เปิดใช้ API

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

สร้างคีย์ API

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

วิธีสร้างคีย์ API

  1. ในคอนโซล Google Cloud ให้ไปที่เมนู > API และบริการ > ข้อมูลเข้าสู่ระบบ

    ไปที่ข้อมูลเข้าสู่ระบบ

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

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

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

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

  2. คลิกสร้างไคลเอ็นต์
  3. คลิกประเภทแอปพลิเคชัน > เว็บแอปพลิเคชัน
  4. พิมพ์ชื่อของข้อมูลเข้าสู่ระบบในช่องชื่อ ชื่อนี้จะแสดงในคอนโซล Google API เท่านั้น
  5. เพิ่ม URI ที่ได้รับอนุญาตซึ่งเกี่ยวข้องกับแอปของคุณ โดยทำดังนี้
    • แอปฝั่งไคลเอ็นต์ (JavaScript)–ในส่วนต้นทาง JavaScript ที่ได้รับอนุญาต ให้คลิกเพิ่ม URI จากนั้นป้อน URI ที่จะใช้สำหรับคำขอของเบราว์เซอร์ ซึ่งจะระบุโดเมนที่แอปพลิเคชันของคุณสามารถส่งคำขอ API ไปยังเซิร์ฟเวอร์ OAuth 2.0 ได้
    • แอปฝั่งเซิร์ฟเวอร์ (Java, Python และอื่นๆ)–ในส่วนURI การเปลี่ยนเส้นทางที่ได้รับอนุญาต ให้คลิกเพิ่ม URI จากนั้นป้อน URI ปลายทางที่เซิร์ฟเวอร์ OAuth 2.0 สามารถส่งการตอบกลับไปได้
  6. คลิกสร้าง

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

    จดรหัสไคลเอ็นต์ไว้ ระบบจะไม่ใช้รหัสลับไคลเอ็นต์สำหรับเว็บแอปพลิเคชัน

สำคัญ: แอปของคุณต้องส่งโทเค็นเพื่อการเข้าถึง OAuth 2.0 พร้อมมุมมองที่ เข้าถึงข้อมูลผู้ใช้ส่วนตัวเมื่อสร้างออบเจ็กต์ Picker หากต้องการขอโทเค็นเพื่อการเข้าถึง โปรดดูหัวข้อการใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs

จัดการ Google Picker

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

โหลดไลบรารี Google Picker

หากต้องการโหลดไลบรารี Google Picker ให้เรียกใช้ gapi.load โดยใช้ชื่อไลบรารีและฟังก์ชัน Callback ที่จะเรียกใช้หลังจากโหลดสำเร็จ ดังนี้

    <script>
      let tokenClient;
      let accessToken = null;
      let pickerInited = false;
      let gisInited = false;

      // Use the API Loader script to load google.picker.
      function onApiLoad() {
        gapi.load('picker', onPickerApiLoad);
      }

      function onPickerApiLoad() {
        pickerInited = true;
      }

      function gisLoaded() {
        // Replace with your client ID and required scopes.
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: 'CLIENT_ID',
          scope: 'SCOPES',
          callback: '', // defined later
        });
        gisInited = true;
    }
    </script>
    <!-- Load the Google API Loader script. -->
    <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

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

  • CLIENT_ID: รหัสไคลเอ็นต์ของเว็บแอป
  • SCOPES: ขอบเขต OAuth 2.0 อย่างน้อย 1 รายการที่คุณต้องขอเพื่อเข้าถึง Google APIs ทั้งนี้ขึ้นอยู่กับระดับการเข้าถึงที่คุณต้องการ ดูข้อมูลเพิ่มเติมได้ที่หัวข้อ ขอบเขต OAuth 2.0 สำหรับ Google APIs

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

ฟังก์ชัน onApiLoad จะโหลดไลบรารี Google Picker ระบบจะเรียกใช้ฟังก์ชัน Callback onPickerApiLoad หลังจากโหลดไลบรารี Google Picker สำเร็จ

หมายเหตุ: หากใช้ TypeScript คุณสามารถติดตั้ง @types/google.picker เพื่อ ใช้ window.google.picker ได้ หากต้องการรายงานปัญหาเกี่ยวกับประเภทเหล่านี้ ให้เปิดตั๋ว สนับสนุน

แสดง Google Picker

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

    // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // Replace with your API key and App ID.
        const picker = new google.picker.PickerBuilder()
            .addView(google.picker.ViewId.DOCS)
            .setOAuthToken(accessToken)
            .setDeveloperKey('API_KEY')
            .setCallback(pickerCallback)
            .setAppId('APP_ID')
            .build();
        picker.setVisible(true);
      }

      // Request an access token.
      tokenClient.callback = async (response) => {
        if (response.error !== undefined) {
          throw (response);
        }
        accessToken = response.access_token;
        showPicker();
      };

      if (accessToken === null) {
        // Prompt the user to select a Google Account and ask for consent to share their data
        // when establishing a new session.
        tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
        // Skip display of account chooser and consent dialog for an existing session.
        tokenClient.requestAccessToken({prompt: ''});
      }
    }

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

  • API_KEY: คีย์ API
  • APP_ID: หมายเลขโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของคุณ

หากต้องการสร้างอินสแตนซ์ Google Picker คุณต้องสร้างออบเจ็กต์ Picker โดยใช้ PickerBuilder PickerBuilder จะใช้ View, โทเค็น OAuth 2.0, คีย์นักพัฒนาแอป และa ฟังก์ชัน Callback ที่จะเรียกใช้เมื่อสำเร็จ (pickerCallback)

ออบเจ็กต์ Picker จะแสดงผล View ทีละรายการ ระบุอย่างน้อย 1 มุมมอง โดยใช้ ViewId (google.picker.ViewId.*) หรือสร้างอินสแตนซ์ของ DocsView เพื่อควบคุมวิธีแสดงผลมุมมองเพิ่มเติม

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

ดูรายการมุมมองที่ใช้ได้ใน ViewId ใน ข้อมูลอ้างอิงของ Google Picker หากต้องการรับโทเค็นสำหรับมุมมองเหล่านี้ ให้ใช้ขอบเขต https://www.googleapis.com/auth/drive.file

ใช้ Callback ของ Google Picker

คุณสามารถใช้ Callback ของ Google Picker เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้ใน Google Picker เช่น การเลือกไฟล์หรือการกด "ยกเลิก" อินเทอร์เฟซ ResponseObject จะสื่อสาร ข้อมูลเกี่ยวกับการเลือกของผู้ใช้

    // A callback implementation.
    function pickerCallback(data) {
      let url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        const doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      const message = `You picked: ${url}`;
      document.getElementById('result').textContent = message;
    }

Callback จะรับออบเจ็กต์ข้อมูลที่เข้ารหัส JSON ออบเจ็กต์นี้มี Action ที่ผู้ใช้ดำเนินการกับ Google Picker (google.picker.Response.ACTION) หากผู้ใช้เลือก รายการ ระบบจะป้อนข้อมูลลงในอาร์เรย์ google.picker.Response.DOCUMENTS ด้วย ในตัวอย่างนี้ google.picker.Document.URL จะแสดงในหน้าหลัก ดูรายละเอียดเกี่ยวกับฟิลด์ข้อมูลได้ในอินเทอร์เฟซ ResponseObject

กรองไฟล์บางประเภท

ใช้ ViewGroup เพื่อกรอง รายการที่เฉพาะเจาะจง ตัวอย่างโค้ดต่อไปนี้แสดงวิธีที่มุมมองย่อย "ไดรฟ์" แสดงเฉพาะเอกสารและงานนำเสนอ

    const picker = new google.picker.PickerBuilder()
        .addViewGroup(
          new google.picker.ViewGroup(google.picker.ViewId.DOCS)
              .addView(google.picker.ViewId.DOCUMENTS)
              .addView(google.picker.ViewId.PRESENTATIONS))
        .setOAuthToken(oauthToken)
        .setDeveloperKey(developerKey)
        .setAppId(cloudProjectNumber)
        .setCallback(pickerCallback)
        .build();

ดูรายการประเภทมุมมองที่ใช้ได้ใน ViewId

ปรับลักษณะที่ปรากฏของ Google Picker

คุณสามารถใช้ออบเจ็กต์ Feature เพื่อเปิด หรือปิดฟีเจอร์สำหรับมุมมองต่างๆ ได้ หากต้องการปรับลักษณะที่ปรากฏของหน้าต่าง Google Picker ให้ใช้เมธอด PickerBuilder.enableFeature หรือ PickerBuilder.disableFeature ตัวอย่างเช่น หากมีมุมมองเดียว คุณอาจต้องการซ่อน บานหน้าต่างการนำทาง (Feature.NAV_HIDDEN) เพื่อ ให้ผู้ใช้มีพื้นที่มากขึ้นในการดูรายการ

ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างเครื่องมือเลือกการค้นหาของชีตโดยใช้ฟีเจอร์นี้

    const picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.SPREADSHEETS)
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();