Google Drive Picker - Developer Key is Invalid Error
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>
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>
Check that popups aren't being blocked(there should be a popup allowing you to authorise the client app)