DRY authentication and authorization for angular and ui-router. It uses json web tokens and http authorization header for it authentication workflow and restrict state access by permits.
Note: ngAA works only with ui-router
- Install
- Usage
- Authentication
- Permits
- $auth API
- Directives
- Configurations
- Testing
- Development
- Contribute
$ bower install --save ng-aa$ npm install --save ng-aa- Include
ngAAinto your app index.html orrequire('ng-aa')it in your application
<!doctype html>
<html ng-app="yourApp">
<head>
...
</head>
<body>
...
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-jwt/dist/angular-jwt.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/ng-aa/dist/ng-aa.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/yourApp.js -->
<script src="scripts/app.js"></script>
<!-- endbuild -->
</body>
</html>- Define your
signintemplate to be used byngAAatviews/signin.html
Note!userin signin is no longer restricted toemailandpasswordyou can use any structure applicable to yourAPIor backend.
<form ng-submit="signin()" role="form" autocomplete="off">
<legend>Login</legend>
<div class="form-group">
<label for="email">Email</label>
<input ng-model="user.email" type="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input ng-model="user.password" type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>- Require
ngAAmodule into your angular application or module and define your redirect states
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
//configure after user signin redirect state
$authProvider.afterSigninRedirectTo = 'contact';
//configure after user signout redirect state
$authProvider.afterSignoutRedirectTo = 'main';
});- Define your application states and include
permitsorauthenticateddefinitions to restrict access.
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
data:{
authenticated:true //check for authenticity only
}
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
data: {
permits: { //check for authenticity and permissions
withOnly: 'Post:delete'
}
}
})
.state('contact', {
url: '/contact',
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
data: {
permits: { //check for authenticity and permissions
withAll: ['Post:create','Post:edit']
}
},
resolve: {
profile: function($q, $auth) {
return $auth.getProfile();
}
}
});- Implements your backend signin end point
ngAAexpect you to implement your backend end point using your language of choice. It will send user credentials for signin in the following format
{
email:'user email',
password:'password'
}
// or your custom structure
{
username:'',
password:''
}In return it expect the following response format
{
token:'your jwt valid token',
user:{
....,
permissions:[...]
}
}ngAA can restrict state transition to only authenticated user using authenticated:true state data. To ensure authenticity on state define it as below:
'use strict';
angular
.module('ngAPP', [
'ui.router',
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
data: {
authenticated:true
}
});
...
});ngAA restrict state transition to only allowed user using permits state data. If there is no permits state data, ngAA wont protect the state. You should define your permits using one the following:
Which tells ngAA to allow user with only provided permission to access the state. To tell ngAA to permit user with only one permission in your state definition, you do as bellow:
'use strict';
angular
.module('ngAPP', [
'ui.router',
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
data: {
permits: {
withOnly: 'Post:delete'
}
}
});
...
});Which tells ngAA to allow user with all given permissions to access the state. To tell ngAA to permit user with all given permissions in your state definition, you do as bellow:
'use strict';
angular
.module('ngAPP', [
'ui.router',
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
data: {
permits: {
withAll: ['Post:delete','Post:create']
}
}
});
...
});Which tells ngAA to allow user with any of the given permissions to access the state. To tell ngAA to permit user with any of the given permissions in your state definition, you do as bellow:
'use strict';
angular
.module('ngAPP', [
'ui.router',
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
data: {
permits: {
withAny: ['Post:delete','Comment:delete']
}
}
});
...
});ngAA $auth service expose the following API to be used.
Used to signout current signin user.
$auth
.signout()
.then(function() {
//your codes
...
})
.catch(function(error) {
//catch errors
...
});Used to check if user is authenticated.
$auth
.isAuthenticated()
.then(function(isAuthenticated) {
//your codes
...
})
.catch(function(error) {
//catch errors
...
});This is the synchronous version of isAuthenticated.
$rootScope.isAuthenticated = $auth.isAuthenticatedSync();Used to get current user claim from the token.
$auth
.getClaim()
.then(function(claim) {
//your codes
...
})
.catch(function(error) {
//catch errors
...
}); Used to get current user profile. Its highly recommended to use getProfile in your state resolve properties to get the current user profile.
$stateProvider
.state('contact', {
url: '/contact',
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
data: {
permits: {
withOnly: 'Post:create'
}
},
resolve: {
profile: function($q, $auth) {
return $auth.getProfile();
}
}
}); Used to check if user has a given permission.
$auth
.hasPermission('Post:create')
.then(function(hasPermission) {
//your codes
...
})
.catch(function(error) {
//catch errors
...
}); Used to check if user has all permissions
$auth
.hasPermissions(['Post:create','Post:edit'])
.then(function(hasPermission) {
//your codes
...
})
.catch(function(error) {
//catch errors
...
}); Used to check if user has any of the permissions
$auth
.hasAnyPermission(['Post:create','Post:edit'])
.then(function(hasPermission) {
//your codes
...
})
.catch(function(error) {
//catch errors
...
}); ngAA provide a signout directive which can be used in templates to signout the current sign-in user
<li ng-show="isAuthenticated">
<a data-signout>Signout</a>
</li>ngAA provide a show-if-has-permit directive which can be used in templates to show or hide HTML elements when current signed in user has a given permission.
<li show-if-has-any-permit="Post:delete">
...
</li>ngAA provide a show-if-has-permits directive which can be used in templates to show or hide HTML elements when current signed in user has all of the provided permissions.
<li show-if-has-permits="Post:view, Comment:create">
...
</li>ngAA provide a show-if-has-any-permit directive which can be used in templates to show or hide HTML elements when current signed in user has any of the provided permissions.
<li show-if-has-any-permit="Post:view, Comment:create">
...
</li>Out of the box ngAA will work if you follow its convection. But it is also an optionated and allows you to override its configuration through its $authProvider. Below is the detailed configuration options that you may override
Specify which state to redirect user after signin successfully. Default to home. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.afterSigninRedirectTo = 'dashboard';
});Specify to which state to redirect user after signout. Defaults to signin.
You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.afterSignoutRedirectTo = 'site';
});Specify your backend end-point to be used by ngAA to signin your user. Default to /signin. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.signinUrl = '/auth/signin';
});Specify signin state to be used when ngAA when configuring it ngAAAuthCtrl. Default to signin. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.signinState = 'auth.signin';
});Specify a signin route to be used with ngAAAuthCtrl internally. Default to /signin. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.signinRoute = '/auth/signin';
});This is a required configuration which specify where you have put your user signin template. Default to views/signin.html. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.signinTemplateUrl = 'views/auth/signin.html';
});A prefix to be used to prefix token and user profile in storage. Default to ngAA. Its highly advisable to use another prefix mostly your application name. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.tokenPrefix = 'yourApp';
});Specify which key to use to retrieve token from the json response from the backend server. Default to token. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.tokenName = 'token';
});Specify which key to use to retrieve user profile from the json response from the backend server. Default to user. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.profileKey = 'profile';
});Specify which storage you want to use to store user token and profile. There are only two option here, either localStorage or sessionStorage and default to localStorage. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.storage = 'sessionStorage';
});Http Authorization header to be set-ed into request header before sent to the backend. Its the one that will carry authenticity token and your can check it in your backend logic. Default to Authorization. You can override this default on your module config as:
angular
.module('yourApp',[
'ngAA'
])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.authHeader = 'your authorization header name';
});- Clone this repository
- Install all development dependencies
$ npm install && bower install- Then run test
$ npm testngAA repository has a example witch can lauched by
$ grunt servethen supply any email and password
ngAA has set of useful grunt tasks to help you with development. By running
$ gruntngAA will be able watch your development environment for file changes and apply jshint and karma to the project.
Fork this repo and push in your ideas. Do not forget to add a bit of test(s) of what value you adding.
Copyright (c) 2015 lykmapipo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent