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

Question

我在我的代码中为客户端 (gapi) 使用 google auth 并且我有这个 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>

正如您在上面看到的，我正在为我的登录按钮附加一个点击处理程序，它工作正常。另一部分是对于注册按钮，我必须在适用于其他身份验证(如 FB)的条件下启用/禁用按钮和相关事件。
这里的问题是一旦 attachClickHandler被调用，然后我无法取消附加它，因此如果我的条件不成立，则不应调用 Google 弹出屏幕(目前，如果它被调用一次，那么无论我的条件如何，它都会始终显示)。
有没有人知道如何实现这一目标？
谢谢

Answer 1

它看起来像 Google Sign-In API不支持取消附加点击处理程序的方法。另一方面，他们有一个 disconnect() 和 signOut() 函数，但我认为它没有达到你想要的。
一种解决方案是添加一个额外的按钮，该按钮处理加载 Google Auth API 的决定并执行对 signinButton 的点击。 signinButton 可以使用 css 隐藏。
我没有启动并运行 api，但代码应该如下所示:

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 }