How to determine if the google auth2.signIn () window has been closed by the user?

Question

Im implements auth using this, and the React boot icon is currently displayed when the user clicks the login button and the auth2 account select / register window opens.

However, if the user closes the window, it seems that some event does not fire. The signIn () function that returns the promise will never be removed, I would think that google will return an error for this promise if the window is closed. As a result, I have no way to stop showing the bootloader icon and rename the login menu.

I was wondering if anyone has a solution for this?

Answer 1

Although the API provides a mechanism for detecting when the user clicks the Deny button, there is no built-in way to detect that the user has suddenly closed the pop-up window (or left his web browser, turned off his computer, and soon). The Deny condition is provided if you want to re-invite a user with limited areas (for example, you requested an "email", but you only need a profile and it will continue to work without providing you an email).

If the response from the login callback contains an access_denied error, it indicates that the user clicked the deny button:

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

You should be able to embed the input without detecting whether the window was closed; This is demonstrated by almost all Google+ application examples . In short, you should avoid using a counter like you do, and instead hide the authenticated user interface until the user logs in.

It is not recommended to do this, but in order to implement pop-up close detection, you can do something like overriding the global call to window.open and then detect in window.unload or ask if the window was closed without user authentication:

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

Please note that, as I implemented it, this mechanism is unreliable and depends on the conditions of the race.

Answer 2

I am trying to modify my code that invokes the Google OAuth 2.0 window.
You only need to add an additional AJAX method that covers what is the result of a Google OAuth error.

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

What is it...

More information about Google OAuth 2.0 can be found at this link. https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests
JavaScript code example:
https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html