How to log in and maintain the session?

Question

I have a page HTML with an administration button before you have a login popup and the php from that login to is in another file. And I wanted to know how to do so that if he accepts the login, he can always press that button without always having to log in.

I know you have to do this with Session but I don’t know how to do and I can’t understand the sites I’ve been to.

Can someone tell me a website that explains how Session works or even explain?

Here is the following login code popup:

$(document).ready(function() {
	$('a.login-window').click(function() {
		var loginBox = $(this).attr('href');
		$(loginBox).fadeIn(300);
		var popMargTop = ($(loginBox).height() + 24) / 2; 
		var popMargLeft = ($(loginBox).width() + 24) / 2; 
		$(loginBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300);
		return false;
	});

	$('a.close, #mask').live('click', function() { 
	$('#mask , .login-popup').fadeOut(300 , function() {
	$('#mask').remove();  
	}); 
	return false;
	});
});

<div id="login-box" class="login-popup">
  <div id="fechar">
    <a href="federados.html" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close"></a>
  </div>
  <form method="post" class="signin" action="php/login.php">
    <fieldset class="textbox">
      <label class="username">
        <span>Nome de Utilizador:</span>
        <input id="username" name="username" type="text" autocomplete="on" placeholder="Username" required>
      </label>
      <label class="password">
        <span>Palavra-Passe:</span>
        <input id="password" name="password" type="password" placeholder="Password" required >
      </label>
      <br/>
      <input type="submit" class="submit_button" value="Iniciar Sessão"/>
      <p><a class="forgot" href="#">Forgot your password?</a></p>
    </fieldset>
  </form>
</div>

PS: The code does not work because it is a popup only works if you click the button.

Answer 1

I use to Cookies, LocalStorage or the SessionStorage to do this kind of thing.

The LocalStorage and the SessionStorage are HTML5 features and are very simple to work with. If you want the session to die after closing the browser just use Sessionstorage, otherwise use Localstorage which even closing the browser the user will remain logged in.

The big problem with these two storages is that older browsers don’t fully support it, so you need to evaluate if your user won’t use a lifetime IE7...

Cookies can be useful if you want a middle ground between Sessionstorage and Localstorage, since it is possible to set an "validity" for the Cookie.

One advantage of Cookie is that it is a feature supported by older browsers, it’s just a little boring to read and write values. I usually use a Cookie.js that I found on the internet, let me know if you need that I can include in the answer.

Anyway, you can do a little more research on each resource I’ve given you and define what will be the best strategy.

So you could basically do the authentication system the following way:

1. When authenticating, the server generates a token or some kind of unique identification for you and returns it;
2. You take this return and save it to a cookie, localstorage or sessionstorage;
3. Whenever the user goes to browse, you must recover this value, send to the server and if it is valid to complete the navigation, otherwise send to login or error screen.
4. When logging out simply delete sessionstorage, localstorage or cookie values and invalidate the token or unique identifier on the server.

I hope I’ve helped.

EDIT

PHP offers a global $_SESSION that can also help you. So it’s up to you.