javascript - How to determine if google auth2.signIn() window was closed by the user? - Stack Overflow

admin管理员组

文章数量:1287785

Im implementing auth using this and am currently showing a loading icon in React when a user clicks the button to sign in and the auth2 account selection/login window shows.

However if a user closes the window, there doesnt seem to be any event fired i.e the signIn() function which returns a promise never resolves, I would have thought google would return an error for this promise if the window is closed. As a result there is no way for me to stop showing the loader icon and reshow the login menu.

I was wondering if anyone had a solution for this?

Im implementing auth using this and am currently showing a loading icon in React when a user clicks the button to sign in and the auth2 account selection/login window shows.

However if a user closes the window, there doesnt seem to be any event fired i.e the signIn() function which returns a promise never resolves, I would have thought google would return an error for this promise if the window is closed. As a result there is no way for me to stop showing the loader icon and reshow the login menu.

I was wondering if anyone had a solution for this?

• javascript
• google-api
• google-authentication
• google-signin
• google-identity

Share Improve this question Follow edited Jan 16, 2016 at 14:31 Deep asked Jan 16, 2016 at 3:39 DeepDeep 3,07644 gold badges3636 silver badges4444 bronze badges 2

• Hi Deep.. Did u get any slolution for this? – Shinu Thomas Commented Oct 18, 2016 at 8:30
• Hey how did you acplish this? – Pragati Dugar Commented Jun 30, 2020 at 12:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I try to modifiy my code that call Google OAuth 2.0 window.
You only have to add extra AJAX method that cover what is Google OAuth error result.

gapi.auth2.getAuthInstance().signIn()

Change it to this one,

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...!');
    }
});

That's it...

For more detail about Google OAuth 2.0 information, you can visit this link.
https://developers.google./api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests
Sample code on JavaScript:
https://github./google/google-api-javascript-client/blob/master/samples/authSample.html

Although the API provides a mechanism for detecting when the user clicks the Deny button, there is not a built-in way for detecting that the user abruptly closed the popup window (or exited their web browser, shut down their puter, and so on). The Deny condition is provided in case you want to re-prompt the user with reduced scopes (e.g. you requested "email" but only need profile and will let the user proceed without giving you their email).

If the response from the sign-in callback contains the error, access_denied, it indicates the user clicked the deny button:

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

You should be able to implement sign-in without detecting whether the window was closed; this is demonstrated in virtually all of the Google+ sample apps. In short, you should avoid using a spinner as you're doing and instead should hide authenticated UI until the user has successfully signed in.

It's not remended you do this, but to implement detection of the pop-up closing, you could do something like override the global window.open call, then detect in window.unload or poll whether the window was closed without the user authenticating:

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);
}

Note that as I've implemented it, this mechanism is unreliable and subject to race conditions.

Please integrate below my code in your one of any script tag of your index.html or default or main page, and then you can control your window.open based on URL.

     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./') === 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;
     }
 }

And run your application, above is for Google authentication window, and based on facebook, LinkedIn or Microsoft you can change URL conditions. Thanks!

本文标签： javascriptHow to determine if google auth2signIn() window was closed by the userStack Overflow