ページの一部としてGoogleドライブピッカーを埋め込みます

Question

私のページの一部としてGoogleドライブを埋め込み/実装したいと思います。ポップアップの代わりに通常のグリッドやテーブルのように表示されます。私はGoogleAPIページからリファレンスを取得しました。また、私の要求について多くのことを研究しましたが、何も私のために働かないでしょう。ここで

私が問題による

// 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

を使用していますJavaScriptコードはhere、 gapi.authが廃止されて報告されます。代わりにgapi.auth2を使用してください。

Google Developers

使用から

、

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

、それは完全なリファレンスは、それはあなたのような音Google Developer Page

Answer 2

で見ることができ

gapi.auth2.GoogleAuth 

約束を返します。 Googleドライブを使いたいピッカーAPIではなくAPIです。

これにより、GUIを使用せずにファイルのドライブを照会することができます。このクイックスタートで

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

例ページに認可されたアカウントからのファイルのリストを出力します。

Answer 3

使用PickerBuilder.toUri（）の代わりにPickerBuilder.build（）の。 ピッカーURLを返し、これをiframeに設定します。