Google + SignIn Button Blocked Frame

I have been trying to build a kind of Hello World project using Google + SignIn. I followed the tutorial at https://developers.google.com/+/web/signin/, with my (excerpted) code being:

...
<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>
...

When I run the code in Google Chrome (Version 29.0.1547.18 dev-m), I get this error:

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.

The code in my signinCallback function is called on the page's first load, but doesn't run when the button is used for sign in. The code isn't executed until the page is reloaded.

However, this issue does not occur in Firefox, so it seems to be an error isolated to Chrome. I have not yet tested any other browsers.

Is there anyway to solve this issue?

Thanks!

回答1:

I was adapting the java hybrid server-side flow quick-start app and having the "blocked frame" error even when using https. I found that the error was triggered by this block of javascript client-side code (within the onSignInCallback function):

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

The code above is part of the quick-start app and is there for education purposes only. The error occurs when enumerating or getting a certain field within the authResult object. Removing the above code (or surrounding it with a try-catch block) solved the problem.

回答2:

Turns out that the reason that my button wasn't authenticating without a refresh was beacuse I forgot to close my <script> on my server, even though it was closed in the code in my question.

For the error it does seem like you can ignore it (thanks @Ismael Toé).