Google Picker API -- 按钮点击事件

Google Picker API -- Button click event

本文关键字：事件 按钮 Picker API Google      更新时间：2023-09-26

我想知道如何在用户点击按钮后加载Google云端硬盘选择器窗口。

我使用Dropbox网站上提供的代码轻松实现了Dropbox的Chooser API。

现在，谷歌在 https://developers.google.com/picker/docs/index 提供的以下"Hello World"应用程序代码不起作用。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
      // The Browser API key obtained from the Google Developers Console.
      var developerKey = 'xxxxxxxYYYYYYYY-12345678';
      // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
      var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.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('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }
      function onAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,
              'immediate': false
            },
            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>
    <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>

我添加了我的 API 密钥和客户端 ID，然后，我没有在底部<div id="result">，而是尝试在 Bootstrap 按钮上应用代码，<button type="button" class="btn btn-danger" id="result">它不起作用。

我的问题是：有没有更好的谷歌选择器的API在按钮点击上工作的例子？

您是否尝试过将以下内容用于Google云端硬盘选择器？

<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<button  id="googleDrive" onClick="onApiLoad(); return false;" value="G_driver">Google Drive</button>
相关文章：