Google + Signin Lock Button

Question

I am trying to create some kind of Hello World project using Google + SignIn. I completed the tutorial at https://developers.google.com/+/web/signin/ , with my (written out) code:

... <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 first page load, but it does not start when the button is used to enter. The code is not executed until the page is reloaded.

However, this problem does not occur in Firefox, so it seems to be a bug isolated from Chrome. I have not tested other browsers yet.

Is there any way to solve this problem?

Thanks!

Answer 1

It turns out that the reason my button was not authenticated without updating was incomprehensible. I forgot to close my <script> on my server, although it was closed in code in my question.

It seems to the error that you can ignore it (thanks @Ismael Toé ).

Answer 2

I adapted the java hybrid server thread quick start application and had a "locked frame" error even when using https. I found that the error was caused by this javascript client side code block (inside the onSignInCallback function):

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

This code is part of the quick launch application and is intended for educational purposes only. The error occurs when listing or getting a specific field inside an authResult object. Removing the above code (or the environment using a try-catch block) solved the problem.