将谷歌驱动器选择器嵌入页面

时间:2017-05-10 10:51:22

标签: javascript google-api google-drive-api drive google-drive-realtime-api

我想将Google云端硬盘嵌入/实施作为我网页的一部分;像普通网格或表格,而不是弹出窗口。我从GoogleAPI页面中获取了参考。另外,根据我的要求研究了很多东西,但没有什么能对我有用。

以下是我正在使用的javascript代码



// 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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

使用 PickerBuilder.toUri()代替 PickerBuilder.build()。 它将返回选择器URL并将其设置为iframe。

答案 1 :(得分:2)

根据报告的问题here gapi.auth已弃用。您应该使用gapi.auth2代替。

来自Google Developers

使用,

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

它会返回一个Promise

gapi.auth2.GoogleAuth

Google Developer Page

中可以看到完整参考

答案 2 :(得分:1)

听起来您想要使用Google Drive API而不是选择器API。

这允许您在不使用GUI的情况下查询驱动器文件。

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

本快速入门中的示例将授权帐户中的文件列表打印到页面上。