6

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.

1 Resposta 1

3

Sugiro que estude mais sobre aplicações orientado a dados. Você não precisa se preocupar com segurança de rotas no frontend porque ela não existe.

AngularJS é uma excelente ferramenta para criar Single Page Applications, ou seja, você não precisa ficar gerando novas requisições GET diretamente pelo navegador e misturando PHP com HTML/Javascript.

Comece do básico e tente ir evoluindo pouco a pouco.

  • Escreva um HTML com formulário de login
  • Escreva um controller para esse HTML que faça uma requisição Ajax e receba uma resposta 200 OK em caso de autenticação com sucesso ou 4xx error em caso de falha na autenticação.
  • Tente mover a lógica de requisição do controller para um service / factory no Angular.
  • Escreva uma função que faz uma requisição ao servidor para verificar se há uma autenticação válida (sessão ou token). Dessa forma, toda vez que o usuário carregar a aplicação pela primeira vez, você poderá verificar se há a existência de um usuário logado.
  • Armazene dados básicos do usuário logado (nome, email) nos $cookies ou $ngStorage.
  • Escreva sua primeira página Hello World, {{usuário}} para o usuário logado.

Após alcançar esses passos, você talvez perceba que é possível acessar a página do Hello World mesmo quando não se está autenticado, porém isso é uma questão de usabilidade e não segurança. A segurança deve estar contida no seu servidor (aplicação backend) porque segurança frontend é facilmente quebrável. Ou seja, preocupe-se primeiro em atingir o básico seguro (mesmo que o frontend te apresente o hello world sem autenticar), mas não mostre o nome do usuário sem autenticar (seguro). Em um segundo momento você poderá estudar sobre como garantir segurança das rotas no AngularJS. Isso não trará segurança ao seu aplicativo, mas sim uma melhor usabilidade para os usuários que não estão mal intencionados.


Quer um exemplo prático do que estou falando? Acesse https://conta.nubank.com.br/ e após o carregamento da página, apague o #login da url e digite #transactions (a URL vai ficar assim: https://conta.nubank.com.br/#/transactions). Perceba que você tem total acesso à aplicação frontend mesmo sem estar autenticado, no entanto não há nenhuma informação nessa aplicação. Os dados de todos os clientes estão seguros e a segurança frontend é mais uma questão de usabilidade do que realmente segurança.

2
  • Hoje eu já consegui desenvolver um module que está funcionando muito bem para o meu caso. Além disso, consigo bloquear o acesso à áreas que o usuário não deveria/não pode acessar. Para isso, migrei para o ui-router que tem a função de resolve que é capaz que fazer uma requisição ao meu service e verificar (com um cookie) se o usuário está autenticado e fazer liberação ou não do acesso. Mas eu, literalmente, fiz todos os passos que você descreveu. Se mais alguém tiver essa dúvida, certamente sua resposta é ótima. Commented 5/01/2016 às 15:23
  • CelsomTrindade, estou passando pelo mesmo que você e com tempo bem curto. Tem como você disponibilizar a solução encontrada? Obrigado.
    – Oli Veira
    Commented 5/07/2016 às 15:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .