I'd like to build a web application with AngularJS (client) and a RESTful API (server) using PHP + MySQL, just for studying purpose. The application must have admin panel, protected by login.
I'm using ui-router to prevent unauthorized users to access the panel, but as far as I know, every code on client side is not safe.
What if a malicious user modify the code to grant access to the panel without login? I know that the server data and code are protected, but not the HTML partials (layout is exposed), different from a common PHP application, where the views are "protected" in the server side. Should I be worried about it?
I would use $httpProvider to set up at least a basic token based login with a token/user check. You could manage the headders with an Auth service and methods like login(), logout, isLogedIn() to handle and save states to $cookies for example. This way, a malicious user could hack and gain access to the html templates, but with no database data... Minnifying your code helps avoid this risk as well.
angular.module('myApp', [])
.run(['Auth', '$location', '$rootScope', function (Auth, $location, $rootScope) {
$rootScope.$watch(function () {
if (!Auth.isLogedIn())
$location.path("/login");
return $location.path();
});
}])
.config(['$routeProvider', '$httpProvider',
function ($routeProvider, $httpProvider) {
$routeProvider
.when('/home', {templateUrl: 'partials/home.html'})
.when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'})
.when('/logout', {templateUrl: 'partials/login.html', controller: 'LogoutCtrl'})
.otherwise({redirectTo: '/home'});
$httpProvider.defaults.headers.common["Authorization"] = "";
$httpProvider.defaults.headers.common["X-User"] = "";
}
]);
From code snippet:
$httpProvider.defaults.headers.common will set a headder on each request.
$httpProvider.defaults.headers will set headder only for next request.
On run the $watch set on $rootScope will be triggered on each change to scope isLogedIn() should check the headder token with the entry in the database.
You are right about "every code on client side is not safe."
Your sider side code need to check every request for access privilege. This can be done by session, web token or even http basic authentication. It is very Not secure by restriction from your javascript (ui-router, onStateChange ...)
Related
I'm currently experimenting a little bit with my first app with angular-js, nodejs and a mongodb backend. This app and its URLs are managed by ngRoute from angular. In this app there is a little admin area with authentication (based on nodejs' client-sessions). This works so far pretty well. The authentication works with URLs managed by nodejs, but not with the ones of the routeProvider. The provider looks like this:
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.when("/main",
{
templateUrl: "app/main/landing.html",
controller: "MainController"
})
.when("/admin",
{
templateUrl: "restricted",
controller: "AdminController"
})
.when("/login",
{
templateUrl: "app/login/login.html"
})
.otherwise({redirectTo: '/main'});
}]);
The restricted area (/admin) calls a get to the server and sends the view.html if user is valid:
app.get('/restricted', function (req, res) {
if (!req.session_state.user) {
res.res.status(302).redirect("/login");//Does not really work, should redirect to login, but endless loop
} else {
res.sendFile(path.resolve(__dirname + "/../views/restricted/admin.html"));
}
});
The server's restricted folder is outside of the static area provided by nodejs.
The problem is that deep links (when calling directly '#!/admin') there is an endless loop. How can this be solved? I already tried with differnt URLs and status codes. Is this a correct approach to realize authentication with routeProvider or is there a better one?
I make a single page application with Sails and AngularJS. And now i'm trying to make an authentication.
I have this angular code on client side:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl:'pages/postList.html',
controller:'PostListController'
}).
when('/createPost', {
templateUrl:'pages/postCreation.html',
controller:'PostCreationController'
})
}])
Here all .html files are stored at assets/ folder, which is public. But i don't want to have a public access to postCreation.html, i want to permit access to this file for some users using policies.
I think i can put all .html files in views folder, create a controller methods for each file and than use policies. But i'm not sure this is a good solution.
So, how to use policies in Sails + Angular SPA?
You cannot use sails policies for this. Instead, you can use the resolve parameter in your $routeProvider.
From $routeProvider docs:
An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired.
I have something along the likes of following configured in an app of mine, which is working great (using $stateProvider, but the concept should work just as well for $routeProvider):
.state('stateOnlyCertainUsersCanSee', {
url: "/stateOnlyCertainUsersCanSee",
templateUrl: "myTemplate.html",
controller: 'myController',
resolve: {
validate: function($q, $sails, $state) {
var defer = $q.defer();
$sails.get("/me") // gets user info
.then(
function(response) {
if (response.user.canAccessThisPage) { // Condition on which to pass or fail an user
defer.resolve();
}
else {
defer.reject("No access to page");
$state.go("home"); // Redirect wherever you want
}
}
);
return defer.promise;
}
}
})
I'm following a tutorial on how to set up authentication with nodejs and passport. (http://scotch.io/tutorials/javascript/easy-node-authentication-setup-and-local)
The tutorial has me rendering templates with ejs and passing in flash data.
Instead of this, I'd like to use angularjs. The part I'm having trouble with is getting the flash data. I know how to use templates and send variables, but what in angular replaces the "req.flash('signupMessage')" in the below code?
This is the code the tutorial shows:
app.get('/signup', function(req, res) {
// render the page and pass in any flash data if it exists
res.render('signup.ejs', { message: req.flash('signupMessage') });
});
This is the code where I set up my route
// public/js/appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// show signup form
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'SignupController'
});
$locationProvider.html5Mode(true);
}]);
Here is the controller:
// public/js/controllers/SetupCtrl.js
angular.module('SignupCtrl', []).controller('SignupController', function($scope) {
$scope.tagline = 'TEST';
});
A similar question was answered here: What is the proper way to log in users using Angular & Express?
TLDR: the answer posted was to the following link, where the author describes that you need to keep all the passport stuff on the server side, and then allow the client side (angular stuff) to request information about the session.
http://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs
This might seem like a silly question.. but how do I pass req.user.username (for example) to all pages / globally after the user signs in with passport. This question can apply to any data I would like accessible for all pages...
On the server side, I have the below which sends allows routeProvider to handle all client side routing.
app.get('*',
function(req, res) {
res.sendfile('./public/index.html')
// load the single view file (angular will handle the page changes on the front-end)
})
I'm not sure if the solution is specific to passport... express or involves both...
The client side routing is handled by something like:
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {templateUrl: 'views/home.html'})
.when('/login', {templateUrl: 'views/login.html'})
.when('/users', {templateUrl: 'views/users.html', controller: 'UserController'})
...
You have two options. Either
BAD - include that data in your compiled view that is initially served (./public/index.html) or
GOOD/COMMON - fetch the data you need inside something like an Angular controller which is in your view; eg.
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: function($scope, myThings) {
//myThings is a service that async fetches some data from api
myThings().then(function(user) {
$scope.user = user;
});
}
});
This obviously means you are exposing data on an api endpoint, but how else would angular be fetching the bits it needs since you said this is a single-page app?
Services are the way to go if you want to share global data among controllers, directives and other services.
Depending upon the type of data, you can expose services that load data from the server or services which do not need to make remote call to load data (like some custom view settings).
For example if in case you want to get the current logged in user.
The first thing is to create a method on the server that return the current logged in user data in json format.
Then create something like a UserService or SessionService that call this server method to load currently loggedin user data.
Something like
angular.module('myApp').factory('SessionService',['$http',function($http) {
var service={};
service.getCurrentUser=function() {
return $http('/user');
};
return service;
}]);
Inject this service into your controllers to get the current user. You can optimize it to cache the user data.
If you want to use the data in routeProvider use the resolve property
.when('/users', {templateUrl: 'views/users.html', controller: 'UserController',
resolve: {
currentUser:function(SessionService) {
return SessionService.getCurrentUser();
}
}}})
I use angularjs with ui-router library. Lets say I have some routes for admin and some routes for user. If admin or user is logged in I want to show some page for them (admin.html for admin and user.html for user, for example), otherwise login.html
On the backend I have a special url, like /auth/status/, which gives me information about the user (if he's logged and which role he has)
There are some situations I can't figure out how to handle:
I go to '/' url. The application loads. I have a run method for my app module. But how can I check if the user is logged in, when it happens asynchronously? Well, I have this and it works somehow, but I'm not sure if this is a good solution:
app.config(['$stateProvider', '$routeProvider',
function($stateProvider, $routeProvider) {
$stateProvider
.state('admin', {
abstract: true,
url: '/',
templateUrl: 'templates/admin.html'
})
.state('admin.desktop', {
url: 'desktop',
templateUrl: 'templates/desktop.html'
});
}]);
app.run([
'$http',
'$rootScope',
'$location',
'$state',
'userRoles',
function($http, $rootScope, $location, $state, userRoles) {
var DEFAULT_ADMIN_STATE = 'admin.desktop';
var promise = $http.get('/auth/status/');
promise.then(function(response) {
$rootScope.isLogged = response.data.logged;
$rootScope.userRole = userRoles[response.data.role];
if (!$rootScope.isLogged) {
$state.transitionTo('login');
} else {
switch (response.data.role) {
case 'admin': $state.transitionTo(DEFAULT_ADMIN_STATE); break;
}
}
}, function(response) {
$location.path('/login');
});
}]);
Though I don't understand: if I go to / url I should get an error because it's abstract. Instead when $http.get request is resolved (I put 2 seconds sleep in backend to check that) I transition to admin.desktop state. I'm confused what happens in which order: state loads template or app.run function with some ajax requests...
The main question is, when I go to /#/desktop how can I first check if user is logged (send a request to /admin/auth/ and check what it returns) and only then decide what to do (transition to login or desktop state)?
I found Delaying AngularJS route change until model loaded to prevent flicker this, but again still a little fuzzy for me. Resolve property seems like a solution when I want to load a list of entities and then show the template. But I want to have some "before" function for ALL states which just checks if user is logged and has a correspond role (one moment: I do not want to use /admin/entites or /user/entities urls, want to have just /entitites. As I get it several states may have the same url). So basically it looks like if I go to /someurl I want to run method wait until it gets ajax response and after that transition to some state. Instead the state corresponding to /someurl load a template...
Also I found an article about authentication in angular but author uses cookies which is not async thing
Update: when I use cookies for checking if user is logged and I go to /#/desktop I still have it rendered, and $state.transitionTo doesn't work..
You should check it before page load:
I cannot write full example now, but in common you should do like this:
.run([ ..., function(....) {
$scope.$on('$routeChangeStart', function(next, current) {
... check cookie here ...
});
}]);