Google 选择器身份验证弹出窗口被阻止

2022-01-10 00:00:00 oauth google-drive-api popup javascript

我有一个列出工作的移动网站，用户申请并上传他们的简历(简历) - 我希望他们能够从他们的 Google Drive 中选择一个文件.

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.

我在这里创建了 Hello world 示例 - https://developers.google.com/picker/docs/(为方便起见，此处复制代码)

I've created the Hello world example here - https://developers.google.com/picker/docs/ (code reproduced here for convenience)

问题是，如果尚未登录云端硬盘，则会启动一个登录弹出窗口.这在台式机上已经够糟糕了，但在手机上真的很糟糕.

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.

我已尝试此解决方案，但得到TypeError:gapi.auth 未定义'

I have tried this solution, but get 'TypeError: gapi.auth is undefined'

我还尝试从 onclick 事件而不是文档中描述的 onload 启动选择器.

I also tried launching the picker from an onclick event rather than the onload as described by the docs.

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

Google 代码示例:

Sample 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>

2015 年 5 月 13 日编辑

除了杰森的回答，这也是我尝试过的(由 oncllick 按钮调用):

Further to Jason's answer, here is what I also tried (called by a button oncllick):

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

推荐答案

要解决您的问题，您需要了解 google 如何在您的案例中执行 oauth:

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

  • gapi 执行初始化操作
  • gapi 在新的弹出窗口中打开一个 google auth 页面，您在其中执行登录
  • 登录成功后，gapi 会收到通知并收到您的令牌

为什么浏览器会在第二步中阻止弹出窗口:

Why browser blocks the popup in 2nd step:

  • 窗口中不再存在原始事件(window.event 已销毁).
  • 用户手动阻止了当前站点的弹出窗口

因此，如果用户没有阻止弹出窗口并且您的弹出窗口仍然被阻止，gapi 操作看起来像:

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

<input type="button" onclick="auth" value="click"/>

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

那么你应该怎么做:

  • 确保在单击按钮后，您不会执行任何异步操作，例如 XHRequests 或其他
  • 确保在用户单击按钮时已启动并准备好 gapi，因此当 gapi 需要创建弹出窗口时，window.event 不会为空.所以将所有 gapi init 方法移动到 DOMContentLoaded.
  • 作为另一种选择，您可以使用服务器端 oauth 流，这意味着用户将在当前选项卡中重定向到 gauth 页面，而不是弹出用户.
  • 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.

相关文章