如何在 angularjs 中获得基本身份验证? - IT屋-程序员软件开发技术分享社区
首页 前端开发 如何在 angularjs 中获得基本身份验证?
如何在 angularjs 中获得基本身份验证?
[英] How do I get basic auth working in angularjs?
本文介绍了如何在 angularjs 中获得基本身份验证?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在 AngularJs 中获得基本身份验证?我用谷歌搜索过，但资源对我不起作用.我非常 AngularJS 的新手
解决方案
假设你的 html 是这样定义的:
<html ng-app="sandbox-app"><头><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"><身体><h2>Todo</h2><div ng-controller="TodoCtrl"><ol>...</ol>
</html>您可以使用如下基本身份验证使后端连接到 rest api:
var app = angular.module('sandbox-app', []);app.config(function($httpProvider) {});app.factory('Base64', function() {var keyStr = 'ABCDEFGHIJKLMNOP' +'QRSTUVWXYZabcdef' +'ghijklmnopqrstuv' +'wxyz0123456789+/' +'=';返回 {编码:函数(输入){var 输出 = "";var chr1, chr2, chr3 = "";var enc1, enc2, enc3, enc4 = "";变量 i = 0;做 {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;如果(isNaN(chr2)){enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}输出 = 输出 +keyStr.charAt(enc1) +keyStr.charAt(enc2) +keyStr.charAt(enc3) +keyStr.charAt(enc4);chr1 = chr2 = chr3 = "";enc1 = enc2 = enc3 = enc4 = "";} while (i < input.length);返回输出；},解码:函数(输入){var 输出 = "";var chr1, chr2, chr3 = "";var enc1, enc2, enc3, enc4 = "";变量 i = 0;//删除所有不是 A-Z、a-z、0-9、+、/或 = 的字符var base64test =/[^A-Za-z0-9\+\/\=]/g;如果(base64test.exec(输入)){alert("输入文本中存在无效的 base64 字符.\n" +"有效的 base64 字符是 A-Z、a-z、0-9、'+'、'/' 和 '='\n" +预期解码错误.");}input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");做 {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;输出 = 输出 + String.fromCharCode(chr1);如果(enc3！= 64){输出 = 输出 + String.fromCharCode(chr2);}如果(enc4 ！= 64){输出 = 输出 + String.fromCharCode(chr3);}chr1 = chr2 = chr3 = "";enc1 = enc2 = enc3 = enc4 = "";} while (i < input.length);返回输出；}};});//这里是你的代码最终被访问的地方函数 TodoCtrl($scope, $http, Base64) {$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"};//你可能不需要这一行.这让我可以连接到不同域上的服务器$http.defaults.headers.common['Authorization'] = 'Basic' + Base64.encode('admin' + ':' + 'abc12345');$http({method: 'GET', url: 'http://localhost:8888/app/api/v1/pets'}).成功(功能(数据，状态，标题，配置){$scope.pets = 数据；//这个回调会被异步调用//当响应可用时}).错误(功能(数据，状态，标题，配置){警报(数据)；//发生错误时异步调用//或者服务器返回带有错误状态的响应.});}请注意，此代码的大部分是 Base64 方法.如果您不需要支持 IE9 及更低版本，您可以将其替换为原生 JS 实现——atob() 和 btoa():https://developer.mozilla.org/en/docs/web/api/windowbase64/atob
<小时>对我来说，这总是在实际工作之前报告 401.我相信这是角度代码的错误，但我不确定.我在这里创建了一个问题:https://github.com/angular/angular.js/issues/3406
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
解决方案
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
这篇关于如何在 angularjs 中获得基本身份验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
