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

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 Picker API ในคอนโซล Google Cloud

  เปิดใช้ API

สร้างคีย์ API

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

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

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

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

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

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

สำคัญ: แอปของคุณต้องส่งโทเค็นเพื่อการเข้าถึง 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 ระบบจะเรียกใช้ฟังก์ชัน Callback ของ onPickerApiLoad หลังจากที่ไลบรารี Google Picker โหลดสำเร็จ

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

แสดง Google Picker

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

    // 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 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) หากผู้ใช้เลือกรายการ ระบบจะป้อนข้อมูลอาร์เรย์ 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();