如何获得在 angularjs 中工作的基本身份验证？答案

【问题标题】：How do I get basic auth working in angularjs?如何获得在 angularjs 中工作的基本身份验证？
【发布时间】：2013-07-31 08:09:39
【问题描述】：

如何在 AngularJs 中获得基本的身份验证？我用谷歌搜索，资源对我不起作用。我是 AngularJS 的非常新手

【问题讨论】：

如果您认为我的问题很糟糕，请注意我只是问了这个问题，所以我可以回答它。我花了一个多小时才弄明白，我不想让其他人为此付出努力。

标签： javascript angularjs basic-authentication

【解决方案1】：

假设你的 html 是这样定义的：

<!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>

您可以使用这样的基本身份验证使您的后端连接到一个 rest api：

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.
            });

}

请注意，这段代码的大部分是Base64 方法。如果你不需要支持 IE9 及更低版本，你可以用原生 JS 实现替换它 - atob() 和 btoa()：https://developer.mozilla.org/en/docs/web/api/windowbase64/atob

对我来说，这总是在实际工作之前报告 401。我相信这是角度代码的错误，但我不确定。我在这里创建了一个问题：https://github.com/angular/angular.js/issues/3406

【讨论】：

别担心，有时候无聊的人会随机投票。
这听起来像是您的服务器没有正确响应 CORS 预检请求的情况。您能否展示您的服务器响应两个请求（OPTIONS 请求和实际 GET）的部分？
另外，如果你不担心window.btoa()
这意味着您的密码显示在客户端 js 代码中。可能是迷你/丑陋的，但它出现了。这安全吗？
@dasAnderlausMinga 那么我不会推荐这个。它可能对其他事情有用（例如，您的原型有效的概念证明）。