如何在条件上附加 gapi- auth2.attachClickHandler

Question

我在我的代码中使用 google 客户端 (gapi) 身份验证并且我有这个 onLoad 事件：

<script>
    function onLoad() {
        gapi.load('auth2', function () {
            auth2 = gapi.auth2.init();
            var additionalParams = {};
            auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);
            //auth2.attachClickHandler('btnGoRegister', additionalParams, onRegisterIn, onSignInFailure);
        });
    }
</script>

正如您在上面看到的，我为我的登录按钮附加了一个点击处理程序，它工作正常。另一部分是，对于“注册”按钮，我必须 enable/disable 按钮和相关事件的条件适用于其他身份验证（如 FB）。

这里的问题是，一旦 attachClickHandler 被调用，我就无法取消附加它，所以如果我的条件不成立，那么不应调用 Google 弹出屏幕（目前，如果它被调用一次，那么无论我的情况如何，它都会一直显示）。

有人知道如何实现吗？

谢谢

Answer 1

看起来 Google Sign-In API 不支持取消附加点击处理程序的方法。另一方面，他们有一个 disconnect() & signOut() 函数，但我认为它没有达到你想要的效果。

一个解决方案是添加一个额外的按钮来处理加载 Google Auth API 的决定并执行对 signinButton 的点击。可以使用 css.

隐藏 signinButton

我没有 api up & 运行但代码应该类似于：

const GoogleSignInButton = 'signinButton';
const GoogleDecisionGateSignInButton = 'googleDecisionGateButton';

function onLoad() {
    document.getElementById(GoogleDecisionGateSignInButton).addEventListener("click", GoogleDecisionGateButton);
}

function GoogleDecisionGateButton() {
    if (ShouldUseGoogleSigninButton()) {
        LoadGoogleAuthApi();
        ClickGoogleAuthButton();
    }
}

function ShouldUseGoogleSigninButton() {
    return true; // Replace this with logic to decided if user should use Google API Auth button or not.
}

function LoadGoogleAuthApi() {
    gapi.load('auth2', function () {
        auth2 = gapi.auth2.init();
        var additionalParams = {};
        auth2.attachClickHandler(GoogleSignInButton, additionalParams, onSignIn, onSignInFailure);
        //auth2.attachClickHandler('btnGoRegister', additionalParams, onRegisterIn, onSignInFailure);
    });
}

function ClickGoogleAuthButton() {
    document.getElementById(GoogleSignInButton).click()
}

HTML:

<button id="signinButton" type="button"></button>
<button id="googleDecisionGateButton" type="button"></button>

CSS:

#signinButton { display: none !important }

如何在条件上附加 gapi- auth2.attachClickHandler

How to unattach gapi- auth2.attachClickHandler on a condtion

javascript

jquery

google-authentication

google-api-js-client