title: Google picker auth popup is being blocked
body: <p>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.</p>
  
  <p>I've created the Hello world example here - <a href="https://developers.google.com/picker/docs/" rel="noreferrer">https://developers.google.com/picker/docs/</a> (code reproduced here for convenience) </p>
  
  <p>Problem is that if not already logged into Drive, a popup to login is launched. This is bad enough on a desktop but really bad on a phone.</p>
  
  <p>I have tried <a href="https://stackoverflow.com/questions/15657983/popup-blocking-the-gdrive-authorization-in-chrome">this solution</a>, but get 'TypeError: gapi.auth is undefined'</p>
  
  <p>I also tried launching the picker from an onclick event rather than the onload as described by the docs.</p>
  
  <pre><code>function launchDrive()
      {
          gapi.load('auth', {'callback': onAuthApiLoad});
          gapi.load('picker', {'callback': onPickerApiLoad});
      }
  &lt;input type='button' value='Launch Drive' onclick='launchDrive();'&gt;
  </code></pre>
  
  <p>Sample Google code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;Google Picker Example&lt;/title&gt;
  
      &lt;script type="text/javascript"&gt;
  
        var developerKey = 'xxxxxxxYYYYYYYY-12345678';
        var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"
        var scope = ['https://www.googleapis.com/auth/photos'];
  
        var pickerApiLoaded = false;
        var oauthToken;
  
        function onApiLoad() {
          gapi.load('auth', {'callback': onAuthApiLoad});
          gapi.load('picker', {'callback': onPickerApiLoad});
        }
  
        function onAuthApiLoad() {
          window.gapi.auth.authorize(
              {
                'client_id': clientId,
                'scope': scope,
                'immediate': false
              },
              handleAuthResult);
        }
  
        function onPickerApiLoad() {
          pickerApiLoaded = true;
          createPicker();
        }
  
        function handleAuthResult(authResult) {
          if (authResult &amp;&amp; !authResult.error) {
            oauthToken = authResult.access_token;
            createPicker();
          }
        }
  
        // Create and render a Picker object for picking user Photos.
        function createPicker() {
          if (pickerApiLoaded &amp;&amp; oauthToken) {
            var picker = new google.picker.PickerBuilder().
                addView(google.picker.ViewId.PHOTOS).
                setOAuthToken(oauthToken).
                setDeveloperKey(developerKey).
                setCallback(pickerCallback).
                build();
            picker.setVisible(true);
          }
        }
  
        // A simple callback implementation.
        function pickerCallback(data) {
          var url = 'nothing';
          if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
            var doc = data[google.picker.Response.DOCUMENTS][0];
            url = doc[google.picker.Document.URL];
          }
          var message = 'You picked: ' + url;
          document.getElementById('result').innerHTML = message;
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  
      &lt;!-- The Google API Loader script. --&gt;
      &lt;script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>13 May 2015 edit</strong></p>
  
  <p>Further to Jason's answer, here is what I also tried (called by a button oncllick):</p>
  
  <pre><code>function launchDrive()
      {
          //gapi.load('auth', {'callback': onAuthApiLoad});
          gapi.auth.init(onAuthApiLoad);
          gapi.load('picker', {'callback': onPickerApiLoad});
      }
  </code></pre>