ภาพรวมของเว็บแอป

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

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

Google Picker ทำหน้าที่เป็นกล่องโต้ตอบ "เปิดไฟล์" สำหรับข้อมูลที่จัดเก็บไว้ใน ไดรฟ์ และมีฟีเจอร์หลายอย่างดังนี้

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

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

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

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

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

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

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

เปิดใช้ API

ก่อนใช้ Google API คุณต้องเปิดใช้ API ในโปรเจ็กต์ Google Cloud คุณเปิด 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 หากแอปทำงานบนหลายแพลตฟอร์ม คุณต้องสร้างรหัสไคลเอ็นต์แยกต่างหากสำหรับแต่ละแพลตฟอร์ม
  • ในคอนโซล Google Cloud ให้ไปที่เมนู > > ไคลเอ็นต์

    ไปที่ลูกค้า

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

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

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

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

    จัดการ Google Picker

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

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

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

        <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

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

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

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

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

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

    ติดตั้งการเรียกกลับของเครื่องมือเลือก Google

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

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