AngularJS Set SSL Headers - angularjs

Question

I've started a new Yeoman AngularJS project, hosted in Apache. I am getting data from a WCF Restful service hosted in IIS with CORS enabled. I am able to get data with no problem. However, currently I am passing the user name and password each time on the url, and overriding the user validator on the WCF side, which is extremely bad and is not secure by any means. Don't worry this only a development environment. How do I set the header values with the user credentials prior to calling the SSL service? Basically how do I setup the web request in AngularJS prior to making the service call?

Answer 1

I ended up creating a custom header on my AngularJS app called "Authorization", setting the header value on the app, and then reading the header values on the WCF Service.
The way I was able to accomplish this is as follows:
First, I had to change the WCF service to allow me to get the Http Context. To do that I had to first enable ASP Net Compatibility on the web.config like so:
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
I had to add a Global.asax to my WebService project and modify the BeginRequest event to allow my new custom header like so:
protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Authorization");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.End();
}
}
I then allowed ASP Net Compatibility on the service class by adding mark up to the class like so:
[ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
At this point I was able to get Http Context headers on the WCF Service. Below is how I retrieved the header value in the service code:
HttpContext.Current.Request.Headers["Authorization"]
At this point, the WCF service is able to consume my custom header. The last step is to set the header from the AngularJS service factory code like below:
app.factory('serviceFactory', ['$http', function ($http) {
var urlBase = 'https://domainName.com/MyService.svc/';
var dataFactory = {};
var success = {};
serviceFactory.Login = function (username, password) {
return $http({
url: urlBase + "WebServiceLoginMethodName",
type: 'GET',
dataType: 'json',
headers: { 'Authorization': "Basic " + username + ":" + password }
});
};
This does not fire the User Validator on the web service, but this does let me put the username and password in the Http Headers, which I will encrypt and decrypt on the app and service as a next step.