javascript - Google Drive Picker 示例代码我做错了什么？

Question

关于 this page有一个如何在纯 JavaScript 网页中包含 Google Drive Picker 的示例。我已将示例代码复制并粘贴到我机器上的一个文件中，并按照说明将示例字符串替换为我自己的 API key 、客户端 ID 和应用程序 ID。

如果我使用 python -m SimpleHTTPServer 8000 从本地主机提供页面，并访问该页面，它会以两种方式失败。首先，弹出的 Drive 对话框显示“出现错误!API 开发人员 key 无效。”其次，在控制台上，我看到以下错误。搜索网络告诉我，这可能是因为我使用的是非 HTTPS 连接，Google API 试图通过该连接与云端硬盘建立 HTTPS 连接。 (与他们错误的说法相反。)

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').
(anonymous) @ cb=gapi.loaded_0:46

Uncaught ReferenceError: init is not defined
    at onload (https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…22%7D))&rpctoken=6pstmf1ss7m2&rpcService=v8gvn97850jj&thirdParty=true:3:54)

如果我使用 this handy python script for an SSL web server 从本地主机提供页面，并访问页面，它以不同的方式失败。弹出的驱动器对话框显示以下内容。

400. That’s an error.

Error: origin_mismatch
Request Details
        proxy=oauth2relay379676703
        immediate=false
        scope=https://www.googleapis.com/auth/drive
        origin=https://localhost:8000
        response_type=token
        redirect_uri=postmessage
        state=912029351|0.3907265328
        client_id=[REDACTED]
        include_granted_scopes=true
        jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.en.eBn7I_cE2GI.O/m=__features__/am=AQ/rt=j/d=1/rs=AGLTcCNXKKlDNVVUdz0bvaxNh7fYe-hpSQ
        gsiwebsdk=1
That’s all we know.

虽然这似乎表明 Drive API 不想收到本地主机的消息，但我已将应用程序的凭据(在我的 Google 开发人员仪表板中)设置为接受来自 https://localhost:8000 的请求/* 和 http://localhost:8000/*。

我做错了什么？

Answer 1

您不能将本地主机用作“原始”地址 - 这是 Google API 的限制。要处理此问题，您可能需要选择 this 中建议的选项之一。问题 - 使用 URL 缩短器或配置主机文件以将自定义 URL 解析为 127.0.0.1。