Google Picker API คือ JavaScript API ที่คุณสามารถใช้ในเว็บแอปเพื่อให้ผู้ใช้เลือกหรืออัปโหลดไฟล์ใน Google ไดรฟ์ได้ ผู้ใช้สามารถให้สิทธิ์แก่แอปของคุณเพื่อเข้าถึงข้อมูล ในไดรฟ์ ซึ่งเป็นวิธีที่ปลอดภัยและได้รับสิทธิ์ในการโต้ตอบกับไฟล์
เครื่องมือเลือกของ Google จะทำหน้าที่เป็นกล่องโต้ตอบ "เปิดไฟล์" สำหรับข้อมูลที่เก็บไว้ในไดรฟ์ และมีฟีเจอร์ดังต่อไปนี้
- มีรูปลักษณ์คล้ายกับ UI ของ Google ไดรฟ์
- หลายมุมมองแสดงตัวอย��างและภาพขนาดย่อของไฟล์ในไดรฟ์
- หน้าต่างโมดัลแบบในบรรทัด เพื่อไม่ให้ผู้ใช้ออกจากแอปพลิเคชันหลัก
โปรดทราบว่า Google Picker ไม่อนุญาตให้ผู้ใช้จัดระเบียบ ย้าย หรือคัดลอกไฟล์จากโฟลเดอร์หนึ่งไปยังอีกโฟลเดอร์หนึ่ง ซึ่งทำได้โดยใช้ Google Drive API หรือ UI ของไดรฟ์
ข้อกำหนดการสมัคร
แอปพลิเคชันที่ใช้ Google Picker ต้องปฏิบัติตามข้อกำหนดในการให้บริการที่มีอยู่ทั้งหมด ที่สำคัญที่สุดคือคุณต้องระบุตัวตน ด้วยตนเองในคำขอ
นอกจากนี้ คุณต้องมีโปรเจ็กต์ Google Cloud ด้วยตั้งค่าสภาพแวดล้อมของคุณ
หากต้องการเริ่มใช้ Google Picker API คุณต้องตั้งค่าสภาพแวดล้อมของคุณ
เปิดใช้ API
ก่อนใช้ Google APIs คุณต้องเปิดใช้ API ในโปรเจ็กต์ Google Cloud คุณเปิด API ได้มากกว่า 1 รายการในโปรเจ็กต์ Google Cloud เดียว
เปิดใช้ Google Picker API ในคอนโซล Google Cloud
สร้างคีย์ API
คีย์ API เป็นสตริงแบบยาวที่ประกอบด้วยอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ตัวเลข ขีดล่าง และขีดกลาง เช่น AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe
วิธีการตรวจสอบสิทธิ์นี้ใช้เพื่อเข้าถึงข้อมูลที่เผยแพร่แบบสาธารณะ เช่น ไฟล์ Google Workspace ที่แชร์โดยใช้การตั้งค่าการแชร์ "ทุกคนบนอินเทอร์เน็ตที่มีลิงก์นี้" ได้ ดูรายละเอียดเพิ่มเติมได้ที่ตรวจสอบสิทธิ์โดยใช้คีย์ API
วิธีสร้างคีย์ API
- ใ���คอนโซล Google Cloud ให้ไปที่เมนู > API และบริการ > ข้อมูลเข้าสู่ระบบ
- คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API
- คีย์ API ใหม่จะปรากฏขึ้น
- คลิกคัดลอก เพื่อคัดลอกคีย์ API สำหรับใช้ในโค้ดของแอป นอกจากนี้ คุณยังดูคีย์ API ได้ในส่วน "คีย์ API" ของข้อมูลเข้าสู่ระบบของโปรเจ็กต์
- คลิกจำกัดคีย์เพื่ออัปเดตการตั้งค่าขั้นสูงและจำกัดการใช้คีย์ API โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อการใช้ข้อจํากัดของคีย์ API
ให้สิทธิ์ข้อมูลเข้าสู่ระบบสำหรับเว็บแอปพลิเคชัน
หากต้องการตรวจสอบสิทธิ์ผู้ใช้ปลายทางและเข้าถึงข้อมูลผู้ใช้ในแอป คุณต้องสร้างรหัสไคลเอ็นต์ OAuth 2.0 อย่างน้อย 1 รายการ รหัสไคลเอ็นต์ใช้เพื่อระบุแอปเดียวไปยังเซิร์ฟเวอร์ OAuth ของ Google หากแอปทำงานในหลายแพลตฟอร์ม คุณต้องสร้างรหัสไคลเอ็นต์แยกกันสำหรับแต่ละแพลตฟอร์ม
- ในคอนโซล Google Cloud ให้ไปที่เมนู > API และบริการ > ข้อมูลเข้าสู่ระบบ
- คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth
- คลิกประเภทแอปพลิเคชัน > เว็บแอปพลิเคชัน
- ในช่องชื่อ ให้พิมพ์ชื่อของข้อมูลเข้าสู่ระบบ ชื่อนี้จะแสดงในคอนโซล Google Cloud เท่านั้น
- เพิ่ม URI ที่ได้รับอนุญาตซึ่งเกี่ยวข้องกับแอปของคุณ ดังนี้
- แอปฝั่งไคลเอ็นต์ (JavaScript) - คลิกเพิ่ม URI ในส่วนต้นทาง JavaScript ที่ได้รับอนุญาต จากนั้นป้อน URI ที่จะใช้สำหรับคำขอของเบราว์เซอร์ ข้อมูลนี้จะระบุโดเมนที่แอปพลิเคชันของคุณสามารถส่งคำขอ API ไปยังเซิร์ฟเวอร์ OAuth 2.0
- แอปฝั่งเซิร์ฟเวอร์ (Java, Python และอื่นๆ) - คลิกเพิ่ม URI ในส่วน URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต จากนั้น ให้ป้อน URI ปลายทางที่เซิร์ฟเวอร์ OAuth 2.0 จะส่งการตอบกลับได้
- คลิกสร้าง หน้าจอที่สร้างของไคลเอ็นต์ OAuth จะปรากฏขึ้นเพื่อแสดงรหัสไคลเอ็นต์และ��หัสลับไคลเอ็นต์ใหม่
จดรหัสไคลเอ็นต์ และจะไม่ใช้รหัสลับไคลเอ็นต์สำหรับเว็บแอปพลิเคชัน
- คลิกตกลง ข้อมูลเข้าสู่ระบบที่สร้างขึ้นใหม่จะปรากฏในส่วนรหัสไคลเอ็นต์ OAuth 2.0
Picker
หากต้องการขอโทเค็นเพื่อการเข้าถึง โปรดดูการใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs
แสดงเครื่องมือเลือกของ Google
ส่วนที่เหลือของคู่มือนี้จะครอบคลุมวิธีโหลดและแสดงเครื่องมือเลือกของ Google จากเว็บแอป หากต้องการดูตัวอย่างแบบเต็ม ให้ไปที่ตัวอย่างโค้ดเครื่องมือเลือกของ Googleโหลดไลบรารี 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: '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 ระบบจะเรียกใช้ฟังก์ชันเรียกกลับ 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, คีย์นักพัฒนาซอฟต์แวร์ และฟังก์ชันเรียกกลับเพื่อเรียกเมื่อเสร็จสมบูรณ์ (pickerCallback
)
ออบเจ็กต์ Picker
แสดงผล View
ทีละรายการ ระบุข้อมูลพร็อพเพอร์ตี้อย่างน้อย 1 รายการ ไม่ว่าจ��เป็น ViewId
(google.picker.ViewId.*
) หรือการสร้างอินสแตนซ์ของประเภท (google.picker.*View
) ระบุมุมมองตามประเภทเพื่อการควบคุมเพิ่มเติมเกี่ยวกับวิธีแสดงผลข้อมูลพร็อพเพอร์ตี้
หากมีการเพิ่มมุมมองมากกว่าหนึ่งรายการลงในเครื่องมือเลือกของ Google ผู้ใช้สามารถสลับจากมุมมองหนึ่งไปอีกมุมมองหนึ่งได้โดยคลิกที่แท็บทางด้านซ้าย คุณสามารถจัดกลุ่มแท็บอย่างสมเหตุสมผลด้วยออบเจ็กต์ ViewGroup
ใช้โค้ดเรียกกลับของ Google Picker
โค้ดเรียกกลับของ Google Picker สามารถใช้เพื่อแสดงความรู้สึกต่อการโต้ตอบของผู้ใช้ใน Google Picker เช่น การเลือกไฟล์หรือกด "ยกเลิก" ออบเจ็กต์ 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; }
โค้ดเรียกกลับจะได้รับออบเจ็กต์ 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();ดูรายการประเภทข้อมูลพร็อพเพอร์ตี้ที่ถูกต้องได้ที่
ViewId
ปรับลักษณะที่ปรากฏของ 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 Picker ในภาษาอื่นๆ
ระบุภาษาของ 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 |