Die Google-Auswahl ist ein Dialogfeld zum Öffnen von Dateien in Google Drive. Google Picker bietet folgende Funktionen:
- Das Design ähnelt dem Google Drive.
- Mehrere Ansichten mit Vorschauen und Miniaturansichten von Drive-Dateien.
- Ein modales Inline-Fenster, damit Nutzer die Hauptanwendung nicht verlassen können.
Die Google Picker API ist eine JavaScript API, mit der Sie in Ihren Webanwendungen Drive-Dateien öffnen oder hochladen können.
Anwendungsanforderungen
Anwendungen, die Google Picker verwenden, müssen allen vorhandenen Nutzungsbedingungen entsprechen. Vor allem müssen Sie sich in Ihren Anfragen korrekt identifizieren.
Sie benötigen außerdem ein Google Cloud-Projekt.Umgebung einrichten
Bevor Sie die Google Picker API verwenden können, müssen Sie Ihre Umgebung einrichten.
API aktivieren
Bevor Sie Google APIs verwenden können, müssen Sie sie in einem Google Cloud-Projekt aktivieren. Sie können eine oder mehrere APIs in einem einzelnen Google Cloud-Projekt aktivieren.
Aktivieren Sie in der Google Cloud Console die Google Picker API.
API-Schlüssel erstellen
Ein API-Schlüssel ist ein langer String mit Groß- und Kleinbuchstaben, Ziffern, Unterstrichen und Bindestrichen, z. B. AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe.
Mit dieser Authentifizierungsmethode wird anonym auf öffentlich verfügbare Daten zugegriffen, z. B. Google Workspace-Dateien, die über die Freigabeeinstellung „Jeder im Internet mit diesem Link“ freigegeben wurden. Weitere Informationen finden Sie unter Mit API-Schlüsseln authentifizieren.
So erstellen Sie einen API-Schlüssel:
- Rufen Sie in der Google Cloud Console das Menü > APIs & Dienste > Anmeldedaten auf.
- Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.
- Ihr neuer API-Schlüssel wird angezeigt.
- Klicke auf „Kopieren“ , um deinen API-Schlüssel zur Verwendung im Code deiner App zu kopieren. Den API-Schlüssel finden Sie auch im Bereich „API-Schlüssel“ der Anmeldedaten Ihres Projekts.
- Klicken Sie auf Schlüssel einschränken, um die erweiterten Einstellungen zu aktualisieren und die Verwendung Ihres API-Schlüssels einzuschränken. Weitere Informationen finden Sie unter Einschränkungen für API-Schlüssel anwenden.
Anmeldedaten für eine Webanwendung autorisieren
Damit Sie sich als Endnutzer authentifizieren und auf Nutzerdaten in Ihrer Anwendung zugreifen können, müssen Sie eine oder mehrere OAuth 2.0-Client-IDs erstellen. Mit einer Client-ID wird eine einzelne Anwendung gegenüber den OAuth-Servern von Google identifiziert. Wenn Ihre Anwendung auf mehreren Plattformen ausgeführt wird, müssen Sie für jede Plattform eine separate Client-ID erstellen.
- Gehen Sie in der Google Cloud Console zu „Menü“ > APIs & Dienste > Anmeldedaten.
- Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID.
- Klicken Sie auf Anwendungstyp > Webanwendung.
- Geben Sie im Feld Name einen Namen für die Anmeldedaten ein. Dieser Name wird nur in der Google Cloud Console angezeigt.
- Fügen Sie autorisierte URIs zu Ihrer App hinzu:
- Clientseitige Apps (JavaScript): Klicken Sie unter Autorisierte JavaScript-Quellen auf URI hinzufügen. Geben Sie dann einen URI für Browseranfragen ein. Damit werden die Domains identifiziert, von denen aus Ihre Anwendung API-Anfragen an den OAuth 2.0-Server senden kann.
- Serverseitige Anwendungen (Java, Python und mehr): Klicken Sie unter Autorisierte Weiterleitungs-URIs auf URI hinzufügen. Geben Sie dann einen Endpunkt-URI ein, an den der OAuth 2.0-Server Antworten senden kann.
- Klicken Sie auf Erstellen. Der Bildschirm „OAuth-Client erstellt“ wird angezeigt. Er enthält Ihre neue Client-ID und Ihren Clientschlüssel.
Notieren Sie sich die Client-ID. Clientschlüssel werden nicht für Webanwendungen verwendet.
- Klicken Sie auf OK. Die neu erstellten Anmeldedaten werden unter OAuth 2.0-Client-IDs angezeigt.
Picker-Objekts ein OAuth 2.0-Zugriffstoken mit Ansichten senden, die auf private Nutzerdaten zugreifen. Informationen zum Anfordern eines Zugriffstokens finden Sie unter Mit OAuth 2.0 auf Google APIs zugreifen.
Google Picker anzeigen
Im weiteren Verlauf dieses Leitfadens wird beschrieben, wie Sie den Google Picker aus einer Webanwendung laden und anzeigen. Das vollständige Beispiel finden Sie im Code-Picker von Google Picker.Google Picker-Bibliothek laden
Rufen Sie zum Laden der Google Picker-Bibliothek gapi.load() mit dem Bibliotheksnamen und einer Callback-Funktion auf, die nach einem erfolgreichen Ladevorgang aufgerufen werden soll:
<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>
Mit der Funktion onApiLoad() werden die Google Picker-Bibliotheken geladen. Die Callback-Funktion onPickerApiLoad() wird aufgerufen, nachdem die Google Picker-Bibliothek erfolgreich geladen wurde.
Google Picker anzeigen
Die Funktion createPicker() prüft, ob das Laden der Google Picker API abgeschlossen ist und ob ein OAuth-Token erstellt wurde. Anschließend erstellt diese Funktion eine Instanz von Google Picker und zeigt sie an:
// 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: ''});
}
}
Zum Erstellen einer Google Picker-Instanz müssen Sie eine View, eine oauthToken, eine developerKey und eine Callback-Funktion angeben, die im Erfolgsfall aufgerufen werden soll (pickerCallback).
Ein Picker-Objekt rendert immer ein View. Geben Sie mindestens eine Ansicht an, entweder durch ViewId (google.picker.ViewId.*) oder durch Erstellen einer Instanz des Typs (google.picker.*View). Geben Sie die Ansicht nach Typ an, um die Darstellung der Ansicht zusätzlich zu steuern.
Wenn Google Picker mehrere Ansichten enthält, können Nutzer durch Anklicken eines Tabs links von einer Ansicht zur anderen wechseln. Tabs können mit ViewGroup-Objekten logisch gruppiert werden.
Picker-Callback implementieren
Ein Picker-Callback kann verwendet werden, um auf Nutzerinteraktionen in der Google-Auswahl zu reagieren, z. B. auf die Auswahl einer Datei oder auf „Abbrechen“.
// 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;
}
Der Callback empfängt ein JSON-codiertes data-Objekt. Dieses Objekt enthält alle Aktionen, die der Nutzer mit der Google-Auswahl (google.picker.Response.ACTION) ausführt. Wenn der Nutzer ein Element auswählt, wird auch das Array google.picker.Response.DOCUMENTS ausgefüllt. In diesem Beispiel wird google.picker.Document.URL auf der Hauptseite angezeigt.
Weitere Informationen zu den Datenfeldern finden Sie in der JSON-Referenz.
Bestimmte Dateitypen filtern
Mit ViewGroup können Sie bestimmte Elemente herausfiltern. Im folgenden Beispiel werden in der Unteransicht „Google Drive“ nur Dokumente und Präsentationen angezeigt.
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();
Darstellung von Google Picker optimieren
Verwenden Sie die Funktion PickerBuilder.enableFeature(), um das Erscheinungsbild des Google Picker-Fensters zu optimieren. Wenn Sie beispielsweise nur eine Ansicht haben, können Sie den Navigationsbereich ausblenden, damit Nutzer mehr Platz zum Ansehen von Elementen haben. Hier ein Beispiel für eine Tabellen-Suchauswahl mit dieser Funktion:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Google Picker in anderen Sprachen rendern
Geben Sie die Sprache der UI an, indem Sie der Instanz PickerBuilder das Gebietsschema mit der Methode setLocale(locale) angeben. Hier ein Beispiel für eine französische Sprache:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Folgende Sprachen werden derzeit unterstützt:
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |