问题描述
我开始学习 Google Drive Picker API 并从我的 localhost 开始(我已经为域 http://localhost/ 和我的文件位置是 localhost/ch1.html 等.
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/ and my files locations are localhost/ch1.html etc.
这是我在文档正文部分编写的脚本:
Here's the script I wrote in the body part of my document:
<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 上使用驱动 api 或者我将不得不使用一些按钮来调用它或类似的东西请帮忙.
But when I run the doc it shows nothing. Is it like I can't use the drive api on localhost or I will have to use some button to call it or something like that please help.
测试示例 -
<!DOCTYPE html> <html xmlns="http://www.51sjk.com/Upload/Articles/1/0/334/334338_20221025104853045.jpg"> <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>
推荐答案
你必须启用picker api:
去 https://console.developers.google.com/ 选择您的项目,然后点击 APIs &auth 找到 Google Picker API 并启用它.
我将 .setCallback(pickerCallback) 添加到 createPicker 函数并添加新函数 (pickerCallback)
完整代码:
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.51sjk.com/Upload/Articles/1/0/334/334338_20221025104853045.jpg"> <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>