AngularJS + PHP Login authentication

Question

I'm building a WebApp where i have a login page and also some user restrictions.
I have my app running perfect but now I'm stuck in the login process. The WebApp is based on AngularJs, PHP and a database with MYSQL.

Also, I'm asking this because i didn't found any good answer or work process on the first steps of the login process. Also keep in mind I'm not an AngularJs advanced user, I'm still learning, so sorry if I'm making somethins stupid.

What i have:

Right now I have a simple login system (working) using only PHP, like this:

index.php

<?php session_start();
    include ('dist/php/config.php');

    if(isset($_GET['out'])){
        session_destroy();
        back("#");
    }
    if((!empty($_POST['user'])) && (!empty($_POST['password']))){

        $p = ['user'=>$_POST['user'], 'password'=>$_POST['password']];
        $r = sql("select * from users where user= :user and password = :password",$p);
        if($r != 0){
            foreach($r as $ln){
                $_SESSION['loggedin']=$ln['name_user'];
            }
        } else {
            $msg = "<div class='login_fb'><p>User or password incorrect</p></div>";
        }
    }

    if(!empty($_SESSION['loggedin'])){
        include "system.php";
    } else { ?>

<head>
    <meta charset="UTF-8" />
    [... rest of head ...]
</head>
<body>
     [... rest of body with login form ...]
</body>
<?php } ?>

My routing system is controlled with AngularJs ui-router.

The problem this system (at least i don't know how to do it) is to keep the user data reusable even after the page refresh.

My objective

What i want is:

Login into the WebApp;
Store user data to be used in all pages; For example, it's name or it's ID;
Be able to refresh the page and don't lose the logged state;
Control the user access based on it's power level (master, admin, user, guest);
Secure Login system;
Prevent users to access a further page when changing the URL manually. For example: Typing webapp.com/#/order and with this they jump the login process;

I've alreay found some examples, but they are way to complex (i mean, lack of explanation or plain code), or have some of these failures. I also found this great answer here but it already start the explanation with user logged in.

Also, i saw some reference to use $cookieStore (or just $cookie, since it's deprecated) like this:

app.run(['loginService', function(loginService){
    var username = $cookieStore.get('username');
    var password = $cookieStore.get('password');
    loginService.login(username, password);
}]);

But is it ok to use this code? Is it safe? Because we'll have to handle the password value.

What i want to know

So, with this is mind, what i want to know is:

Is it ok, recommended or is there a better option to handle the login process than the one I'm using at the momment?
How can i prevent the users to access the WebApp without the login process?
How can i store the user data to control it's access to restricted areas or to just simple show a message with his name?
How to keep the user logged in even after the refresh?

If it's okay to stay using the same login system I'm using now, how can i keep the user information reusable trought all the other pages and also keep it reusable after a page refresh?

Hope you guys can help me.

That was what i imagined. But how should i proced with the login system in this scenario? — celsomtrindade, Sep 23 '15 at 02:14

AngularJS + PHP Login authentication

What i have:

My objective

What i want to know

0 Answers0