CODEWITHSUNDEEP
javascriptgoogle-drive-api
Tareq Aziz
Tareq Aziz

Reputation: 351

Google drive authentication showing error "idpiframe_initialization_failed"

I am trying to use google drive javascript API. I have set the OAuth consent also. But everytime its showing error

Not a valid origin for the client and "idpiframe_initialization_failed"

what is the problem actually? I have googled, googled and googled but no solution with that. I am trying on localhost by creating a virtual host.

I am using the sample from google doc

<html>
<head></head>
<body>
    <script type="text/javascript">
    function handleClientLoad() {
        // Loads the client library and the auth2 library together for efficiency.
        // Loading the auth2 library is optional here since `gapi.client.init` function will load
        // it if not already loaded. Loading it upfront can save one network request.
        gapi.load('client:auth2', initClient);
    }

    function initClient() {
        // Initialize the client with API key and People API, and initialize OAuth with an
        // OAuth 2.0 client ID and scopes (space delimited string) to request access.
        gapi.client.init({
            apiKey: 'APIKEY',
            discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
            clientId: 'CLIENTID.apps.googleusercontent.com  ',
            scope: 'profile'
        }).then(function () {
            // Listen for sign-in state changes.
            gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

            // Handle the initial sign-in state.
            updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
    }

    function updateSigninStatus(isSignedIn) {
        // When signin status changes, this function is called.
        // If the signin status is changed to signedIn, we make an API call.
        if (isSignedIn) {
            makeApiCall();
        }
    }

    function handleSignInClick(event) {
        // Ideally the button should only show up after gapi.client.init finishes, so that this
        // handler won't be called before OAuth is initialized.
        gapi.auth2.getAuthInstance().signIn();
    }

    function handleSignOutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
    }

    function makeApiCall() {
        // Make an API call to the People API, and print the user's given name.
        gapi.client.people.people.get({
            'resourceName': 'people/me',
            'requestMask.includeField': 'person.names'
        }).then(function(response) {
            console.log('Hello, ' + response.result.names[0].givenName);
        }, function(reason) {
            console.log('Error: ' + reason.result.error.message);
        });
    }
    </script>
    <script async defer src="https://apis.google.com/js/api.js"
    onload="this.onload=function(){};handleClientLoad()"
    onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
    <button id="signin-button" onclick="handleSignInClick()">Sign In</button>
    <button id="signout-button" onclick="handleSignOutClick()">Sign Out</button>
</body>
</html>

Upvotes: 2

Views: 3041

Answers (2)

Nagy Istvan
Nagy Istvan

Reputation: 202

I had the same problem with Google Drive javascript API quick start example. I cleared Google Chrome's cache from beginning of time and after that it worked... Hope it helps! :)

Upvotes: 2

pinoyyid
pinoyyid

Reputation: 22306

You should provide the http calls and response so we can check.

However the message "Not a valid origin for the client" suggests that the URL you are serving your web page from is not one of those origins that you configrued in the API Console.

Upvotes: 0

Related Questions