Question

我正在使用Flask开发一个网络应用，我正在尝试使用Google Picker API让用户在其Google云端硬盘中选择一个文件。下面是我测试Picker API的代码（代码改编自https://gist.github.com/Daniel15/5994054）。

这是html文件（减去个人标识符）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Google Drive File Picker Example</title>
</head>
<body>
    <button type="button" id="pick">Pick File</button>
  <script src="../static/gdrive-filepicker.js"></script>
  <script>
    function initPicker() {
      var picker = new FilePicker({
        apiKey: '<Complete with API key>',
        clientId: <Complete with numerical clientId>,
        buttonEl: document.getElementById('pick'),
        onSelect: function(file) {
          console.log(file);
          alert('Selected ' + file.title);
        }
      });
    }
  </script>
</body>

</html>

<script src="https://www.google.com/jsapi?key=<completed with key>"></script>
<script src="https://apis.google.com/js/client.js?onload=initPicker"></script>

这是javascript文件：

(function() {
/**
 * Initialise a Google Driver file picker
 */
var FilePicker = window.FilePicker = function(options) {
    // Config
    this.apiKey = options.apiKey;
    this.clientId = options.clientId;

    // Elements
    this.buttonEl = options.buttonEl;

    // Events
    this.onSelect = options.onSelect;
    this.buttonEl.addEventListener('click', this.open.bind(this));

    // Disable the button until the API loads, as it won't work properly until then.
    this.buttonEl.disabled = true;

    // Load the drive API
    gapi.client.setApiKey(this.apiKey);
    gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
    google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) });
}

FilePicker.prototype = {
    /**
     * Open the file picker.
     */
    open: function() {
        // Check if the user has already authenticated
        var token = gapi.auth.getToken();
        if (token) {
            this._showPicker();
        } else {
            // The user has not yet authenticated with Google
            // We need to do the authentication before displaying the Drive picker.
            this._doAuth(false, function() { this._showPicker(); }.bind(this));
        }
    },

    /**
     * Show the file picker once authentication has been done.
     * @private
     */
    _showPicker: function() {
        var accessToken = gapi.auth.getToken().access_token;
        this.picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.SPREADSHEETS).
            setAppId(this.clientId).
            setOAuthToken(accessToken).
            setCallback(this._pickerCallback.bind(this)).
            //setOrigin(google.script.host.origin).
            build().
            setVisible(true);
    },

    /**
     * Called when a file has been selected in the Google Drive file picker.
     * @private
     */
    _pickerCallback: function(data) {
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
            var file = data[google.picker.Response.SPREADSHEETS][0],
                id = file[google.picker.Document.ID],
                request = gapi.client.drive.files.get({
                    fileId: id
                });

            request.execute(this._fileGetCallback.bind(this));
        }
    },
    /**
     * Called when file details have been retrieved from Google Drive.
     * @private
     */
    _fileGetCallback: function(file) {
        if (this.onSelect) {
            this.onSelect(file);
        }
    },

    /**
     * Called when the Google Drive file picker API has finished loading.
     * @private
     */
    _pickerApiLoaded: function() {
        this.buttonEl.disabled = false;
    },

    /**
     * Called when the Google Drive API has finished loading.
     * @private
     */
    _driveApiLoaded: function() {
        this._doAuth(true);
    },

    /**
     * Authenticate with Google Drive via the Google JavaScript API.
     * @private
     */
    _doAuth: function(immediate, callback) {
        gapi.auth.authorize({
            client_id: this.clientId + '<complete with second part of client id>.apps.googleusercontent.com',
            scope: 'https://www.googleapis.com/auth/drive.readonly',
            immediate: immediate
        }, callback);
    }
};
}());

当我在Safari上运行它时，它可以正常工作，但是在Chrome上，它会因401重定向而失败。 Chrome上的错误记录：

Completed initPicker()
Uncaught null
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8081').
Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…adsheets%22))&rpctoken=bmrqgq5vh5h&rpcService=k3a915ai4cgk&thirdParty=true': 'ALLOW-FROM http://localhost:8081' is not a recognized directive. The header will be ignored.
GET https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…adsheets%22))&rpctoken=bmrqgq5vh5h&rpcService=k3a915ai4cgk&thirdParty=true 401 ()

来自Safari的日志：

[Error] Unable to post message to https://docs.google.com. Recipient has origin http://localhost:8081.
[Error] Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalhost%3A8081&oauth_token=ya29..vgIMhRk5EJ9sBOEppY9NbkFpujbhPBvsUoEDJB85OW6ED9Gnfx2PK8N1U1W-zPVvSSs&hostId=localhost&relayUrl=http%3A%2F%2Flocalhost%3A8081%2Ffavicon.ico&nav=((%22spreadsheets%22))&rpctoken=oox715usn81y&rpcService=m5rgot68gsh3&thirdParty=true': 'ALLOW-FROM http://localhost:8081' is not a recognized directive. The header will be ignored.

这个答案（Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000）似乎表明，由于https和http之间的协议不同，但我觉得奇怪的是它可以在Safari上运行但不适用于Chrome。我还尝试使用.setOrigin(window.location.protocol + '//' + window.location.host)但没有成功。有任何想法吗？谢谢！

Google Picker API适用于Safari，但在Chrome

0 个答案: