如何阻止Google+登录按钮弹出消息“欢迎回来，您已通过Google+登录已与此应用关联...”

Question

我正在使用server-side flow将Google+登录按钮添加到我的网站。以下是我如何呈现登录按钮：

<script type="text/javascript">
    (function () {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://plus.google.com/js/client:plusone.js?onload=renderGPlus';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>

<script type="text/javascript">
    function renderGPlus() {
        gapi.signin.render('customGPlusBtn', {
            'callback': 'gPlusSignInCallback',
            'clientid': '<my_client_id>',
            'redirecturi': 'postmessage',
            'accesstype': 'offline',
            'cookiepolicy': 'single_host_origin',
            'requestvisibleactions': 'http://schemas.google.com/BuyActivity',
            'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
        });
    }
</script>

加载按钮后，它会立即检查用户是否已授权我的应用程序（立即模式）。如果用户之前已经授权我的应用程序，则会在页面底部弹出一个通知栏，其中显示消息“欢迎回来，您已通过Google+登录与此应用程序连接.....”。

反正有没有阻止此消息弹出？

Answer 1

首先，该消息仅在用户首次登录时才会显示，因为Google会识别特定的浏览器会话。换句话说，用户只有在关闭浏览器窗口并启动新的浏览器会话时才会看到该消息。

只要您看到授权结果成功返回并将用户更新为授权状态，您就应该授权用户。因此，只要出现此消息，用户就会自动登录。

由于出现的消息是告知用户他们已自动登录，因此除非您有意为明确管理其会话的用户执行此操作，否则您可能不应该禁止此消息。

但是，如果您已实现显式注销并且正在管理用户的登录状态，则以下代码更改为plusone.js同步include将禁止Toast消息。

<script src="https://apis.google.com/js/plusone.js">
  isSignedOut: true
</script>

另请注意，您不再需要管理用户的状态来签署用户。新方法gapi.auth.signOut将签署用户。你可以see a demo of signout here。

如果您正在执行异步包含，则以下全局配置标志将禁止该消息：

window.___gcfg = { isSignedOut: true };

更新：

正如Chimdi2000所指出的，这种解决方案在Chrome中不起作用。您可以添加以下CSS来隐藏生成的iframe：

iframe[src^="https://apis.google.com"] {
  display: none;
}

由于他的答案比我的答案要完整得多，并解决了其他问题，请查看。

Answer 2

就在最近，这个页面上新接受的答案隐藏了“Google登录欢迎回弹出”

window.___gcfg = { isSignedOut: true };

不起作用。

目的：在所有浏览器上“隐藏或取消Google+登录欢迎回复消息”。

如果你一直在使用`

window.___gcfg = { isSignedOut: true };

压制警告。经过认真的实验，我发现了这一点。

我建议您使用此iframe版本来禁止网页上的任何类型的Google API弹出窗口。

iframe 1：iframe[src^="https://apis.google.com"] {display: none;}这会在您的网页上隐藏来自Google API的所有弹出窗口。

iframe 2：iframe[src^="https://apis.google.com/u/0/_/sharebox"] {display: none;}这会在您的网页上隐藏所有Google的交互式共享对话框。

iframe 3：iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {display: none;}这会在您的网页上隐藏所有“Google的欢迎回复消息”弹出窗口。

iframe 4：iframe[src^="https://apis.google.com/u/0/_/+1/"] {display: none;}这会在您的网页上隐藏所有“Google的+1按钮”。

因此，对于此特定问题，请在HTML页面的Head标记中执行此操作

 <style> `iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast` </style>

测试过它，效果非常好。

Answer 3

接受的答案是正确的方法，但如果由于其他原因你只想隐藏生成的iframe，你可以用CSS做到：

iframe[src^="https://apis.google.com"] {
  display: none;
}

Answer 4

Chimdi2000的最后一个样式代码必须是：

<style>
iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {
  display: none;
}
</style>

并且运行完美。

编辑：

下面的编码也隐藏了登录按钮。

<style>
iframe[src^="https://apis.google.com"] {
    display: none;
}
</style>