Google picker auth弹出窗口被阻止 [英] Google picker auth popup is being blocked
问题描述
我有一个列出工作的移动网站，用户申请并上传他们的简历（简历） - 我希望他们能够从他们的Google Drive中选择一个文件。
我在这里创建了Hello World示例 - https://developers.google.com/ picker / docs / （代码复制在这里为了方便）
问题是，如果尚未登录到云端硬盘，将会弹出一个登录窗口。这在桌面上已经够糟糕了，但在手机上真的很糟糕。
我试过，但得到'TypeError：gapi.auth未定义' 我也尝试过 示例Google代码： 2015年5月13日编辑 继续Jason的回答，这里是我也试过的（通过oncllick按钮调用的）： .auth.init。请参阅此处的文档： https://developers.google.com/ api-client-library / javascript / reference / referencedocs＃gapiauthinit 初始化授权功能。在客户端加载时调用此函数以防止弹出窗口阻止程序阻止gapi.auth.authorize调用上的auth窗口。 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. 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. I have tried this solution, but get 'TypeError: gapi.auth is undefined' I also tried launching the picker from an onclick event rather than the onload as described by the docs. Sample Google code: 13 May 2015 edit Further to Jason's answer, here is what I also tried (called by a button oncllick):
You will want to call gapi.auth.init. See the docs here: https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthinit Initializes the authorization feature. Call this when the client loads to prevent popup blockers from blocking the auth window on gapi.auth.authorize calls.
这篇关于Google picker auth弹出窗口被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
函数launchDrive（）
{
gapi.load（'auth'，{'callback'：onAuthApiLoad}）;
gapi.load（'picker'，{'callback'：onPickerApiLoad}）;
}
< input type ='button'value ='Launch Drive'onclick ='launchDrive（）;'>
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title> Google Picker示例< / 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;
函数onApiLoad（）{
gapi.load（'auth'，{'callback'：onAuthApiLoad}）;
gapi.load（'picker'，{'callback'：onPickerApiLoad}）;
函数onAuthApiLoad（）{
window.gapi.auth.authorize（
{
'client_id'：clientId，
'范围'：范围，
'立即'：false
}，
handleAuthResult）;
}
函数onPickerApiLoad（）{
pickerApiLoaded = true;
createPicker（）;
}
函数handleAuthResult（authResult）{
if（authResult&&！authResult.error）{
oauthToken = authResult.access_token;
createPicker（）;
}
}
//创建并呈现一个拾取器对象来拾取用户照片。
函数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）;
}
}
//一个简单的回调实现。
函数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 ='您选择了：'+ url;
document.getElementById（'result'）。innerHTML = message;
}
< / script>
< / head>
< body>
< div id =result>< / div>
<！ - Google API加载器脚本。 - >
< script type =text / javascriptsrc =https://apis.google.com/js/api.js?onload=onApiLoad>< / script>
< / body>
< / html>
函数launchDrive （）
{
//gapi.load('auth'，{'callback'：onAuthApiLoad}）;
gapi.auth.init（onAuthApiLoad）;
gapi.load（'picker'，{'callback'：onPickerApiLoad}）;
function launchDrive()
{
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
<input type='button' value='Launch Drive' onclick='launchDrive();'>
<!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>
function launchDrive()
{
//gapi.load('auth', {'callback': onAuthApiLoad});
gapi.auth.init(onAuthApiLoad);
gapi.load('picker', {'callback': onPickerApiLoad});
}
