将谷歌驱动器选择器嵌入页面的一部分

Question

我想嵌入/实施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>

Answer 1

根据此处报告的问题， gapi.auth已弃用。你应该改用gapi.auth2。

来自谷歌开发者

使用，

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

它会返回一个 Promise

gapi.auth2.GoogleAuth

完整的参考可以在Google 开发者页面中查看