Google Drive Picker - Developer Key is Invalid Error

javascript google-drive-api google-picker

25,503

Solution 1

You must enable picker api:
go https://console.developers.google.com/ select your project then click APIs & auth find Google Picker API and enable it.
I add .setCallback(pickerCallback) to createPicker function and add new function (pickerCallback)
complete code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

   <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsUploadView())
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
    }

    function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
</script>
  </head>
  <body>
    <div id="result"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

enter image description here

Solution 2

I don't know if Google has changed the API's since the accepted answer, but today, in January 2015, this worked for me, where the above answers didn't:

According to the Credentials page:

Public API access

Use of this key does not require any user action or consent, does not grant access to any account information, and is not used for authorization.

Elsewhere I read that the API/Developer/Browser key is not needed if oAuthToken is used. So, I amended the above code, by simply losing the line:

.setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')

For completeness, here's the full amended code, hope it works for you:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

   <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
        <script>
            function onApiLoad() {
                gapi.load('auth', { 'callback': onAuthApiLoad });
                gapi.load('picker');
            }
            function onAuthApiLoad() {
                window.gapi.auth.authorize({
                    'client_id': '545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
                    'scope': ['https://www.googleapis.com/auth/drive']
                }, handleAuthResult);
            }
            var oauthToken;
            function handleAuthResult(authResult) {
                if (authResult && !authResult.error) {
                    oauthToken = authResult.access_token;
                    createPicker();
                }
            }
            function createPicker() {
                var picker = new google.picker.PickerBuilder()
                    //.addView(new google.picker.DocsUploadView())
                    .addView(new google.picker.DocsView())
                    .setOAuthToken(oauthToken)
                    //.setDeveloperKey('AIzaSyDPs9U-dgOC9h1jRFNwOwhRtARCph8_3HM')
                    .setCallback(pickerCallback)
                    .build();
                picker.setVisible(true);
            }

            function pickerCallback(data) {
                var url = 'nothing';
                if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                    var doc = data[google.picker.Response.DOCUMENTS][0];
                    url = doc[google.picker.Document.URL];
                }
                var message = 'You picked: ' + url;
                document.getElementById('result').innerHTML = message;
            }
        </script>
  </head>
  <body>
    <div id="result"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

Solution 3

Create and use API key for Browser application instead of API key for Server application as it is done in the images provided by you. That will solve the problem.

Thanks.

Solution 4

Check that popups aren't being blocked (there should be a popup allowing you to authorise the client app)

View more solutions

25,503

Harshit Laddha

I m a Web, Mobile & Cloud Developer based out of Bangalore, India. I love to code & develop awesome websites, apps.I am a generalist programmer with experience in multiple technologies and platforms. I have a flair for well-structured, readable, and maintainable applications and excellent knowledge of HTML, CSS, JavaScript, Python, PHP, Node.Js, SQL, MongoDB, Android (Java, Kotlin), iOS (Swift), React, Docker, AWS, GCP, etc.

Updated on July 09, 2022

Comments

Harshit Laddha almost 2 years

I started to learn Google Drive Picker API and started with my localhost (I have created my client id and browser key for the domain http://localhost/ and my files locations are localhost/ch1.html etc.

Here's the script I wrote in the body part of my document:

<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsUploadView())
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')
            .build();
        picker.setVisible(true);
    }
</script>

But when I run the doc it shows nothing. Is it like I can't use the drive api on localhost or I will have to use some button to call it or something like that please help.

Tested Example -

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

   <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsUploadView())
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setDeveloperKey('AIzaSyC4N7lg1vN6YrxcD5DDt_Iu0GXsF3QGFDU')
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
    }

    function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
</script>
  </head>
  <body>
    <div id="result"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

google-project-keys terminal-chrome list of image api's enabled

Ben Smith about 10 years

Do you get any errors in the browser debug console?
user2511140 about 10 years

Do you enable Google Picker API?
Harshit Laddha about 10 years

Yes @Fresh I got one error in the console, i attached a picture to show more about it. please check and yes user2511140 i did enable the google picker api please check the edit once and see if i am using the wrong api key or something like that as it is giving me that error
morphatic over 8 years

Note, with the new interface the link to enable the Picker API is not immediately obvious. There's a search box under API Manager > Overview > Google API's. Type "picker " into the box and it will show up. I was confused that I couldn't find it before I did that.

Harshit Laddha about 10 years

I copied this code and tried it but it says invalid api developer key thats why i am attaching an image with my credentials so that you can verify if i am using the correct key or not. and also i am getting an error in console saying ---- "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('docs.google.com') does not match the recipient window's origin ('localhost')."
Harshit Laddha about 10 years

I am making an edit in the question with the attached images please have a look
user2511140 about 10 years

above code works with my api key. problem:Your drive api key status is inactive.active it or create new key (select server or browser key)
Harshit Laddha about 10 years

I thought that inactive status is for the older key that i had. isn't that the case??? Or
Harshit Laddha about 10 years

Okay i created a new browser key and server key both with the key values and got the error again. I think i am not able to understand about the allowed referrals and the origins provided in the client id and the developer key that might be creating a problem. can you tell your allowed origins and redirect urls for localhost
user2511140 about 10 years

use my clinetId and Api key place your file in root(http://localhost/picker.html) if this works problem in your key and origins else problem in local server.my clinetId: 844456571877-216ioacquegru1n994c5tk96adtgsq2v.apps.googleuse‌rcontent.com api key: AIzaSyBbhzarsOFCrBzNSVo-_XOZ0DUlNbWJ6oA
Harshit Laddha about 10 years

Okay yeah it seems that there is problem with my origins only coz your keys work and i don't get an error. can you please tell me what origins and redirect urls you have used or a screenshot of it would do. Thank you in advance
user2511140 about 10 years

thanks for accept answer. i add images to my answer.Redirect URIs is http://localhost/ please test code with your own key on another server if not work use another google account.
Harshit Laddha about 10 years

Okay yeah, it worked when i used the server key previously i added only my local ip instead of allowing all ip's i think that was the problem
hmnhf almost 4 years

I was facing this issue on Brave browser, and as mentioned here, removing the setDeveloperKey line fixed it. However, Google Chrome didn't need this change and was working fine without it and Google's documentation doesn't have anything about the developer key being optional. (developers.google.com/picker/docs)