javascript - 谷歌选择器身份验证弹出窗口被阻止

标签 javascript oauth popup google-drive-api

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

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

问题是,如果尚未登录到云端硬盘,则会启动一个登录弹出窗口。这在台式机上已经够糟糕了,但在手机上就更糟糕了。

我试过 this solution ,但得到“TypeError: gapi.auth is undefined”

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

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

示例谷歌代码:

<!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 日编辑

除了 Jason 的回答之外,这是我也尝试过的方法(通过按钮 oncllick 调用):

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

最佳答案

您需要调用 gapi.auth.init。请在此处查看文档:https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthinit

Initializes the authorization feature. Call this when the client loads to prevent popup blockers from blocking the auth window on gapi.auth.authorize calls.

关于javascript - 谷歌选择器身份验证弹出窗口被阻止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30125804/

相关文章:

javascript - 将 json 对象从 android(java) 传递到 Webview 中的 javascript

javascript - 是否可以使用 office 加载项复制 excel 公式?

javascript - 弹出编码避免浏览器阻塞

javascript 弹出问题 在 Internet Explorer 中!

javascript - Leaflet - 获取弹出窗口中标记的纬度和经度

javascript - 删除新行,除非新行前面有双空格

javascript - Angular获取特定文件夹内的所有文件名

ASP.NET Web API : OAuth service provider

c# - JWT 有什么安全保障?

api - Google品牌帐户控制台/获取YouTube品牌帐户的OAuth 2.0客户端 secret ?