Google Picker API

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

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

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

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

ข้อกำหนดของการสมัคร

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

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

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

เปิดใช้ API

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

• เปิดใช้ 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

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

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

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

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

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

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

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

แสดงเครื่องมือเลือกของ Google

โหลดไลบรารีเครื่องมือเลือกของ Google

หากต้องการโหลดคลังเครื่องมือเลือกของ Google ให้โทรหา 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() {
        // TODO(developer): 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 APIs

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

ฟังก์ชัน onApiLoad() จะโหลดไลบรารีของ Google Picker มีการเรียกฟังก์ชัน Callback onPickerApiLoad() หลังไลบรารี Google Picker โหลดสำเร็จแล้ว

แสดงเครื่องมือเลือกของ Google

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

    // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // TODO(developer): Replace with your API key
        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: ''});
      }
    }
    

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

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

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

ใช้ Callback ของ Google Picker

คุณสามารถใช้การเรียกกลับของ Google เครื่องมือเลือกเพื่อโต้ตอบกับการโต้ตอบของผู้ใช้ในเครื่องมือเลือกของ Google ได้ เช่น การเลือกไฟล์หรือกดยกเลิก Response บ่งบอกถึงข้อมูลเกี่ยวกับการเลือกของผู้ใช้

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

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

กรองประเภทไฟล์ที่เฉพาะเจาะจง

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

    let 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)
        .setCallback(pickerCallback)
        .build();
    

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

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

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

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

แสดงผลเครื่องมือเลือกของ Google ในภาษาอื่น

ระบุภาษาของ UI โดยการระบุภาษาให้กับ PickerBuilder โดยใช้เมธอด setLocale(locale)

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีตั้งค่าภาษาเป็นภาษาฝรั่งเศส

    let picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.IMAGE_SEARCH)
        .setLocale('fr')
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    

ต่อไปนี้คือรายการของภาษาที่สนับสนุนในปัจจุบัน