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 แล้ว จากนั้น ฟังก์ชันนี้จะสร้างอินสแตนซ์ของ 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)
.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();
รายชื่อภาษาที่ได้รับการสนับสนุนในปัจจุบันมีดังนี้
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |