谷歌+登录按钮被阻止在框架中

Question

我一直在尝试使用Google + SignIn构建一种“Hello World”项目。我按照https://developers.google.com/+/web/signin/上的教程进行操作，以下是我的（摘录的）代码：

...
<script>
        function signinCallback(authResult) {
        //location.reload();
        //var x = 0
        //while(x=0){
            if (authResult['access_token']) {
                // Successfully authorized
                 // Hide the sign-in button now that the user is authorized, for example:
                 document.getElementById('signinButton').setAttribute('style', 'display: none');
                //document.getElementById("secret").innerHTML = ("<a href="secret.html"><p>Non-Conspicuous Link to Super Secret Page</p></a>");
                //alert("IT WORKED");
                document.getElementById("secret").innerHTML=("Non-Conspicuous Link to Super Secret Page");
                document.getElementById("game").innerHTML=("Non-Conspicuous Link to Super Secret Game Page");
                document.getElementById('refresh').setAttribute('style', 'display: none');
                //alert("Please Refresh");
                 } else if (authResult['error']) {
                 // There was an error.
                 // Possible error codes:
                 //   "access_denied" - User denied access to your app
                 //   "immediate_failed" - Could not automatically log in the user
                 console.log('AuthERROR: ' + authResult['error']);
                //alert("ERROR: A team of poorly trained robots has been dispatched to handle the situation. If they arive, tell them '" + authResult['error'] + "'");
              }
            }
        </script>
...
<span id="signinButton">
        <span 
            class="g-signin"
            data-callback="signinCallback"
            data-clientid="CLIENT ID"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://schemas.google.com/AddActivity"
            data-scope="https://www.googleapis.com/auth/plus.login"
            data-width="wide"
            data-theme="light">
        </span>
...
<a href="secret.html"><p id="secret"></p></a>
...

当我在Google Chrome（版本29.0.1547.18 dev-m）中运行代码时，会出现以下错误：

Blocked a frame with origin "https://accounts.google.com" from accessing a frame with origin "https://apis.google.com". Protocols, domains, and ports must match.

我的signinCallback函数中的代码在页面第一次加载时被调用，但当按钮用于登录时不会运行。该代码直到重新加载页面后才被执行。

然而，在Firefox中没有出现这个问题，所以似乎是Chrome独有的错误。我还没有测试其他浏览器。

有没有什么方法可以解决这个问题呢？

谢谢！

- timtim17

---

@BrettJ 回调函数应该被调用，其中 authResult['error'] = 'immediate_failed'，并且还应该在成功登录时被调用（access_token 的值已更改？）。但是，在 Chrome 中它没有被调用。 - timtim17

@BrettJ 我正在本地服务器上托管页面，API控制台中只指定' http://localhost '作为源是否可以？ - timtim17

是的，您可以列出http：/ / localhost（如果适用，也可以在特定端口上），但是当您进入生产环境时，您会希望将其删除，因为如果您的客户端ID被盗，其他人可以通过从localhost执行操作来使用您的配额。 - BrettJ

@BrettJ 我理解，但我仍然想知道这个问题是否可以解决。如果我只在本地服务器上托管而不是在生产环境中，API控制台中的localhost来源是否重要？ - timtim17

似乎你可以忽略它。https://dev59.com/JWoy5IYBdhLWcg3wq_0k?rq=1 - tsil

Answer 1

我正在调整java混合服务器端流快速启动应用程序，即使使用https仍然遇到“阻止框架”错误。 我发现这个错误是由客户端javascript代码块（在onSignInCallback函数内部）触发的：

for (var field in authResult) {
  $('#authResult').append(' ' + field + ': ' +
      authResult[field] + '<br/>');
}

上面的代码是快速启动应用程序的一部分，仅供教育目的。当枚举或获取authResult对象中的特定字段时，会发生错误。删除上述代码（或将其包围在try-catch块中）可以解决该问题。

- Marquez

---

我遇到了类似的问题，因为我将authResult作为jQuery XHR的data参数传递。内部的jQuery会对data属性进行迭代，这导致了上述错误。非常好的发现！ - Nick Tomlin

哎呀。该响应包含对子窗口的引用，由于同源策略被阻止时无法被父级访问。我遇到了这个问题，试图将OAuth响应序列化以将其保留在本地存储中。只要跳过名为“g-oauth-window”的属性，我就能得到所需的内容。 - Stephen Crosby

Answer 2

原来我的按钮没有刷新就无法验证的原因是因为我忘记在服务器上关闭我的<script>，即使在我的问题代码中已经关闭了。

对于这个错误，似乎可以忽略它（感谢@Ismael Toé）。

- timtim17