Google Picker Auth Popup wird blockiert

Question

May 08, 2015, 04:03 PM

Google Picker Auth Popup wird blockiert

Ich habe eine mobile Website, auf der Jobs aufgelistet sind. Der Nutzer bewirbt sich und lädt seinen Lebenslauf hoch (Lebenslauf). Ich möchte, dass er eine Datei aus seinem Google Drive auswählen kann.

Ich habe das Hello World-Beispiel hier erstellt -https: //developers.google.com/picker/docs (Code zur Vereinfachung hier wiedergegeben)

Problem ist, dass, wenn nicht bereits in Drive angemeldet, ein Popup zum Anmelden gestartet wird. Das ist auf einem Desktop schon schlimm genug, auf einem Telefon aber wirklich schlimm.

Ich habe versuchtdiese Lösun, aber hol 'TypeError: gapi.auth ist undefiniert'

Ich habe auch versucht, den Picker von einem OnClick-Ereignis aus zu starten, anstatt den Onload, wie in den Dokumenten beschrieben.

function launchDrive()
    {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
    }
<input type='button' value='Launch Drive' onclick='launchDrive();'>

Beispiel für Google-Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <script type="text/javascript">

      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 && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && 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;
      }
    </script>
  </head>
  <body>
    <div id="result"></div>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

13 Mai 2015 bearbeiten

Neben Jasons Antwort habe ich auch Folgendes versucht (per Knopfdruck aufgerufen):

function launchDrive()
    {
        //gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.auth.init(onAuthApiLoad);
        gapi.load('picker', {'callback': onPickerApiLoad});
    }

Zu kommentieren