Javascript Google Picker在验证后不显示_Javascript_Google Api_Google Drive Api_Google Picker_Google Drive Picker

Javascript Google Picker在验证后不显示

javascript google-api google-drive-api

Javascript Google Picker在验证后不显示,javascript,google-api,google-drive-api,google-picker,google-drive-picker,Javascript,Google Api,Google Drive Api,Google Picker,Google Drive Picker,我正在尝试使用googledrive-Picker-API从我的Google-Drive浏览文件。我正在关注谷歌网页上的“Hello World”教程。出于某种原因，在我单击“验证”并选择我的帐户后，Google Picker不会弹出代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" con

我正在尝试使用

googledrive-Picker-API

从我的Google-Drive浏览文件。我正在关注谷歌网页上的“Hello World”教程。出于某种原因，在我单击“验证”并选择我的帐户后，Google Picker不会弹出

代码

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

      // The Browser API key obtained from the Google API Console.
      var developerKey = 'AIzaSyAPQ6_NT8CT7NA1yXN0vF979tuoqN4pQ64';

      // The Client ID obtained from the Google API Console. Replace with your own Client ID.
      var clientId = '475080196216-04bp4cln61011q4vsocb69gve0tvt6ek.apps.googleusercontent.com';

      // Scope to use to access user's photos.
      var scope = 'https://www.googleapis.com/auth/photos';

      var pickerApiLoaded = false;
      var oauthToken;

      // Use the API Loader script to load google.picker and gapi.auth.
      function onApiLoad() {
        gapi.load('auth2', onAuthApiLoad);
        gapi.load('picker', onPickerApiLoad);
      }

      function onAuthApiLoad() {
        var authBtn = document.getElementById('auth');
        authBtn.disabled = false;
        authBtn.addEventListener('click', function() {
          gapi.auth2.authorize({
            client_id: clientId,
            scope: scope
          }, handleAuthResult);
        });
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              addView(google.picker.ViewId.PHOTOS).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      }

      // A simple callback implementation.
      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>
    <button type="button" id="auth" disabled>Authenticate</button>

    <div id="result"></div>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>


谷歌选择器示例
//从Google API控制台获取的浏览器API密钥。
var developerKey='AIzaSyAPQ6_NT8CT7NA1yXN0vF979tuoqN4pQ64'；
//从Google API控制台获得的客户端ID。替换为您自己的客户端ID。
var clientId='475080196216-04bp4cln61011q4vsocb69gve0tvt6ek.apps.googleusercontent.com'；
//用于访问用户照片的范围。
var范围=https://www.googleapis.com/auth/photos';
var pickerApiLoaded=false；
var oauthToken；
//使用API加载程序脚本加载google.picker和gapi.auth。
函数onapioad（）{
gapi.load（'auth2'，onAuthApiLoad）；
gapi.load（'picker'，onPickerApiLoad）；
}
函数onAuthApiLoad（）{
var authBtn=document.getElementById（'auth'）；
authBtn.disabled=false；
authBtn.addEventListener（'click'，function（）{
gapi.auth2.authorize({
客户id:clientId，
范围：范围
}，handleAuthResult）；
});
}
函数onPickerApiLoad（）{
pickerApiLoaded=真；
createPicker（）；
}
函数handleAuthResult（authResult）{
if（authResult&！authResult.error）{
oauthToken=authResult.access\u令牌；
createPicker（）；
}
}
//创建并渲染用于拾取用户照片的拾取器对象。
函数createPicker（）{
if（pickeraploraded&&oauthToken）{
var picker=new google.picker.PickerBuilder（）。
addView（google.picker.ViewId.PHOTOS）。
setOAuthToken（oauthToken）。
setDeveloperKey（developerKey）。
setCallback（pickerCallback）。
build（）；
picker.setVisible（true）；
}
}
//一个简单的回调实现。
函数选择器回调（数据）{
var url='无'；
if（数据[google.picker.Response.ACTION]==google.picker.ACTION.PICKED）{
var doc=data[google.picker.Response.DOCUMENTS][0]；
url=doc[google.picker.Document.url]；
}
var message='您选择的：'+url；
document.getElementById（'result'）.innerHTML=message；
}
证明…是真实的

托管链接：
教程链接：

不知道我做错了什么。我甚至没有在控制台中得到任何错误。如果有人能告诉我如何让它工作，那将非常有帮助。谢谢

Nvm，现在它来了。不知道当时发生了什么，但我认为在第一次安装之后，您必须等待一段时间