├── LICENSE ├── README.md ├── index.html ├── modules ├── authentication │ ├── controllers.js │ ├── services.js │ └── views │ │ └── login.html └── home │ ├── controllers.js │ └── views │ └── home.html └── scripts └── app.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Jason Watmore 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-authentication-example 2 | ============================== 3 | 4 | AngularJS Basic HTTP Authentication Example 5 | 6 | To see a demo and further details go to http://jasonwatmore.com/post/2014/05/26/AngularJS-Basic-HTTP-Authentication-Example.aspx 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularJS Basic HTTP Authentication Example 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |

19 | AngularJS Basic HTTP Authentication Example 20 |

21 |

22 | JasonWatmore.com 23 |

24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /modules/authentication/controllers.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('Authentication') 4 | 5 | .controller('LoginController', 6 | ['$scope', '$rootScope', '$location', 'AuthenticationService', 7 | function ($scope, $rootScope, $location, AuthenticationService) { 8 | // reset login status 9 | AuthenticationService.ClearCredentials(); 10 | 11 | $scope.login = function () { 12 | $scope.dataLoading = true; 13 | AuthenticationService.Login($scope.username, $scope.password, function (response) { 14 | if (response.success) { 15 | AuthenticationService.SetCredentials($scope.username, $scope.password); 16 | $location.path('/'); 17 | } else { 18 | $scope.error = response.message; 19 | $scope.dataLoading = false; 20 | } 21 | }); 22 | }; 23 | }]); -------------------------------------------------------------------------------- /modules/authentication/services.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('Authentication') 4 | 5 | .factory('AuthenticationService', 6 | ['Base64', '$http', '$cookieStore', '$rootScope', '$timeout', 7 | function (Base64, $http, $cookieStore, $rootScope, $timeout) { 8 | var service = {}; 9 | 10 | service.Login = function (username, password, callback) { 11 | 12 | /* Dummy authentication for testing, uses $timeout to simulate api call 13 | ----------------------------------------------*/ 14 | $timeout(function () { 15 | var response = { success: username === 'test' && password === 'test' }; 16 | if (!response.success) { 17 | response.message = 'Username or password is incorrect'; 18 | } 19 | callback(response); 20 | }, 1000); 21 | 22 | 23 | /* Use this for real authentication 24 | ----------------------------------------------*/ 25 | //$http.post('/api/authenticate', { username: username, password: password }) 26 | // .success(function (response) { 27 | // callback(response); 28 | // }); 29 | 30 | }; 31 | 32 | service.SetCredentials = function (username, password) { 33 | var authdata = Base64.encode(username + ':' + password); 34 | 35 | $rootScope.globals = { 36 | currentUser: { 37 | username: username, 38 | authdata: authdata 39 | } 40 | }; 41 | 42 | $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line 43 | $cookieStore.put('globals', $rootScope.globals); 44 | }; 45 | 46 | service.ClearCredentials = function () { 47 | $rootScope.globals = {}; 48 | $cookieStore.remove('globals'); 49 | $http.defaults.headers.common.Authorization = 'Basic '; 50 | }; 51 | 52 | return service; 53 | }]) 54 | 55 | .factory('Base64', function () { 56 | /* jshint ignore:start */ 57 | 58 | var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; 59 | 60 | return { 61 | encode: function (input) { 62 | var output = ""; 63 | var chr1, chr2, chr3 = ""; 64 | var enc1, enc2, enc3, enc4 = ""; 65 | var i = 0; 66 | 67 | do { 68 | chr1 = input.charCodeAt(i++); 69 | chr2 = input.charCodeAt(i++); 70 | chr3 = input.charCodeAt(i++); 71 | 72 | enc1 = chr1 >> 2; 73 | enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 74 | enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 75 | enc4 = chr3 & 63; 76 | 77 | if (isNaN(chr2)) { 78 | enc3 = enc4 = 64; 79 | } else if (isNaN(chr3)) { 80 | enc4 = 64; 81 | } 82 | 83 | output = output + 84 | keyStr.charAt(enc1) + 85 | keyStr.charAt(enc2) + 86 | keyStr.charAt(enc3) + 87 | keyStr.charAt(enc4); 88 | chr1 = chr2 = chr3 = ""; 89 | enc1 = enc2 = enc3 = enc4 = ""; 90 | } while (i < input.length); 91 | 92 | return output; 93 | }, 94 | 95 | decode: function (input) { 96 | var output = ""; 97 | var chr1, chr2, chr3 = ""; 98 | var enc1, enc2, enc3, enc4 = ""; 99 | var i = 0; 100 | 101 | // remove all characters that are not A-Z, a-z, 0-9, +, /, or = 102 | var base64test = /[^A-Za-z0-9\+\/\=]/g; 103 | if (base64test.exec(input)) { 104 | window.alert("There were invalid base64 characters in the input text.\n" + 105 | "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" + 106 | "Expect errors in decoding."); 107 | } 108 | input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 109 | 110 | do { 111 | enc1 = keyStr.indexOf(input.charAt(i++)); 112 | enc2 = keyStr.indexOf(input.charAt(i++)); 113 | enc3 = keyStr.indexOf(input.charAt(i++)); 114 | enc4 = keyStr.indexOf(input.charAt(i++)); 115 | 116 | chr1 = (enc1 << 2) | (enc2 >> 4); 117 | chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 118 | chr3 = ((enc3 & 3) << 6) | enc4; 119 | 120 | output = output + String.fromCharCode(chr1); 121 | 122 | if (enc3 != 64) { 123 | output = output + String.fromCharCode(chr2); 124 | } 125 | if (enc4 != 64) { 126 | output = output + String.fromCharCode(chr3); 127 | } 128 | 129 | chr1 = chr2 = chr3 = ""; 130 | enc1 = enc2 = enc3 = enc4 = ""; 131 | 132 | } while (i < input.length); 133 | 134 | return output; 135 | } 136 | }; 137 | 138 | /* jshint ignore:end */ 139 | }); -------------------------------------------------------------------------------- /modules/authentication/views/login.html: -------------------------------------------------------------------------------- 1 | 
2 | Username: test
3 | Password: test 4 |
5 |
{{error}}
6 |
7 |
8 | 9 | 10 | 11 | Username is required 12 |
13 |
14 | 15 | 16 | 17 | Password is required 18 |
19 |
20 | 21 | 22 |
23 |
-------------------------------------------------------------------------------- /modules/home/controllers.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('Home') 4 | 5 | .controller('HomeController', 6 | ['$scope', 7 | function ($scope) { 8 | 9 | }]); -------------------------------------------------------------------------------- /modules/home/views/home.html: -------------------------------------------------------------------------------- 1 | 

Home

2 |

You're logged in!!

3 |

Logout

4 | -------------------------------------------------------------------------------- /scripts/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // declare modules 4 | angular.module('Authentication', []); 5 | angular.module('Home', []); 6 | 7 | angular.module('BasicHttpAuthExample', [ 8 | 'Authentication', 9 | 'Home', 10 | 'ngRoute', 11 | 'ngCookies' 12 | ]) 13 | 14 | .config(['$routeProvider', function ($routeProvider) { 15 | 16 | $routeProvider 17 | .when('/login', { 18 | controller: 'LoginController', 19 | templateUrl: 'modules/authentication/views/login.html' 20 | }) 21 | 22 | .when('/', { 23 | controller: 'HomeController', 24 | templateUrl: 'modules/home/views/home.html' 25 | }) 26 | 27 | .otherwise({ redirectTo: '/login' }); 28 | }]) 29 | 30 | .run(['$rootScope', '$location', '$cookieStore', '$http', 31 | function ($rootScope, $location, $cookieStore, $http) { 32 | // keep user logged in after page refresh 33 | $rootScope.globals = $cookieStore.get('globals') || {}; 34 | if ($rootScope.globals.currentUser) { 35 | $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line 36 | } 37 | 38 | $rootScope.$on('$locationChangeStart', function (event, next, current) { 39 | // redirect to login page if not logged in 40 | if ($location.path() !== '/login' && !$rootScope.globals.currentUser) { 41 | $location.path('/login'); 42 | } 43 | }); 44 | }]); 45 | --------------------------------------------------------------------------------