반응형
angularjs로 작업하는 기본 인증을 받으려면 어떻게 해야 합니까?
AngularJs에서 작업하는 기본 인증을 받으려면 어떻게 해야 합니까?구글을 검색해봤지만 리소스가 작동하지 않아요.Angular는 처음입니다.JS
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
언급URL : https://stackoverflow.com/questions/17959563/how-do-i-get-basic-auth-working-in-angularjs
반응형
'programing' 카테고리의 다른 글
| 각도 재료: 입력에 대한 자동 완성 제안을 비활성화할 수 있습니까? (0) | 2023.03.12 |
|---|---|
| Jquery-Select2의 Multi-Value Select에서 선택한 값을 설정하는 방법 (0) | 2023.03.12 |
| Woocommerce에서 Ajaxify 헤더 카트 항목 수 (0) | 2023.03.12 |
| useEffect React Hook 사용 시 누락된 종속성 경고를 수정하는 방법 (0) | 2023.03.12 |
| Ajax 요청 내의 jQuery Ajax 요청 (0) | 2023.03.12 |