Google Drive API，无法通过 JS 打开标准共享对话框（x-frame-options 错误）答案

【问题标题】：Google Drive API, can't open standard sharing dialog via JS (x-frame-options error)Google Drive API，无法通过 JS 打开标准共享对话框（x-frame-options 错误）
【发布时间】：2014-04-16 03:31:28
【问题描述】：

我有一个使用 Google Drive API 的 JavaScript 应用。我在这里阅读了如何打开标准共享对话框：https://developers.google.com/drive/web/manage-sharing

<head>
...
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
    init = function() {
        s = new gapi.drive.share.ShareClient('<MY_APP_ID>');
        s.setItemIds(["<MY_FILE_ID>"]);
    }
    window.onload = function() {
        gapi.load('drive-share', init);
    }
</script>
</head>
<body>
    <button onclick="s.showSettingsDialog()">Share</button>
</body>

似乎我做的一切都是正确的，当我点击我的share 按钮时，对话框开始加载但无法加载。

在我看到的控制台中：

Refused to display 'https://drive.google.com/share?...' in a frame
because it set 'X-Frame-Options' to 'SAMEORIGIN'.

我用谷歌搜索了这个错误，我发现在 SO 和其他网站中有一些类似的问题，但它们没有帮助。我猜谷歌不允许自己出现在非谷歌网站的框架中（因为“SAMEORIGIN”）。

如何在我的应用中打开共享对话框？

【问题讨论】：

如果您包含用于尝试打开标准共享对话框的代码，将会有所帮助。
@Fresh，包含代码

标签： javascript google-drive-api same-origin-policy x-frame-options

【解决方案1】：

“在您的应用中启动 Google 云端硬盘共享对话框”页面 here 声明：

启动对话框的页面的 URL 必须具有相同的来源作为为应用注册的开放 URL。

如果您随后查看“配置驱动器 SDK”here 的说明，您会看到“打开 URL”部分显示为：

Open URL 有两点需要牢记：

确保为 Open URL 提供完全限定的域名 -- localhost 不起作用。

该 URL 必须属于您。应用注册完成后，您需要验证您对该 URL 的所有权，以便创建一个 Chrome 网上应用店列表。如需更多信息，请参阅网站验证。

因此，您正在启动对话框的页面不与您在 Google Drive SDK 设置中为应用注册的打开 URL 具有相同的来源。因此，要解决您的问题，请更正 Open URL，使其具有正确的 URL，即与 Open URL 具有相同来源的 URL。请注意，您可以通过 https://console.developers.google.com/project 更改 Google Drive SDK 设置。

以及确保正确设置打开 URL。您还需要将 Drive SDK 应用 ID 替换为“MY_APP_ID”。您可以按照以下说明找到 App ID：

转到https://console.developers.google.com
点击您的项目
点击左侧的“APIs and auth”
点击“Drive SDK”设置齿轮图标
然后可以在“Google Drive SDK”标题下找到“App ID”，例如应用 ID：47XXXXXXX3

【讨论】：

我不知道站点验证，谢谢。但即使经过验证，也会出现同样的错误。打开 URL 设置正确。检查了 4 次，尝试添加和删除尾部斜杠。没有。除了标准的共享对话框之外，所有带有 gapi 的东西都可以正常工作。
您是否知道需要将“”替换为您的 Drive SDK 应用 ID？

【解决方案2】：

感谢https://stackoverflow.com/a/20742994/1185123这个回答，问题解决了

dan-man在他的回答中说：

客户 ID 您可以在 Google Cloud Console 中找到它 - 见上文。我的是一个 12 位数字，所以你的可能也是。

我的客户 ID 看起来像

175564412906-ui22fsaghkvkkj09j2bprku55m8k3d0d.apps.googleusercontent.com

我在

中使用过这个id

s = new gapi.drive.share.ShareClient('<MY_APP_ID>');

阅读答案后，我尝试仅使用客户 ID 的前 12 位数字。我没想到它会起作用，我只是绝望了。但奇怪的是，它运行良好！

如果有人能解释它为什么起作用，以及为什么文档中没有说明这一点——欢迎您回答！

【讨论】：

我已经更新了我的答案，详细说明了可以在开发者控制台中找到 APP ID 的确切位置。我同意这个例子没有明确说明在哪里可以找到它是令人困惑的。我认为文档的作者希望用户在阅读此示例时了解此信息！
感谢您的解释！从来没有在标题下看到过 App ID。
很高兴我能帮上忙。我同意 Google 文档很好，但不够详细！