├── 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 |
17 |
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------