Restrict web app to one tab and one browser at one time - javascript

I have to restrict my app to one tab and one browser at one time. I am doing it through Javascript and cookies. Basically I am checking when a user hits my site after login if cookies are set or not. If they are then redirect to logout, otherwise set new cookies.
$(window).load(function() {
if(!$.cookie('number')) {
$.cookie('number', 1);
} else {
$.removeCookie('number');
window.location = "{{ url('/logout') }}";
}
});
When the user tries to open the web site in a new tab as a cookie is already set from the first tab then it will redirect to logout:
$(window).unload(function() {
$.removeCookie('number');
});
When user comes back to the first tab due to the focus() event it will check if a cookie is set or not. If not then it will redirect to logout
$(window).focus(function() {
if (!$.cookie('number')) {
//$.removeCookie('number');
window.location = "{{ url('/logout') }}";
}
});
My problem is that when I open a new site on my active tab, lets say I opened my web app first time then I open any other web site by typing a URL, when I come back to my site it is still showing my app although it should redirect to logout.

Related

Detects Redirect and open a modal (Popup)

I have a scenario trying to redirect DNS to another URL and i.e http://oldexample.com to another page of new website https://example.com.com/newpage
I am trying to make a script that detects traffic to https://example.com/newpage from http://oldexample.com and if it's detects that trigger to open modal/popup/alert message will saying some information on this page (https://example.com/newpage).
I have tried following solution but it does not work? Is it right way to implement it?
$(document).ready(function($) {
var isExternal = document.referrer;
console.log(isExternal);
if (isExternal === "https://oldexample.com") {
// Do something
alert('Referred from expected page. Probably.');
}
});

Messenger on different windows issue

I have a messenger on PHP/js, imported to all pages of the website. The messenger works through ajax, checking for new messages each 5 seconds.
Also I have desktop and sound notifications.
The problem is, if I opened multiple pages, and I'm currently on one of them, the reminder may come from another page, which is currently not active. However, inactive pages should notify only if the active page is not the same website.
Ideas?
Check for window focus:
var window_focus;
$(window).focus(function() {
window_focus = true;
}).blur(function() {
window_focus = false;
});
Check if location.host matches specified domain and window is focused:
if((location.host == "example.com")&&(window_focus == true))
{
//window is focused and on specified domain for that website.
//sounds, notifications, etc. here
}
Not completely sure if this is what you mean, but I hope it helps.

JavaScript code not working in Firefox for ASPX web site

I have the following JS code that helps signing out a session from an ASPX page so a 'log out' record can be stored in a database. The code works when the site is opened with IE11, EDGE, and Chrome. Using those three browsers the user gets the popup asking if staying on the site or leaving the site. When it comes to be tested in Firefox, at least version 54, it just does not work. Nothings pops up.
Code is:
//We want to capture when a user logs out from the system - this is a way to force the browser to log out the session
window.onbeforeunload = closingCode;
function closingCode() {
// when user clicks the 'X' from the browser, will be prompted to leave or to stay
//clicking any of the options will trigger an event that will capture when the session was logged out and saved in the db
var button = document.getElementById('btnLogout');
button.click();
return "You are closing or refreshing this site. Clicking 'Stay on this page' will log out your session. Clicking 'Leave this page' will close your window.";
//return null;
}
//this will prevent the popup to appear everytime user navigates between pages/links
$(document).ready(function () {
$('a[rel!=ext]').click(function () {
window.onbeforeunload = null;
});
$('form').submit(function () {
window.onbeforeunload = null;
});
});

Jquery Cookie : one time use cookie

