ผสานรวม 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 Cloud ให้ไปที่เมนู > แพลตฟอร์มการตรวจสอบสิทธิ์ของ Google > ไคลเอ็นต์

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

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

จัดการ 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 API ทั้งนี้ขึ้นอยู่กับระดับการเข้าถึงที่คุณต้องการ ดูข้อมูลเพิ่มเติมได้ที่หัวข้อ ขอบเขต OAuth 2.0 สำหรับ Google API

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

ฟังก์ชัน onApiLoad จะโหลดไลบรารี Google Picker ระบบจะเรียกใช้ฟังก์ชัน Callback onPickerApiLoad หลังจากที่ไลบรารี 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 เพื่อตั้งค่า รหัสแอปไดรฟ์โดยใช้หมายเลขโปรเจ็กต์ที่อยู่ในระบบคลาวด์ เพื่อให้ แอปเข้าถึงไฟล์ของผู้ใช้ได้ จากนั้นฟังก์ชันนี้จะสร้างอินสแตนซ์ของ 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 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();

ฝัง Google Picker ลงใน iframe

คุณสามารถฝัง Google Picker ลงใน iframe ของ HTML ได้โดยตรงแทนที่จะใช้กล่องโต้ตอบเริ่มต้น โดยใช้เมธอด PickerBuilder.toUri เมธอด PickerBuilder.toUri จะสร้าง URI สำหรับออบเจ็กต์ PickerBuilder

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีฝัง Google Picker ลงใน iframe

    // Create a Google Picker builder.
    const builder = new google.picker.PickerBuilder()
        .setDeveloperKey('API_KEY')
        .setAppId('APP_ID')
        .setOAuthToken(accessToken)
        .addView(google.picker.ViewId.DOCS)
        .setCallback(pickerCallback);

    // Create an iframe and use .toUri as the source.
    const pickerContainer = document.getElementById('IFRAME_CONTAINER_ID');
    const iframe = document.createElement('iframe');

    iframe.setAttribute("src", builder.toUri().toString());
    iframe.style.width = "100%";
    iframe.style.height = "600px";
    iframe.style.border = "none";

    // Attach it to your page.
    pickerContainer.appendChild(iframe);

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

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