Google Drive Picker - Developer Key is Invalid Error

Question

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

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 — Harshit Laddha, Mar 18 '14 at 18:22
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. — morphatic, Nov 16 '15 at 01:58

user2511140 · Accepted Answer · 2014-03-20T07:07:13.157

57

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

edited Mar 20 '14 at 07:07

answered Mar 18 '14 at 15:51

user2511140

1,658
3
26
32

1

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 ('https://docs.google.com') does not match the recipient window's origin ('http://localhost')." – Harshit Laddha Mar 18 '14 at 18:09
I am making an edit in the question with the attached images please have a look – Harshit Laddha Mar 18 '14 at 18:10
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) – user2511140 Mar 19 '14 at 08:18
I thought that inactive status is for the older key that i had. isn't that the case??? Or – Harshit Laddha Mar 19 '14 at 17:02
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 – Harshit Laddha Mar 19 '14 at 17:06
1

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.googleusercontent.com` api key: `AIzaSyBbhzarsOFCrBzNSVo-_XOZ0DUlNbWJ6oA` – user2511140 Mar 19 '14 at 22:01
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 – Harshit Laddha Mar 20 '14 at 06:26
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. – user2511140 Mar 20 '14 at 07:05
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 – Harshit Laddha Mar 20 '14 at 10:31

score 35 · Answer 2 · edited Jun 20 '20 at 09:12

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>

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. (https://developers.google.com/picker/docs) — hmnhf, Jul 17 '20 at 11:25
For me removing `setDeveloperKey` eliminated baffling "500" errors creating the Google Picker. — Rick Mohr, Apr 13 '23 at 01:51

score 1 · Answer 3 · answered Jun 29 '14 at 07:28

1

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

answered Jun 29 '14 at 07:28

Andrew Murphy

1,336
1
11
10

score 1 · Answer 4 · answered Jun 12 '15 at 14:56

1

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.

answered Jun 12 '15 at 14:56

Prakash

11
5

Google Drive Picker - Developer Key is Invalid Error

4 Answers4

Linked