如何确定用户是不是关闭了 google auth2.signIn() 窗口？

Posted 2023-02-23

【中文标题】如何确定用户是不是关闭了 google auth2.signIn() 窗口？

【英文标题】：How to determine if google auth2.signIn() window was closed by the user?如何确定用户是否关闭了 google auth2.signIn() 窗口？

【发布时间】：2016-04-21 18:25:00

【问题描述】：

我正在使用它来实现身份验证，并且当用户单击按钮登录并显示 auth2 帐户选择/登录窗口时，当前在 React 中显示一个加载图标。

但是，如果用户关闭窗口，似乎不会触发任何事件，即返回承诺的 signIn() 函数永远不会解析，我原以为如果窗口关闭，谷歌会为此承诺返回错误。因此，我无法停止显示加载程序图标并重新显示登录菜单。

我想知道是否有人对此有解决方案？

【问题讨论】：

嗨，Deep.. 你对此有什么意见吗？

嘿，你是怎么做到的？

【参考方案1】：

我尝试修改调用 Google OAuth 2.0 窗口的代码。 您只需添加额外的 AJAX 方法即可涵盖 Google OAuth 错误结果。

gapi.auth2.getAuthInstance().signIn()

改成这个，

gapi.auth2.getAuthInstance().signIn().then(function(response)
    //If Google OAuth 2 works fine
    console.log(response);
, function(error)
    //If Google OAuth 2 occured error
    console.log(error);
    if(error.error === 'popup_closed_by_user')
        alert('Oh Dude, Why you close authentication user window...!');
    
);

就是这样... 有关 Google OAuth 2.0 信息的更多详细信息，您可以访问此链接。https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests JavaScript 示例代码：https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html

【参考方案2】：

虽然 API 提供了一种机制来检测用户何时单击拒绝按钮，但没有内置方法来检测用户是否突然关闭了弹出窗口（或退出了他们的网络浏览器，关闭了他们的计算机，以及很快）。 拒绝条件是在您想重新提示用户缩小范围时提供的（例如，您请求“电子邮件”但只需要配置文件，并且会让用户继续而不给您他们的电子邮件）。

如果登录回调的响应包含错误access_denied，则表示用户单击了拒绝按钮：

function onSignInCallback(authResult) 
  if (authResult['error'] && authResult['error'] == 'access_denied') 
    // User explicitly denied this application's requested scopes
  

应该可以在不检测窗口是否关闭的情况下实现登录；这几乎在all of the Google+ sample apps 中得到了证明。简而言之，您应该避免使用微调器，而是应该隐藏经过身份验证的 UI，直到用户成功登录。

不建议您这样做，但要实现对弹出窗口关闭的检测，您可以执行诸如覆盖全局 window.open 调用，然后 detect in window.unload 或轮询窗口是否在没有用户身份验证的情况下关闭：

var lastOpenedWindow = undefined;
window.open = function (open) 
    return function (url, name, features) 
        // set name if missing here
        name = name || "default_window_name";
        lastOpenedWindow = open.call(window, url, name, features);
        return lastOpenedWindow;
    ;
(window.open);

var intervalHandle = undefined;
function detectClose() 
  intervalHandle = setInterval(function()
    if (lastOpenedWindow && lastOpenedWindow.closed) 
      // TODO: check user was !authenticated
      console.log("Why did the window close without auth?");
      window.clearInterval(intervalHandle);
    
  , 500);

请注意，正如我已经实现的那样，这种机制是不可靠的并且受制于竞争条件。

【讨论】：

您好，感谢您的回复，但是 facebook 怎么会提供这个呢？我的页面上有 facebook 和 google auth 作为选项，如果用户关闭弹出窗口，facebook 的 signIn 方法将解析为失败。对我来说，这似乎是谷歌的一个疏忽。微调器只是向用户指示登录过程已经开始的用户体验（以防他们确实单击了另一个窗口并忘记了登录窗口）。