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();
}
});
}