Como faço para obter autenticação básica trabalhando em angularjs?

Como posso obter autenticação básica trabalhando em AngularJs? Eu pesquisei e os resources não estão funcionando para mim. Eu sou muito novo no AngularJS

Assumindo que o seu html é definido assim:

        

Todo

    ...

Você pode fazer seu backend se conectar a uma API de descanso usando a autenticação básica assim:

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

Observe que a maioria deste código é o método Base64 . Se você não precisa dar suporte ao IE9 e inferior, você pode substituí-lo por implementações nativas do JS - atob () e btoa (): https://developer.mozilla.org/en/docs/web/api/windowbase64/atob


Para mim, isso sempre informa um 401 antes de realmente funcionar. Eu acredito que este é um bug com o código angular, mas não tenho certeza. Eu criei um problema aqui: https://github.com/angular/angular.js/issues/3406