Google Picker 是一種「檔案開啟」對話方塊，適用於儲存在 Google 雲端硬碟中的資訊。Google 挑選器包含下列功能：
- 外觀與 Google 雲端硬碟使用者介面相似。
- 使用多個檢視畫面顯示雲端硬碟檔案的預覽和縮圖。
- 內嵌式強制回應視窗，因此使用者不會離開主要應用程式。
Google Picker API 是一個 JavaScript API，可用於您的網頁應用程式，讓使用者開啟或上傳雲端硬碟檔案。
應用程式需求
使用 Google Picker 的應用程式必須遵守所有現有的服務條款。最重要的是，您必須在要求中正確識別自己。
您必須擁有 Google Cloud 專案。設定環境
如要開始使用 Google Picker API，請設定環境。
啟用 API
您必須先在 Google Cloud 專案中啟用 API，才能使用 Google API。 您可以在單一 Google Cloud 專案中啟用一或多個 API。
在 Google Cloud 控制台中，啟用 Google Picker API。
建立 API 金鑰
API 金鑰是一個長字串，包含大小寫字母、數字、底線和連字號，例如 AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe。這種驗證方法可以匿名存取公開的資料，例如使用「網際網路上知道這個連結的任何使用者」共用設定下的 Google Workspace 檔案。詳情請參閱「使用 API 金鑰進行驗證」。
建立 API 金鑰的方法如下：
- 在 Google Cloud 控制台中，依序點選「選單」圖示 >「API 和服務」>「憑證」。
- 依序點選「建立憑證」>「API 金鑰」。
- 系統會顯示新的 API 金鑰。
- 按一下「複製」 來複製 API 金鑰，以便用於應用程式的程式碼。您也可以在專案憑證的「API 金鑰」部分找到 API 金鑰。
- 按一下「限制金鑰」即可更新進階設定，並限制 API 金鑰的使用限制。詳情請參閱「套用 API 金鑰限制」。
為網頁應用程式授權憑證
如要以使用者的身分進行驗證，以及存取應用程式中的使用者資料，您必須建立一或多個 OAuth 2.0 用戶端 ID。用戶端 ID 是用來識別 Google 的 OAuth 伺服器的單一應用程式。如果您的應用程式在多個平台上執行，就必須為每個平台建立個別的用戶端 ID。
- 在 Google Cloud 控制台中，依序點選「選單」圖示 >「API 和服務」>「憑證」。
- 依序按一下「建立憑證」>「OAuth 用戶端 ID」。
- 依序點選「應用程式類型」>「網頁應用程式」。
- 在「Name」(名稱) 欄位中，輸入憑證名稱。這個名稱只會在 Google Cloud 控制台中顯示。
- 新增與應用程式相關的已授權 URI：
- 用戶端應用程式 (JavaScript)：在「已授權的 JavaScript 來源」下方，按一下「新增 URI」。接著，輸入瀏覽器要求使用的 URI。這可讓應用程式讓應用程式將 API 要求傳送至 OAuth 2.0 伺服器。
- 伺服器端應用程式 (Java、Python 等)：在「已授權的重新導向 URI」下方，按一下「新增 URI」。然後輸入 OAuth URI ，讓 OAuth 2.0 伺服器傳送回應。
- 按一下「建立」，畫面上會出現 OAuth 用戶端建立畫面，並顯示新的用戶端 ID 和用戶端密鑰。
記下用戶端 ID。用戶端密鑰不會用於網頁應用程式。
- 按一下「OK」。新建立的憑證會顯示在「OAuth 2.0 Client ID」下方。
Picker 物件時，必須傳送 OAuth 2.0 存取權杖，而且該權杖會存取使用者私人資料。如要索取存取權杖，請參閱使用 OAuth 2.0 存取 Google API。顯示 Google 挑選器
本指南的其餘內容將說明如何透過網頁應用程式載入並顯示 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() {
// 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：網頁應用程式的用戶端 ID。SCOPES：您要求存取 Google API 的一或多個 OAuth 2.0 範圍 (視您需要的存取層級而定)。詳情請參閱「Google API 的 OAuth 2.0 範圍」。
google.accounts.oauth2 JavaScript 程式庫可協助您提示使用者同意聲明，並取得用於存取使用者資料的存取權杖。initTokenClient() 方法會使用您的網頁應用程式用戶端 ID 初始化新的權杖用戶端。詳情請參閱使用權杖模型。
onApiLoad() 函式會載入 Google Picker 程式庫。在 Google Picker 程式庫成功載入後，系統會呼叫 onPickerApiLoad() 回呼函式。
顯示 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 執行個體，您必須使用 PickerBuilder 建立 Picker 物件。PickerBuilder 採用 View、OAuth 權杖、開發人員金鑰，以及成功呼叫的回呼函式 (pickerCallback)。
Picker 物件一次算繪一個 View。請透過 ViewId (google.picker.ViewId.*) 或建立類型 (google.picker.*View) 的執行個體，指定至少一個檢視畫面。如要依檢視畫面進一步控管檢視畫面的呈現方式，請按照類型指定檢視畫面。
如果您在 Google Picker 中加入多個檢視畫面，使用者只要按一下左側的分頁，即可切換不同的檢視畫面。您可以使用 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;
}
回呼會收到 JSON 編碼的 data 物件。這個物件包含使用者使用 Google Picker (google.picker.Response.ACTION) 執行的 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
使用 setLocale(locale) 方法將語言代碼提供給 PickerBuilder 執行個體，藉此指定 UI 語言。
以下程式碼範例說明如何將語言代碼設為法文：
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 |