Google picker auth popup is being blocked

Question

I have a mobile site which lists jobs, the user applies and uploads their CV (resume) - I want them to be able to choose a file from their Google Drive.

I\'ve create

Answer 1

To solve your issue you need to understand how google performs oauth in your case:

• gapi performs init actions
• gapi opens a google auth page in new popup window and you perform login in it
• after login succeeded gapi gets notified and you receive your token

Why browser blocks the popup in 2nd step:

• original event is not present anymore in window (window.event is destroyed).
• User manually blocked the popup from current site

So if user didn't block a popup and you popup is still blocked, gapi actions look something like:

function auth() {
  setTimeout(function() {
     // by this time window.event is destroyed, that's why browser blocks the popup
     window.open(document.URL, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
  }, 100)
}

So what you should do:

• Make sure that after button click you don't perform any asynchronous actions like XHRequests or other
• Make sure gapi is inited and ready by the time users click on the button, so by the time gapi needs to create a popup, window.event won't be null. So move all gapi init methods to DOMContentLoaded.
• As another option you could use server-side oauth flow, which means instead of popup user will be redirected in current tab to gauth page.