How to make Basic Authentication with AngularJS?

ionic-v1
1

I’m trying connect to a webservice. To connect I need use Basic Auth but I don’t know how could I do this on angularJS. Looking for a solution I found some examples but could not make it work.

How could use Basic Auth with AngularJS ?

trying this.

Base64

//link solution: http://stackoverflow.com/questions/17959563/how-do-i-get-basic-auth-working-in-angularjs

var app = angular.module('BasicAuth', []);
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;
        }
    };
});

using

var app = angular.module("starter");

app.service("UserLoginAPI", function($http, AppConstants, Base64){
	this.doLogin = function(){
		return $http.post(AppConstants.webServiceUrl + "/users/testaWS.json", {
			headers: { 
					   'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
					   'Authorization' : 'Basic' + Base64.encode('user' + ':' + 'password'),
					   'Access-Control-Allow-Origin': '*'
					},			
			
		});
	};
});
2

I recomend to read this guide.

3

@Koleman I found this guide at youtube

here: https://www.youtube.com/watch?v=PE81fyfEJUA

I think that is much more what I need because it need write much code. I’ll try use this sample but I’m looking for any way to do it more simple.

thanks.

4

Solved the problem

I did

var app = angular.module("starter");

app.service("UserLoginAPI", function($http, AppConstants, Base64){
    this.doLogin = function(){
        var _url = AppConstants.webServiceUrl + "/users/testaWS.json?callback=JSON_CALLBACK";
        var _authdata = Base64.encode('admin' + ':' + 'admin');

        var _headers = {
                'Authorization': 'Basic ' + _authdata,
                'Accept': 'application/json; charset=utf-8',
                'Content-Type': 'application/json; charset=utf-8'               
            };

        return $http({
                method: 'jsonp',
                url: _url,
                responseType: "json",
                headers: _headers
                });
    };
});

And I had to change the function in my webservice to get callback of jsonp.

public function testaWS(){            
            $this->autoRender = false;             
            $retorno = array("data"=>"ok");
            return $_GET['callback'] . '('.json_encode($retorno).')';            
        }
1 Like
5

Hi,
I am new to ionic framework, i have tried to get the value using Restful API with Basic Authentication. My code is,

var exampleApp= angular.module(‘starter’, [‘ionic’]);
exampleApp.controller(‘ExampleController’, function($scope, $http) {

$scope.getData = function() {
	$http.get("http://localhost/smart/api/request/section", { params: { "key1": "value1", "key2": "value2" } })
        .success(function(data) {
		 alert("SUCCESS");
		 console.log(data[0]['floor_no']);
		 
            $scope.firstname = data[0]['section'];
            $scope.lastname = data[0]['floor_no'];
        })
        .error(function(data) {
            alert("ERROR");
        });
}

When i run above without authentication , its work fine. But i need basic rest authentication. I have tried ypur service code, but i dont integrate my controller. Kindly guide me how to proceed further and share your controller also. Advance thanks.