On my Django site, I want to logout from the site automatically when I close the tab or browser. I mean when I close the site by closing the tab instead of using logout button, after entering the URL again, I want to see that the user has already logged out from the site to force the user to enter username and password again.
Is there a way to handle closing the tab in JQuery?
Thank you in advance.
Edit: onunload & onbeforeunload events cause to logout the user when also reloading the page.
Add your logout code to the on onunload event.
window.onunload = function () {
//logout code here...
}
In JQuery you can use the .unload() function. Remember that you don't have much time so you may send the Ajax request but the result may not reach the client.
Another trick is to open a small new window and handle the logout there.
window.open("logout url","log out","height=10,width=10,location=no,menubar=no,status=no,titlebar=no,toolbar=no",true);
If you want to disable closing the window (or at least warn the user), you can use this code:
window.onbeforeunload = function(event) {
//if you return anything but null, it will warn the user.
//optionally you can return a string which most browsers show to the user as the warning message.
return true;
}
Another trick is to keep pinging the client every few seconds. If no reply comes back, assume the user has closed the window, browser has crashed or there is a network issue that ended the chat session anyway. On the client side, if you don't receive this ping package, you can assume that network connection or server has a problem and you can show the logout warning (and optionally let the user login again).
You can use Javascript onunload & onbeforeunload events. In these events destroy the session cookie for Django.
Those events are also fired when you leave a site over a link or your browsers back button so be careful and think twice if this is really what you want.
I just ran into this. In your Django settings.py file, you can add the flag:
SESSION_EXPIRE_AT_BROWSER_CLOSE = True
This will log the user out when the browser is closed. Note that the user will remain logged in if there are other tabs or windows still open (the browser must be completely closed).
window.onunload = function () {
//logout code here...
window.open("logout url","log out","height=10,width=10,location=no,menubar=no,status=no,titlebar=no,toolbar=no",true);
}
This code works.
this will open a small pop up window for the logout url.
Related
I am new to Angular, I am developing Angular 6 application. I have used callback which called when we refresh and close page:
#HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
console.log("Processing beforeunload...");
event.returnValue = true;
}
But Now my requirement is, when we close browser then i should sign out. And i have implemented this in above code sample(Removing token from local storage).
But problem is when i refresh page this callback called and it removes token.
Is there other way to handle these two conditions using other callback??
Thanks in advance
Try Storing the token as a cookie without specifying a date,then the cookie is removed once the user quits his or her browser.So when he or she open the browser token will be no longer available and will be redirect to sign in.Hope this helps.
I've been researching this issue for quite some time now and have had no success. Hoping someone can shed some light on this!
I'm working on an Google Chrome Extension (browser action) where authentication/authorization is being done outside of Google (chrome.identity.launchwebauthflow with interactive set to true). We've had success with the authentication/authorization flow for some users but not all. Here are the interesting results:
User A clicks extension icon, clicks Authorize button, successfully gets auth code, exchanges it for access tokens, and can proceed with using the application.
User B clicks extension icon, clicks Authorize button, extension pop up closes. It fails prior to exchanging auth code for access tokens.
User B right clicks on extension icon, selects Inspect popup, clicks Authorize button, successfully gets auth code, exchanges it for access tokens, and can proceed with using the application.
User A starts up device in Safe mode with networking. User A clicks extension icon, clicks Authorize button, extension pop up closes. It fails prior to exchanging auth code for access tokens.
User A starts up device in Safe mode with networking. User A opens up a tab and loads the extension's url (chrome-extension://pathofextension). User clicks Authorize button, successfully gets auth code, exchanges it for access tokens, and can proceed with using the application.
Extension is converted to a packaged app. User A and B opens app, clicks Authorize button, successfully gets auth code, exchanges it for access tokens, and can proceed with using the application.
We think it's a client issue, but we're all using the same Chrome versions. What would cause the extension's pop up window to close when the auth code is being returned? We can't keep the developer console open to see if any errors appear because when the developer console is open it works just fine. We are using $.ajaxSetup({ cache:false }) to make sure caching is disabled for ajax requests.
Here's a snippet of the chrome.identity.launchwebauthflow call (originally called from the popup):
chrome.identity.launchWebAuthFlow({url:url,interactive:true},function(response) {
console.log('OAuth Response: '+response);
if (response) {
var authCode = encodeURIComponent(response.substring(response.indexOf('=')+1));
console.log('Auth Code: '+authCode);
userAuthorization(authCode);
} else {
authorizeButton();
}
});
Edited code after trying to apply the code-in-background solution:
Pop up script now calls background script:
chrome.runtime.sendMessage({type:'authorize',url:url},function(response) {
console.log(chrome.runtime.lastError);
console.log(response);
if (response && response.authCode) {
userAuthorization(response.authCode);
} else {
authorizeButton();
}
});
Background script responds to pop up script.
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse) {
if (message.type == 'authorize') {
var url = message.url,
authCode;
chrome.identity.launchWebAuthFlow({url:url,interactive:true},function(response) {
console.log('OAuth Response: '+response);
if (response) {
authCode = encodeURIComponent(response.substring(response.indexOf('=')+1));
console.log('Auth Code: '+authCode);
}
sendResponse({authCode:authCode});
});
}
return true;
});
Invoking launchWebAuthFlow from an extension popup is a very bad idea.
This operation is supposed to create a new window and focus on it. By Chrome UI conventions, this should close the extension popup - and with it, completely destroy the JavaScript context of that page. There will no longer be any callback to call.
This explains why "Inspect popup" helps - this prevents closing the popup on focus loss. There is no override for this mechanism outside of this debugging case.
This popup-dismissal behavior may subtly differ by OS, hence you might not have seen it on your development machine. But the convention is clear - any loss of focus should destroy the popup page.
The only truly persistent part of your extension that cannot be accidentally closed is the background script - that's where you should handle the chrome.identity authorization. Send a message from your popup code that requests it.
Update: Note that you can't return a response to sendMessage for the same reason - the popup no longer exists. Your logic should be to try to retrieve the token with interactive: false every time the popup opens - and if that fails, request the background to initiate the interactive flow (and expect to be closed, so no sendResponse).
We have some web application that allows users login and do some work.
But sometimes users work with our web site opening more then one browser and this causes us a lot of problems.
How could we implement the following - on user log in to our web site, make automatic log out in all his previously logged in browsers?
Thanks a lot.
You can use JS localStorage on page load to detect a user login, the event will be fired on every tabs or window opened within the same domain :
function storageChange(event) {
if(event.key == 'user_login') {
// logout - except current window
}
}
window.addEventListener('storage', storageChange, false);
//when user logs in
window.localStorage.setItem('user_login', true);
That will work only if the user is using the same browser multiple times.
I'm pretty new to Ember.js and ember-simple-auth, so I hope you can help me.
I'm using ember-simple-auth in my application. What I want to do is to invalidate the session when the browser is closed or the user leaves the page. This is only supposed to happen if the user previosly logged in (thats why put it in the authenticate action).
I tried something like this:
actions: {
authenticate: function() {
var _this = this;
this._super().then(null, function(message) {
_this.set('errorMessage', message);
});
$(window).on('beforeunload',function() {
_this.get("session").invalidate();
});
}
}
The problem is that it does not work when closing the browser. Also when I change the URL (to leave the application, for example www.google.com) it transitions to "/" and does not open the desired URL.
So the question is: How do I invalidate the session when the browser closes (or when the user leaves the application).
Thanks.
I'm not sure how you would handle the case when the user leaves the application (you can probably handle some navigation event and the invalidate the session with this.get("session").invalidate();). To invalidate the session when the user closes the browser though, the best solution is to use the cookie session store and configure a sessionExpirationTime of null so that the cookies are session cookies that get deleted automatically when the browser is closed.
My application uses oauth to allow a user to login to Salesforce, and after logging in, they can access the application. What currently happens is:
The user clicks the "login" link, and is redirected to Salesforce
The user logs into Salesforce, and is redirected to the URL I specified
My server processes the request and redirects them to the home page
What I would like to do is this:
The user clicks on the "login" link, and a new window (window.open) with the Salesforce login page appears
The user logs in, and is redirected to the URL I specified
Once the server redirects to the home page, the home page fires a success or logged_in event in the window, which the original page listens for and interprets
This is what I've made so far (assume there is <button id="login">Log in</button>)
$('button#login').on('click', function() {
var popup = window.open('/auth/salesforce', 'login', '...');
popup.addEventListener('success', function() {
popup.close();
alert('Logged in');
});
});
and in the home page, I added to the section that displays when a user is logged in successfully:
var event = window.createEvent('loginSuccess');
event.initEvent('success', true, true);
window.dispatchEvent(event);
However, the success event is never fired. How would I fire a success event in the home page, to alert the original page that the user is successfully logged in?
Edit: I noticed there is the window.postMessage method, as referenced in the MDN docs. Is this what I should use? Or should I use another method to capture a successful login event on the newly created window?
I recently just put the same OAuth in our application. Don't try to use a new window to auth users just like all the social networks just let the page that the user is on go to the auth screen and then redirect you back... The only other way this can be done (and i'm not sure salesforce has this yet) is a javascript auth process.
Through my research, I found that the best way to accomplish this, at least if I don't need to support IE browsers, is to look at the window.opener value, and if it exists, run a function defined in window.opener. For example,
if (window.opener) {
window.opener.userIsLoggedIn();
}
window.close();
userIsLoggedIn() would be defined in the parent window that opened the new pop-up.
With that said, a couple caveats: in certain IE environments, window.opener will lose its value due to some security restrictions, thus making window.opener null and never firing the userIsLoggedIn() method on the parent window. In these cases, I would listen for the close event on the created window, and if the userIsLoggedIn() function hasn't fired, refresh the page. A second caveat is that you will only be able to call window.opener.userIsLoggedIn() if and only if it matches the Same Origin Policy; see the Wikipedia article on the subject. If this poses an issue and you cannot work your application around these restrictions, see this project for possible workarounds/hacks.
I don't have a need to support IE so I have not created this code, but if the window.onclose method fires in IE, listen for the window.onclose event and perform your checks after this happens.