I have a google picker API setup that is working well on my local machine. It also worked well in a deployed environment for a week or two, but now it's causing errors. I did not change anything in the google developer console prior to this new error happening.
The error I am getting is "In order to select files, you must sign in to your Google account." When you try to sign in a window flashes in the background then closes before you can see what it is. After you try a few times you get an error of:
400. That’s an error.
The server cannot process the request because it is malformed. It should not be retried. That’s all we know.
In the console, when you try to sign in an error comes up that says:
Uncaught Error: ub
at m=opnc:1061
at e.O (m=opnc:402)
at Hfa (m=opnc:405)
at Dfa (m=opnc:405)
at _.ik.Yx (m=opnc:405)
at tfa (m=opnc:396)
Any idea what I am doing wrong? Here is my code:
<script type="text/javascript">
var developerKey = my_developer_key;
var clientId = my_client_id;
var appId = my_google_app_id;
// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis.com/auth/drive.file'];
var pickerApiLoaded = false;
var oauthToken;
var tryImmediate = false;
// Use the Google API Loader script to load the google.picker script.
function loadPicker() {
oauthToken = null;
$('#select_file').focus(function() {
this.blur();
});
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': true
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
} else if (tryImmediate===false) {
// try with immediate false if user is not logged in
tryImmediate = true;
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
}
// create and render a picker object
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var folderID = my_folder_id;
var view = new google.picker.DocsView().setIncludeFolders(true).setParent(folderID);
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(view)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileName = data.docs[0].name;
var fileID = data.docs[0].id;
$('#fileName').val(fileName);
$('#fileID').val(fileID);
$('#file').text('File selected: ' + fileName);
}
validateForm()
}
</script>
Which is launched with this button:
<input id="select_file" onClick="loadPicker(); return false;" value="Select File" class="btn">
Since this is happening only for one particular user it would be best to analyze this behavior on their end and if needed reach out to Google Workspace Support by choosing one of the options from this article here.