I want to put cookie to my page.
Here's the logic :
When I load the page, I want it to load a popup or bootstrap modal. But the modal only load once when the browser is active. And only will load again when the browser tab is closed or exits the browser application. I have used session to do this, but I prefer to use cookie for personal preferences.
Is there a way to do this with javascript?
I've tried with $(window).load(), and $(window).on('beforeunload',function());
Javascript :
<script type="text/javascript">
$(window).load(function () {
if( $.cookie('firstLoad') == 'unloaded' || $.cookie('firstLoad') == 'null' || $.cookie('firstLoad') == null ) {
$('#openLoading').modal('show');
var time_exp = 1;
$.cookie('firstLoad','loaded',{ expires: time_exp });
}
});
$(window).on('beforeunload', function (){
alert($.cookie('firstLoad'));
$.cookie('firstLoad','unloaded');
});
</script>
The problem is sometimes the app browser will execute location.reload() and will reset the cookie in some way and make the popup appear again.
Please provide solution, thanks.
PS : the var time_exp and expires : time_exp is a last resort if the unload doesn't work
The beforeunload event doesn't just fire when the tab is closed. It will fire whenever the user goes to a new page in the same tab, including a page on your site. So you are resetting your cookie every time the user navigates between pages.
There is no event you can use to tell you the user is leaving your site specifically. The closest you can do is not set an expires, so that the cookie will automatically be deleted when the browser exits.
You could put a close button in the modal, and set a cookie when it is clicked so you know the user has viewed the modal and you don't need to show it again for however long you decide.

FB.login issue, need to show lightbox instead of pop-up, Javascript SDK, iFrame Application

I am developing a facebook iFrame application which would be embedded inside a facebook page. I have chosen iFrame as FBML is deprecated by facebook.
My application is ready but I am facing a small problem
when FB.login is called, a popup window appears. My application requirement is that whenever its loaded, it should check whether user is authorized or not, if not then show a Dialog asking for extended permission/login
Problem:
The Pop-up is in form of a new window which Safari blocks by default because window is open through javascript and not via click, I want it to appear as a lightbox/shadow which facebook typically shows for fbml applications
I read at http://developers.facebook.com/blog/post/312 that
Blockquote
In order to make a more consistent and secure user experience when connecting accounts, we're changing the behavior of the dialog when a user connects accounts between your site and Facebook when the user is already logged in to Facebook. Previously, the Connect with Facebook dialog appeared in an IFrame "lightbox" within the browser window. After tomorrow's weekly code push, the dialog will pop up in a separate browser window, with an address bar, which matches the user login flow when the user is not logged in to Facebook and tries to connect accounts with your site. This will also make it easier for users to identify that the URL is trustworthy and coming from Facebook.
Blockquote
But this new feature is clearly not helping me out.
Any workaround for this?
My code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ appId : '161077430577043', status : true, cookie : true, xfbml : true });
FB.getLoginStatus(function(response) {
// alert("response: " + response.session);
if (response.session) {
// alert("response of getlogin status, permissions: " + response.perms);
login();
}
else{
document.getElementById('loginStatus').innerHTML = "Login and Grant Permission";
logMeIn();
}
});
function logMeIn(){
FB.login(function(response) {
// alert("login!");
if (response.session) {
// alert("Granted permissions: " + response.perms);
login();
} else {
// alert("not logged in");
}
}, {perms:'read_stream,publish_stream,offline_access,friends_birthday,email'});
}
function login(){
FB.api('/me', function(response) {
document.getElementById('login').innerHTML="Welcome " + response.name;
});
getFriendsData();
}
function getFriendsData(){
// fetches data from Graph API
}
</script>
I figured out how to solve this.
Now I am using FBML prompt generated through PHP and signed_request for permissions.
I missed an important point that once you have permissions granted, they will be available irrespective of the sdk being used. i.e. get permission from fbml and use them with php
I think for security reasons they don't allow the login flow to go inside of an iframe. The only way around it is to redirect the user to the login page (replacing your current page). This can be done server-side or client-side.
If you fire the FB.login() call from a click event the new window shouldn't be blocked by the browser.
Something like:
<button onclick="logMeIn();">Log in with Facebook</button>
And script:
function logMeIn() {
FB.login(...);
}
From Facebook documentation (link):
As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers).

Categories