Google Drive Picker - Developer Key is Invalid Error

与世无争的帅哥 提交于 2019-11-28 07:27:36

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)

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!