angular-passport
Angular module for PassportJS login and API auth. Strategies: Basic, JWT, Hash
Installation
npm install angular-passport
Prerequisites
Include these modules in your app because they are required for angular-passport
to work properly:
-
ngCookies (https://docs.angularjs.org/api/ngCookies)
-
ui.router (https://github.com/angular-ui/ui-router)
var clientApp = angular;
Usage
If you use Browserify
var ngPassportBasic = ngPassportBasic; /* configure */ngPassportBasic;
If you include it into HTML file (compiled version)
<script src="... /angular-passport/dist/js/ngPassport.js"></script><script> ngPassportHash;</script>
Directives
There are 2 directives in angular-passport
to generate:
-
Login Form
<!-- override default form template --> -
Logout Button
LogoutLogout<!-- override default form template -->
Regular HTML
Notice that you can also use regular HTML tags instead of angular directives. For example:
Logout
or
<!-- form created by standard HTML tags --> username: password: {{errMsg}}
Protect routes (states) and API endpoints
All API endpoints are protected by default with $http interceptor, so each $http request is added with 'Authorization' header.
Route protection is also very simple. Just add authRequired: true
inside your state definition, and state will not be accessible if authentication failed.
/* state: 'examples-spa_login_jwt_page1' * url: /examples-spa/login/jwt/page1 ************************/module { 'use strict'; return url: '/examples-spa/login/jwt/page1' views: '': templateUrl: APPCONFPATH_DIST_HTML + '/examples-spa/login/jwt/page1/page1.html' 'topmenu@examples-spa_login_jwt_page1': templateUrl: APPCONFPATH_DIST_HTML + '/examples-spa/login/jwt/_common/topmenu/topmenu.html' controller: 'TopmenuJWTCtrl' authRequired: true ;};
Basic Authentication
-
When user type username & password in login form a string 'username:password' is encoded to base64 (john:test => am9objp0ZXN0)
-
A request with header:
Authorization: Basic am9objp0ZXN0
is sent to API. -
If auth was successful API returns object
-
A cookie 'authAPI' is set with object
putLocally
. -
Angular sets up interceptor with cookie data and each $http request sent to API is intercepted with 'Authorization':'Basic am9objp0ZXN0' header
JWT Authentication
-
User type username & password and when Login button is clicked request
POST /examples/auth/passport/jwtstrategy-gettoken {username: 'john', password: 'test'}
is sent to API -
Client receives respond object from API
"isLoggedIn": true"msg": "Login was successful. JWT Token is generated and you can use it in request header to access API. Authorization: JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3YTcyNjk1MzcwYmM1MDk2MmUzNDVmZSIsImlhdCI6MTQ3Mzg2MDgyM30.R-OPMVRUXgZ2RK4iPkmEMWGbKg7iN_zJj1MA1cGBHWY""putLocally":"username": "john""authHeader": "JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3YTcyNjk1MzcwYmM1MDk2MmUzNDVmZSIsImlhdCI6MTQ3Mzg2MDgyM30.R-OPMVRUXgZ2RK4iPkmEMWGbKg7iN_zJj1MA1cGBHWY" -
Object
putLocally
is used to create cookie 'authAPI' . -
Angular sets up interceptor with cookie data and each $http request sent to API is intercepted with 'Authorization': 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3YTcyNjk1MzcwYmM1MDk2MmUzNDVmZSIsImlhdCI6MTQ3Mzg2MDgyM30.R-OPMVRUXgZ2RK4iPkmEMWGbKg7iN_zJj1MA1cGBHWY'
Hash Authentication
Notice: Hash string must be stored in database and returned by API on user's successful login
-
User type username & password and when Login button is clicked request
POST /examples/auth/passport/hashstrategy-gethash {username: 'john', password: 'test'}
is sent to API -
Client receives respond object from API
"isLoggedIn": true"msg": "Login was successful. Now you can use hash to access API endpoints. For example: /examples/auth/passport/hashstrategy/e7b1951a91718085f4382391c31ef175df72addddb""putLocally":"username": "john""hash": "e7b1951a91718085f4382391c31ef175df72addddb" -
Object
putLocally
is used to create cookie 'authAPI' . -
Angular sets up interceptor with cookie data and each $http request sent to API is intercepted by adding suffix to URL for example: GET /examples/auth/passport/hashstrategy/e7b1951a91718085f4382391c31ef175df72addddb
Preconditions
-
Directive will send 'username' and 'password' object properties to API: {username: 'john', password: 'test'} . It is also possible to define some other variable names for example 'user', 'pass' if your API requires so.
-
API response object when username and password are correct must have this format:
-
Cookie will be set with 'putLocally' object, so it must have 'username' property.
-
Configuration constants
-
NGPASSPORT_CONF_BASIC
var ngPassportBasic = ngPassportBasic;/* configure */ngPassportBasic;moduleexports = ngPassportBasic; -
NGPASSPORT_CONF_JWT
var ngPassportJWT = ngPassportJWT;/* configure */ngPassportJWT;moduleexports = ngPassportJWT; -
NGPASSPORT_CONF_HASH
var ngPassportHash = ngPassportHash;/* configure */ngPassportHash;moduleexports = ngPassportHash;