Google Drive file picker is blocked by google

Viewed 384

An application I work with has a js file picker scripted based on this https://gist.github.com/Daniel15/5994054.

Its very old but has been working up until recently with only minor modifications. Now whenever someone tries to use the file picker a pop-up appears and they pick their google account, once this happens the following message appears:

This app is blocked This app tried to access sensitive info in your Google Account. To keep your account safe, Google blocked this access.

I know google made changes that came into effect on September 13, 2021 but I am unsure if this is the cause of the problem.

How do I solve this issue? I am no JS expert and not that familiar with google API's

Here is the code:

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

    console.log('works');
    // 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));
    gapi.load('picker', {'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 token=gapi.auth.getToken();

        this.accessToken = token.access_token;

        this.picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.DOCS).
            setAppId(this.clientId).
            setOAuthToken(this.accessToken).

            setDeveloperKey(this.apiKey).

            setCallback(this._pickerCallback.bind(this)).
            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.DOCUMENTS][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,this.accessToken);
        }
    },

    /**
     * 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 + '.apps.googleusercontent.com',
            scope: 'https://www.googleapis.com/auth/drive.readonly',
            immediate: immediate
        }, callback);
    }
};
}());

The code used to call the picker:

 function initPicker() {
    var picker = new FilePicker({
        apiKey: '<?=$GOOGLE_FILEPICKER_API_KEY?>',
        clientId: <?=$GOOGLE_FILEPICKER_CLIENT_ID_SHORT?>,
        buttonEl: document.getElementById('pick'),
        onSelect: function(file,ac_t) {
            //console.log(file);
            //alert('Selected ' + file.id);

    var downloadUrl = file.downloadUrl ? file.downloadUrl : file.exportLinks['application/pdf'];

    var request = new XMLHttpRequest();
    request.open('GET', downloadUrl, true);
    request.responseType = 'arraybuffer';
    request.setRequestHeader('Authorization', 'Bearer ' + ac_t);
    request.addEventListener('load', function(e) {
      hideWait()
      var item = base64ArrayBuffer(e.currentTarget.response);
      //console.log(item);
      document.getElementById('p_googledrive_name').value=file.originalFilename ? file.originalFilename : (file.title + '.pdf');
      document.getElementById('p_googledrive_content').value=item;
      document.getElementById("gd-chooser-name").innerHTML = document.getElementById('p_googledrive_name').value;

      document.getElementById("db-chooser-name").innerHTML = '';
      document.getElementById("p_file").value = '';
      document.getElementById("p_dropbox_name").value = '';
      document.getElementById("p_dropbox_bytes").value = '';
      document.getElementById("p_dropbox").value = '';
    });

    showWait();
    request.send();
        }
    });
}
1 Answers

If your public application uses scopes that permit access to certain user data, it must complete a verification process. If you see unverified app on the screen when testing your application, you must submit a verification request to remove it. Find out more about unverified apps and get answers to frequently asked questions about app verification in the Help Center.

Related