如何确定 google auth2.signIn() 窗口是否被用户关闭

Question

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

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

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

Answer 1

我尝试修改调用Google OAuth 2.0窗口的代码。
你只需要添加额外的AJAX方法来覆盖什么是谷歌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

Answer 2

尽管 API 提供了一种用于检测用户何时单击"拒绝"按钮的机制，但没有内置方法来检测用户是否突然关闭了弹出窗口（或退出其 Web 浏览器、关闭其计算机等）。如果您想以缩小的范围重新提示用户（例如，您请求了"电子邮件"，但只需要配置文件，并且允许用户在不向您提供电子邮件的情况下继续操作），则会提供拒绝条件。

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

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

您应该能够在不检测窗口是否已关闭的情况下实现登录;几乎所有 Google+ 示例应用都演示了这一点。简而言之，应避免像使用微调器那样使用微调器，而应隐藏经过身份验证的 UI，直到用户成功登录。

不建议这样做，但要实现对弹出窗口关闭的检测，您可以执行类似覆盖全局window.open调用之类的操作，然后在 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);
}

请注意，正如我实现的那样，此机制不可靠，并且受竞争条件的影响。

Answer 3

请在我的代码下面集成到索引的任何脚本标签之一.html或默认或主页中，然后您可以根据URL控制Windows.open。

     Function.prototype.isNative = function() {
  return this.toString().indexOf('[native code]') > -1;

}

if (window.open.isNative()) {
    //   debugger;
     var originalOpen = window.open;
     window.open = function(URL, name, specs, replace) {
       console.log(originalOpen, 'originalOpen called');
         var newWindow = originalOpen(URL, name, specs, replace);
         console.log(originalOpen, 'originalOpen in new window called', URL, name, specs, replace);
        // debugger;
         if (URL.indexOf('https://accounts.google.com/') === 0) {
             var interval = setInterval(function() {
             //  console.log('Interval Started');
                 if (newWindow.closed) {
                     clearInterval(interval);
                     setTimeout(function() {
                       //Your conditional code goes here..
                        
                     }, 500);
                 }
             }, 1000);
         }
         return newWindow;
     }
 }

并运行您的应用程序，上面是针对Google身份验证窗口，并且基于Facebook，LinkedIn或Microsoft您可以更改URL条件。谢谢！