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

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

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

ฟีเจอร์

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

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

โปรดทราบว่าแม้ว่าคุณจะเลือกและอัปโหลดไฟล์ด้วย 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 จากเว็บแอป รวมถึงการติดตั้งใช้งานการเรียกกลับ หากต้องการดูตัวอย่างโค้ดแบบเต็ม โปรดดูใช้ฟีเจอร์ 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

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

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

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

แสดง Google Picker

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

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

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

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

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

ติดตั้งใช้งานการเรียกกลับของ Google Picker

คุณใช้การเรียกกลับของ 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;
    }

โดยการเรียกกลับจะได้รับออบเจ็กต์ข้อมูลที่เข้ารหัส JSON ออบเจ็กต์นี้มีaction ที่ผู้ใช้ดำเนินการ ด้วย Google Picker (google.picker.Response.ACTION) หากผู้ใช้เลือกรายการ ระบบจะป้อนข้อมูลอาร์เรย์ docs ด้วย ในตัวอย่างนี้ 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 นอกจากนี้ คุณยังใช้ออบเจ็กต์ DocsView สำหรับตัวเลือกการกรองเพิ่มเติมได้ด้วย

ปรับแต่งลักษณะที่ปรากฏของเครื่องมือเลือกของ Google

คุณใช้ออบเจ็กต์ 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();