带有 AccessToken 的 Google Picker 无法正常工作答案

【问题标题】：Google Picker with AccessToken not working带有 AccessToken 的 Google Picker 无法正常工作
【发布时间】：2017-01-12 16:29:50
【问题描述】：

我似乎无法让 Google Picker 工作。我已经使用 PHP League Oauth Provider 验证了我的用户

身份验证后，我的用户的 accessToken 看起来像这样；

ya67.Fi_dfioriogneegroig7Czdy54z0sdfdvnfr9fn38n3n93

这是我用于呈现选择器的 Javascript 和 HTML 代码；

<a href="{{ appContextInstallId }}/authenticate" class="btn info">
    <i class="icon-bolt"></i> Authenticate
</a>

<button onClick="createPicker()">Add a new document</button>

<script type="text/javascript">

    var developerKey = 'erteetr43gg-V34y4httytjyjytjyttyjyjyjjy';
    var clientId = "373498750987-5dsfwerrwewerweewrl.apps.googleusercontent.com"
    var appId = "373498750987"

    var scope = ['https://www.googleapis.com/auth/drive'];
    var pickerApiLoaded = false;

    // Use the Google API Loader script to load the google.picker script.

    // Create and render a Picker object for searching images.
    function createPicker() {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        var picker = new google.picker.PickerBuilder()
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setAppId(appId)
            .setOAuthToken("{{ token|escape }}")
            .addView(view)
            .addView(new google.picker.DocsUploadView())
            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build();

        picker.setVisible(true);
    }

    // A simple callback implementation.
    function pickerCallback(data) {
        // makes an ajax call....
    }
</script>

<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

我的 accessToken 在{{ token|escape }} 可用。

当我尝试单击“添加新文档”按钮时，出现以下错误。

未捕获的 ReferenceError: google 未在 createPicker 中定义

我不知道这是为什么。我没有正确使用访问令牌吗？

顺便说一句，我需要使用服务器端技术来处理 accessToken 业务，因为我有多个子域，你不能在 Google Dev Console 中使用通配符。因此，我不能只使用标准示例like this one 通过客户端进行身份验证。

PS - 显然，在上面的代码块中，这些不是我真正的令牌/秘密。它们已被更改。

【问题讨论】：

标签： javascript php google-authentication google-picker google-php-sdk

【解决方案1】：

您可能需要查看Google Loader Developer's Guide 以获取有关如何加载 Google API 的更详细信息。

如前所述，

要加载 API，请在网页标题中包含以下脚本。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

接下来，使用 google.load(module, version) 加载 Google API，其中

module 调用您希望在页面上使用的特定 API 模块。

version 是您要加载的模块的版本号。

调用google.load后，您可以使用网页中所有已加载的模块。

最后，您可能需要检查Available APIs，特别是Picker API Developer's Guide，并确保在创建Picker 对象时没有遗漏重要功能。

希望有帮助！

【讨论】：