谷歌云端硬盘选择器 - 开发者密钥无效错误

Question

谷歌云端硬盘选择器 - 开发者密钥无效错误

28

我开始学习Google Drive Picker API，并从我的localhost开始（我已经为域名http://localhost/创建了我的客户端ID和浏览器密钥，我的文件位置为 localhost/ch1.html 等。

这是我在文档正文部分编写的脚本:

<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>

但是当我运行文档时，什么也没有显示。这是因为我不能在localhost上使用Drive API，还是我需要使用某个按钮来调用它或类似的东西，请帮忙解决。

测试样例 -

<!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>

谷歌项目密钥终端Chrome 启用的图像API列表

- Harshit Laddha

您在浏览器调试控制台中是否收到任何错误信息？ - Ben Smith

4

您是否启用了“Google Picker API”？ - user2511140

是的@Fresh，控制台出现了一个错误，我附上了一张图片以更好地展示。请检查一下，是的user2511140，我已经启用了Google Picker API，请检查一下编辑，看看我是否使用了错误的API密钥或其他类似的东西，因为它给我带来了那个错误。 - Harshit Laddha

1

请注意，使用新界面时，启用Picker API的链接不是立即显而易见的。在API管理器>概述>Google API下有一个搜索框。在框中输入“picker”，它就会显示出来。在我这样做之前，我很困惑为什么找不到它。 - morphatic

4个回答

36

我不知道自从被接受的答案以来，Google是否已更改了API，但在今天的2015年1月，这对我有效，而上面的答案则没有：

根据凭据页面：

公共 API 访问

使用此密钥不需要任何用户操作或同意，不授予访问任何帐户信息的权限，也不用于授权。

我在其他地方读到，如果使用 oAuthToken，则不需要 API / Developer / 浏览器密钥。因此，我通过简单删除行来修改上面的代码：

.setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')

为了完整起见，这是完整的修改代码，希望这对你有用：

<!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>

- HeyHeyJC

1

我在Brave浏览器上遇到了这个问题，如此处所述，删除setDeveloperKey行即可解决。然而，Google Chrome不需要这种更改，并且在没有它的情况下正常工作，而Google的文档中并没有关于开发人员密钥是可选的任何内容。(https://developers.google.com/picker/docs) - hmnhf

对我来说，删除 setDeveloperKey 解决了创建 Google Picker 时令人困惑的“500”错误。 - Rick Mohr

1

创建并使用适用于浏览器应用程序的API密钥，而不是像您提供的图像中所做的那样适用于服务器应用程序的API密钥。这将解决该问题。

谢谢。

- Prakash

1

检查弹出窗口是否被阻止（应该会弹出一个允许授权客户端应用的弹出窗口）。

- Andrew Murphy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2511140 · Accepted Answer

您必须启用Picker API：
前往https://console.developers.google.com/ 选择您的项目，然后单击API和身份验证，找到Google Picker API并启用它。
我将.setCallback（pickerCallback）添加到createPicker函数中，并添加了新函数（pickerCallback）
完整代码：

<!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>

输入图像描述