Google Picker API

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

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

Google Picker API คือ JavaScript API ที่ใช้ในเว็บแอปเพื่อให้ผู้ใช้เปิดหรืออัปโหลดไฟล์ในไดรฟ์ได้

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

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

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

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

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

เปิดใช้ API

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

• ในคอนโซล Google Cloud ให้เปิดใช้ Google Picker API

  เปิดใช้ API

สร้างคีย์ API

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

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

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

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

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

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

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

1. ในคอนโซล Google Cloud ให้ไปที่เมนู > 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
8. ไม่บังคับ: หากจะสร้างข้อมูลเข้าสู่ระบบที่เป็นข้อกําหนดเบื้องต้นสําหรับการเริ่มต้น JavaScript อย่างรวดเร็ว คุณต้องสร้างคีย์ API ด้วย

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

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

ส่วนที่เหลือของคู่มือนี้จะครอบคลุมวิธีโหลดและแสดงเครื่องมือเลือก Google จากเว็บแอป หากต้องการดูตัวอย่างที่สมบูรณ์ ให้ไปที่ตัวอย่างโค้ด 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() {
        // TODO(developer): Replace with your client ID and required scopes
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'YOUR_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>
    

ฟังก์ชัน onApiLoad() จะโหลดไลบรารีเครื่องมือเลือก Google ระบบจะเรียกฟังก์ชันเรียกกลับ onPickerApiLoad() หลังจากที่ไลบรารีเครื่องมือเลือก Google โหลดสําเร็จ

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

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

    // 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('YOUR_API_KEY')
            .setCallback(pickerCallback)
            .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 คุณต้องระบุ View, oauthToken, developerKey และฟังก์ชันเรียกกลับเพื่อเรียกสําเร็จ (pickerCallback)

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

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

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

ใช้การเรียกกลับสําหรับเครื่องมือเลือก

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

    // 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;
    }
    

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

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

     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();
    

รายการภาษาที่รองรับในขณะนี้มีดังนี้

af am ar bg bn ca cs

da de el en en-GB es es-419

et eu fa fi fil fr fr-CA

gl gu hi hr hu id is

it iw ja kn ko lt lv

ml mr ms nl no pl pt-BR

pt-PT ro ru sk sl sr sv

sw ta te th tr uk ur

vi zh-CN zh-HK zh-TW zu