問題描述
我有一個列出工作的移動網站，用戶申請并上傳他們的簡歷(簡歷) - 我希望他們能夠從他們的 Google Drive 中選擇一個文件.
I have a mobile site which lists jobs, the user applies and uploads their CV (resume) - I want them to be able to choose a file from their Google Drive.
我在這里創建了 Hello world 示例 - https://developers.google.com/picker/docs/(為方便起見，此處復制代碼)
I've created the Hello world example here - https://developers.google.com/picker/docs/ (code reproduced here for convenience)
問題是，如果尚未登錄云端硬盤，則會啟動一個登錄彈出窗口.這在臺式機上已經夠糟糕了，但在手機上真的很糟糕.
Problem is that if not already logged into Drive, a popup to login is launched. This is bad enough on a desktop but really bad on a phone.
我已嘗試此解決方案，但得到TypeError:gapi.auth 未定義'
I have tried this solution, but get 'TypeError: gapi.auth is undefined'
我還嘗試從 onclick 事件而不是文檔中描述的 onload 啟動選擇器.
I also tried launching the picker from an onclick event rather than the onload as described by the docs.
function launchDrive()
{
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
<input type='button' value='Launch Drive' onclick='launchDrive();'>
Google 代碼示例:
Sample Google 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">
var developerKey = 'xxxxxxxYYYYYYYY-12345678';
var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"
var scope = ['https://www.googleapis.com/auth/photos'];
var pickerApiLoaded = false;
var oauthToken;
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>
2015 年 5 月 13 日編輯
除了杰森的回答，這也是我嘗試過的(由 oncllick 按鈕調用):
Further to Jason's answer, here is what I also tried (called by a button oncllick):
function launchDrive()
{
//gapi.load('auth', {'callback': onAuthApiLoad});
gapi.auth.init(onAuthApiLoad);
gapi.load('picker', {'callback': onPickerApiLoad});
}
推薦答案
要解決您的問題，您需要了解 google 如何在您的案例中執行 oauth:
To solve your issue you need to understand how google performs oauth in your case:
- gapi 執行初始化操作
- gapi 在新的彈出窗口中打開一個 google auth 頁面，您在其中執行登錄
- 登錄成功后，gapi 會收到通知并收到您的令牌
為什么瀏覽器會在第二步中阻止彈出窗口:
Why browser blocks the popup in 2nd step:
- 窗口中不再存在原始事件(
window.event已銷毀). - 用戶手動阻止了當前站點的彈出窗口
因此，如果用戶沒有阻止彈出窗口并且您的彈出窗口仍然被阻止，gapi 操作看起來像:
So if user didn't block a popup and you popup is still blocked, gapi actions look something like:
<input type="button" onclick="auth" value="click"/>
function auth() {
setTimeout(function() {
// by this time window.event is destroyed, that's why browser blocks the popup
window.open(document.URL, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
}, 100)
}
那么你應該怎么做:
- 確保在單擊按鈕后，您不會執行任何異步操作，例如 XHRequests 或其他
- 確保在用戶單擊按鈕時已啟動并準備好 gapi，因此當 gapi 需要創建彈出窗口時，
window.event不會為空.所以將所有 gapi init 方法移動到DOMContentLoaded. - 作為另一種選擇，您可以使用服務器端 oauth 流，這意味著用戶將在當前選項卡中重定向到 gauth 頁面，而不是彈出用戶.
- Make sure that after button click you don't perform any asynchronous actions like XHRequests or other
- Make sure gapi is inited and ready by the time users click on the button, so by the time gapi needs to create a popup,
window.eventwon't be null. So move all gapi init methods toDOMContentLoaded. - As another option you could use server-side oauth flow, which means instead of popup user will be redirected in current tab to gauth page.
這篇關于Google 選擇器身份驗證彈出窗口被阻止的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！