google/google-api-javascript-client

idpiframe_initialization_failed for localhost checkOrigin action

allComputableThings opened this issue · 1 comments

allComputableThings commented

Visiting http://localhost:8000

A call is made to:

https://accounts.google.com/o/oauth2/iframerpc?action=checkOrigin&origin=http%3A%2F%2Flocalhost%3A8000&client_id=<...snip...>.apps.googleusercontent.com.apps.googleusercontent.com

which returns a 401 and then the error:

{
    "error": "idpiframe_initialization_failed",
    "details": "Not a valid origin for the client: http://localhost:8000 has not been registered for client ID <..snip..>.googleusercontent.com.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."
}

is produced. However the client ID does have the Authorized JavaScript origins registered.

Image

  • Are there additional requirements not specified?
  • Does the branding or other information need to be filled for this to work?
  • Does the "audience" need to be placed into "published"?
  • Is verification required?

No amount of:

  • clearing cache
  • incognitio mode
  • different brand brower

is resolving this issue for me and it seems undebuggable.

Localhost is serving (with client_id filled) :

<!DOCTYPE html>
<html>
<head>
  <title>Google Login</title>
<meta name="google-signin-client_id" content="%(client_id)s.apps.googleusercontent.com">
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

<script>
function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

    // The ID token you need to pass to your backend:
    var id_token = googleUser.getAuthResponse().id_token;
    console.log("ID Token: " + id_token);
}

function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        console.log('User signed out.');
    });
}

function sendLogin(){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
      console.log('Signed in as: ' + xhr.responseText);Are
    };
    xhr.send('idtoken=' + id_token);
}

</script>

<div>Hi 😎</div>
</body>
</html>

Are these steps current?

https://developers.google.com/identity/sign-in/web/sign-in

suggests perhaps not and that the instruction need updating.
Image