How do I get basic auth working in angularjs?

后端 未结 1 1916
醉酒成梦
醉酒成梦 2020-11-28 05:43

How can I get basic auth working in AngularJs? I\'ve googled and the resources aren\'t working for me. I\'m very new to AngularJS

相关标签:
1条回答
  • 2020-11-28 06:18

    Assuming your html is defined like this:

    <!doctype html>
    <html ng-app="sandbox-app">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="todo.js"></script>
        <link rel="stylesheet" href="todo.css">
    </head>
    <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
        <ol>
    ...
        </ol>
    </div>
    </body>
    </html>
    

    You can make your backend connect to a rest api using basic auth like this:

    var app = angular.module('sandbox-app', []);
    app.config(function($httpProvider) {
    
    });
    
    app.factory('Base64', function() {
        var keyStr = 'ABCDEFGHIJKLMNOP' +
                'QRSTUVWXYZabcdef' +
                'ghijklmnopqrstuv' +
                'wxyz0123456789+/' +
                '=';
        return {
            encode: function (input) {
                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;
    
                do {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
    
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
    
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
    
                    output = output +
                            keyStr.charAt(enc1) +
                            keyStr.charAt(enc2) +
                            keyStr.charAt(enc3) +
                            keyStr.charAt(enc4);
                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";
                } while (i < input.length);
    
                return output;
            },
    
            decode: function (input) {
                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;
    
                // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
                var base64test = /[^A-Za-z0-9\+\/\=]/g;
                if (base64test.exec(input)) {
                    alert("There were invalid base64 characters in the input text.\n" +
                            "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                            "Expect errors in decoding.");
                }
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    
                do {
                    enc1 = keyStr.indexOf(input.charAt(i++));
                    enc2 = keyStr.indexOf(input.charAt(i++));
                    enc3 = keyStr.indexOf(input.charAt(i++));
                    enc4 = keyStr.indexOf(input.charAt(i++));
    
                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;
    
                    output = output + String.fromCharCode(chr1);
    
                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }
    
                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";
    
                } while (i < input.length);
    
                return output;
            }
        };
    });
    
    //here's where YOUR code is finally accessed
    function TodoCtrl($scope, $http, Base64) {
    
        $http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; //you probably don't need this line.  This lets me connect to my server on a different domain
        $http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('admin' + ':' + 'abc12345');
        $http({method: 'GET', url: 'http://localhost:8888/app/api/v1/pets'}).
                success(function(data, status, headers, config) {
                    $scope.pets = data;
                    // this callback will be called asynchronously
                    // when the response is available
                }).
                error(function(data, status, headers, config) {
                    alert(data);
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
    
    }
    

    Note the majority of this code is the Base64 method. If you do not need to support IE9 and lower, you could replace it with native JS implementations - atob() and btoa(): https://developer.mozilla.org/en/docs/web/api/windowbase64/atob


    For me, this always reports a 401 before it actually works. I believe this is a bug with the angular code but I'm not sure. I've created an issue here: https://github.com/angular/angular.js/issues/3406

    0 讨论(0)
提交回复
热议问题