Skip to main content
3 de 3
Commonmark migration

Login/Autenticação com AngularJs e PHP

Bom, estou fazendo um WebApp onde tenho uma página de login antes de acessar o app e dentro do app tenho algumas áreas com restrições.
O WebApp está rodando tudo certinho, mas acabei ficando preso na hora de processar o login e fazer autenticação.

O WebApp é baseado somente em AngularJs e PHP com database em MYSQL.

O que eu tenho:

Por enquanto estou utilizando um login simples com autenticação através de PHP. Eu consigo logar e exibir o WebApp somente se estiver logado. Ok. Mas não consigo ir mais longe que isso. Um breve exemplo do código que estou utilizando:

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" />
    [... resto do head ...]
</head>
<body>
     [... resto do body com form de login ...]
</body>
<?php } ?>

O sistema de rota que uso no app é o ui-router.

O problema que tenho enfrentado por enquanto é em fazer a autenticação do usuário e manter esses dados para uso futuro. Dados como por exemplo, nome do usuário, id e categoria de permissão que ele está inserido. Inclusive manter esses dados mesmo após um refresh da página.

Meu objetivo

O que eu pretendo é o seguinte:

  • Logar no WebApp;
  • Manter os dados do usuário (como dito anteriormente) para uso futuro nas demais páginas e nas diversas ações que o usuário poderá fazer;
  • Ser possível dar refresh na página ou fechar a aba e retornar posteriormente sem perder o login (nem os dados do usuário);
  • Controlar o acesso do usuário. Ex.: liberar página X somente se o usuário for da categoria "Super Admin";
  • Impossibilitar o acesso sem passar pelo formulário. Ex.: Não ser possível acessar a página digitando diretamente na URL - Retornar com mensagem de "Você não tem permissão" ou "Você precisa estar logado".;

Eu até achei alguns exemplos e tutoriais na internet, mas eles são ou complexos demais, ou não possuem uma clara documentação para seguir, ou ainda em alguns casos, possuem algumas falhas bem prejudiciais. O melhor conteúdo que consegui foi este aqui mas a explicação já começa em um ponto mais avançado. Eu precisava mais de um guia nos passos iniciais.

Por exemplo, como fazer a validação do login baseado nos dados do formulário e depois manter isso em cache/cookis (seria isso?) para depois prosseguir com algumas áreas descritas no guia do link acima.

Também encontrei uma referência recomendando o uso de $cookie ($cookieStore ficou obsoleto, segundo os docs) deste modo:

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

Mas é correto/aconselhável utilizar deste modo? Pois estariamos manipulando a variável do password dentro do angular, isso não pode trazer riscos à segurança do login do usuário? Pelo que eu saiba, não é o ideal.

O que preciso saber:

  • Este modelo de login (através daquele código em php) que estou utilizando é o recomendável? Existe algum melhor ou mais adequado para o meu propósito?
  • Como posso prevenir o usuário de acessar alguma página do WebApp sem ter passado pelo processo de login? (acredito que seja automaticamente respondido caso eu consiga fazer o handle do login com o cache dos dados para uso em sessões futuras).
  • Como posso fazer o armazenamento desses dados do cliente (bem como do login) para que quando ele retorne à página, permaneça logado??
  • Esses dados precisam ser mantidos em todos os cenários de mudança/saída de página, desde que não haja uma saída através do 'Logout'.

Por fim, é isso. Acredito que com as informações para fazer o handle inicial eu consiga um norte para dar procedimento ao WebApp.

celsomtrindade
  • 8,2mil
  • 3
  • 37
  • 70