Google Drive Picker als Teil der Seite

Question

einbetten

Ich möchte Google Drive als Teil meiner Seite einbetten/implementieren; wie ein normales Gitter oder eine Tabelle anstatt wie ein Popup zu haben. Ich habe eine Referenz von GoogleAPI Seite genommen. Außerdem recherchierten viele Dinge für meine Anforderungen, aber nichts würde für mich funktionieren.

Hier ist die Javascript-Code, den ich

// The Browser API key obtained from the Google API Console. 
 
// Replace with your own Browser API key, or your own key. 
 
var developerKey = 'xxxxxxxxxxxxxx'; 
 

 
// The Client ID obtained from the Google API Console. Replace with your own Client ID. 
 
var clientId = "xxxxxxxxxxxx.apps.googleusercontent.com" 
 

 
// Replace with your own project number from console.developers.google.com. 
 
// See "Project number" under "IAM & Admin" > "Settings" 
 
var appId = "xxxxxxxxxxxx"; 
 

 
// Scope to use to access user's Drive items. 
 
var scope = ['https://www.googleapis.com/auth/drive']; 
 

 
var pickerApiLoaded = false; 
 
var oauthToken; 
 
var picker; 
 

 
// Use the Google API Loader script to load the google.picker script. 
 
function loadPicker() { 
 

 
    gapi.load('auth', { 
 
    'callback': onAuthApiLoad 
 
    }); 
 
    gapi.load('picker', { 
 
    'callback': onPickerApiLoad 
 
    }); 
 
} 
 

 
function onAuthApiLoad() { 
 

 
    window.gapi.auth.authorize({ 
 
     'client_id': clientId, 
 
     'scope': scope, 
 
     'immediate': false 
 
    }, 
 
    handleAuthResult); 
 
} 
 

 
function onPickerApiLoad() { 
 

 
    pickerApiLoaded = true; 
 
    createPicker(); 
 
} 
 

 
function handleAuthResult(authResult) { 
 

 
    if (authResult && !authResult.error) { 
 
    oauthToken = authResult.access_token; 
 
    createPicker(); 
 
    } 
 
} 
 

 
// Create and render a Picker object for searching images. 
 
function createPicker() { 
 

 
    if (pickerApiLoaded && oauthToken) { 
 
    var view = new google.picker.DocsView() 
 
     .setIncludeFolders(true) 
 
     .setOwnedByMe(true); 
 
    picker = new google.picker.PickerBuilder() 
 
     .enableFeature(google.picker.Feature.NAV_HIDDEN) 
 
     .enableFeature(google.picker.Feature.MULTISELECT_ENABLED) 
 
     .setAppId(appId) 
 
     .setOAuthToken(oauthToken) 
 
     .addView(view) 
 
     .addView(new google.picker.DocsUploadView().setIncludeFolders(true)) 
 
     .setDeveloperKey(developerKey) 
 
     .setCallback(pickerCallback) 
 
     .build(); 
 
    picker.setVisible(true); 
 
    } 
 
} 
 

 
// A simple callback implementation. 
 
function pickerCallback(data) { 
 

 
    if (data.action == google.picker.Action.PICKED) { 
 
    var fileId = data.docs[0].id; 
 
    alert('The user selected: ' + fileId); 
 
    } 
 
}

<button onclick="loadPicker(); return false;">Pick From Google Drive</button> 
 
<div id="result"></div> 
 

 
<!-- The Google API Loader script. --> 
 
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

Answer 1

bin mit berichtete Nach der Ausgabe here, gapi.auth veraltet. Sie sollten stattdessen gapi.auth2 verwenden.

Von Google Developers

Verwendung,

gapi.auth2.init({ 
    client_id: 'CLIENT_ID.apps.googleusercontent.com', 
    scope : scope , 
}); 

und es wird ein Versprechen

gapi.auth2.GoogleAuth 

Eine vollständige Referenz zurückgeben, können in der Google Developer Page

Answer 2

zu sehen Es klingt wie Sie möchte Google Drive verwenden API und nicht die Auswahl-API.

Damit können Sie Laufwerk für Dateien abfragen, ohne die GUI zu verwenden.

https://developers.google.com/drive/v3/web/quickstart/js

Das Beispiel in diesem Quickstart druckt auf der Seite eine Liste von Dateien aus dem genehmigten Konto aus.

Answer 3

Verwenden PickerBuilder.toUri() anstelle von PickerBuilder.build(). Es wird die Picker-URL zurückgeben und dies auf iframe setzen.