发表新帖
发表新帖

Google Drive Picker - Developer Key is Invalid Error

后端 未结
关注
4 1267
旧巷少年郎
旧巷少年郎 2020-12-05 10:11

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/

相关标签:
4条回答
  • 爱一瞬间的悲伤
    2020-12-05 10:46

    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.

    0 讨论(0)
  • 青春惊慌失措
    2020-12-05 10:55

    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

    enter image description here

    0 讨论(0)
  • 逝去的感伤
    2020-12-05 10:55

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

    0 讨论(0)
  • 谎友^
    2020-12-05 10:58

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题