Skip to content

idpiframe_initialization_failed for localhost checkOrigin action #1330

Open
@allComputableThings

Description

@allComputableThings

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions