防止浏览器被Google选择器弹出窗口阻塞

Question

我已经使用JavaScript在我的网站上实现了Google Picker。但是每当按下初始化Picker的按钮时，它就会被浏览器阻止。

我已经尝试了几个解决方案，如：

1. 添加client.js而不是api.js 2.设置'immediate' = false; 但它们对我没有用。请帮忙！

- aaryan

---

根据这个帖子，您需要调用gapi.auth.init来初始化授权功能。当客户端加载时调用它，以防止弹出窗口拦截gapi.auth.authorize调用时的身份验证窗口。这里还有一个示例，由本讨论建议，不会被弹出窗口拦截。 - abielita

Answer 1

我已经找到了一个解决方案，如果弹出窗口是由点击事件触发的，那么浏览器将不会阻止它，因此主要思路是初始化一次，然后通过点击事件直接触发选择器的创建。

要实现这个目标，您可以按照以下步骤操作：

1. 使用client代替auth2
2. 初始化client
3. onclick事件必须触发gapi.auth2.getAuthInstance().signIn()一次，之后必须触发google.picker.PickerBuilder()

欲了解更多信息，请参见我的GooglePicker包装器类 - gist

或者：

    var GoogleAuth;
    var oathToken;
    gapi.load('client', function () {
    gapi.client.init({client_id: "MY_CLIENT_ID", scope: "MY_SCOPE"}).then(function () {
        GoogleAuth = gapi.auth2.getAuthInstance();
        });
    });


    function pick() {
        if (!oathToken) {
            GoogleAuth.signIn().then(function () {
                const user = this.GoogleAuth.currentUser.get();
                oathToken = user.getAuthResponse().access_token;
            });
        } else {
            const picker = new google.picker.PickerBuilder()
                .addView(google.picker.ViewId.DOCS)
                .setOAuthToken(oathToken)
                .setDeveloperKey("MY_DEVELOPER_KEY")
                .setCallback((data) => myCallBack(data)).build();

            picker.setVisible(true)
            }
    }

    function myCallBack(data) {
        if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
            const docs = data[google.picker.Response.DOCUMENTS];
            const url = docs[0][google.picker.Document.URL];
            const name = docs[0][google.picker.Document.NAME];

            console.log("Picked file's name: ", name);
            console.log("Picked file's url: ", url);
            // etc...
        }
    }

- Mudafar