Armin Kalajdzija Posts

ReSharper Ultimate – System.ApplicationException: Error loading settings file fix!

2017-01-16T12:22:31Z

Something really strange happened today while I was running my Unit Tests or to be exact while I was making a Coverage analysis of my Project. In the middle of the Execution my Laptop stopped responding (bad Docking Station Drivers under Windows 10), so I had to do a Hard Reset.

After that, every time I start Unit Testing Session under ReSharper I get following Error Message:

So, if you get this kind of Error Message, all you have to do is the delete the corrupted Settings file of a NUnit Testing Engine that is located under: C:\Users\<username>\AppData\Local\NUnit. File is called Nunit30Settings.xml.

Implementing WebSockets in ASP.NET 4.6 using WebSocketHandler

2016-12-06T11:17:52Z

This time I want to share with you a short example of how to implement WebSockets in your ASP.NET 4.6 Web API / AngularJS Application by using WebSocketHandler from Microsoft.WebSockets nuget Package.

Installing a Microsoft.WebSockets Nuget package

First of all you need to install the Microsoft.WebSockets from Nuget using Package Manager Console by typing:

PM> Install-Package Microsoft.WebSockets

Note that this Package is almost one year old now and not actively developed (says official Nuget package description, current version 0.2.3.1) but it is the best implementation I found so far if you are using it with ASP.NET 4.6.

You can also find a .NET Framework implementation of WebSockets in System.Web.WebSockets Namespace but I find it little bit impractical and if you want to implement it to be stable and multiclient, you will actually end up implementing the WebSocketHandler from Microsoft.WebSockets package.

Defining your Message Object

Here is a simple model of a Message Object that we will be sending to Client:

public class SimpleMessage

{

[JsonProperty("id")]

public long Id { get; set; }

[JsonProperty("body")]

public dynamic Body { get; set; }

[JsonProperty("sessionId")]

public Guid SessionId { get; set; }

}

Implementing your WebSocketHandler

Now we need to implement our own WebSocketHandler. I called it for purpose of this Post "SimpleWebSocketHandler" and it looks like this:

public class SimpleWebSocketHandler : WebSocketHandler

{

private static WebSocketCollection _wsClients = new WebSocketCollection();

public override void OnOpen()

{

_wsClients.Add(this);

base.OnOpen();

}

public override void OnClose()

{

wsClients.Remove(this);

base.OnClose();

}

public void SendMessage(SimpleMessage message)

{

if (string.IsNullOrEmpty(message.SessionId))

{

SendBroadcastMessage(message);

}

else

{

SendMessage(message, message.SessionId);

}

public void SendMessage(SimpleMessage message, string sessionId)

{

var webSockets = _wsClients.Where(s =>

{

var httpCookie = s.WebSocketContext.Cookies["SessionId"];

return httpCookie != null && httpCookie.Value == sessionId;

});

foreach (var socket in webSockets)

{

socket.Send(JsonConvert.SerializeObject(message));

}

public void SendBroadcastMessage(SimpleMessage message)

{

_wsClients.Broadcast(JsonConvert.SerializeObject(message));

}

As you can see, I am also using a WebSocketCollection object for storing my opened WebSocket connections. That way I can simply send a Broadcast message to all WebSocket connections or filter the one that has my Session ID as a cookie (that will be place upon first web request in Startup.cs below) and send the message only to that client.

Changes in Application Startup

Now we have to make sure that we initialize our "SimpleWebSocketHandler" upon application start. If you are using an OWIN Middleware and Unity Container (and you should), your Startup.cs should look something like this:

Startup.cs

public partial class Startup

{

public void Configuration(IAppBuilder app)

{

var container = new UnityContainer();

container

.RegisterType<SimpleWebSocketHandler>();

DependencyResolver.SetResolver(new UnityDependencyResolver(container));

// register dependency resolver for WebAPI

configuration.DependencyResolver = new Unity.WebApi.UnityDependencyResolver(container);

UnityConfig.Initialise(GlobalConfiguration.Configuration);

ConfigureAuth(app);

ConfigureWebSocketListeners();

app.Use(new Func<AppFunc, AppFunc>(next => (async env =>

{

if (context.Request.Cookies["SessionId"] == null)

context.Response.Cookies.Append("SessionId", Guid.NewGuid().ToString(), new CookieOptions() { HttpOnly = false });

await next.Invoke(env);

})));

}

Startup.WebSockets.cs

public partial class Startup

{

public void ConfigureWebSocketListeners(SimpleWebSocketHandler _webSocket)

{

ListenForSystemMessages(_webSocket);

}

private void ListenForSystemMessages(SimpleWebSocketHandler webSocket)

{

// Here you can register any event that should send the messages to users.

// It can be for example ServiceBus.OnMessage or anything else.

// queueClient.OnMessage(receivedMessage =>

// {

// var msg = JsonConvert.DeserializeObject<SimpleMessage>(receivedMessage.GetBody<string>());

// webSocket.SendMessage(msg);

// queueClient.Complete(receivedMessage.LockToken);

// });

}

Note that I am injecting my SimpleWebSocketHandler over Unity Container that we configured in step above.

Implementing your Web API Controller

So now what we need to do is the register one WebAPI route/method ("GetMessages") that will be used as our WebSocket connection endpoint and will be open for whole user session.

[RoutePrefix("api/messages")]

public class MessageController : ApiController

{

private readonly SimpleWebSocketHandler _webSocketHandler;

public FrontendSystemMessageController(SimpleWebSocketHandler webSocketHandler)

{

_webSocketHandler = webSocketHandler;

}

[HttpGet]

[Route("GetMessages")]

public async Task<HttpResponseMessage> Messages()

{

var currentContext = HttpContext.Current;

return await Task.Run(() =>

{

if (currentContext.IsWebSocketRequest || currentContext.IsWebSocketRequestUpgrading)

{

currentContext.AcceptWebSocketRequest(ProcessWebSocketRequest);

return Request.CreateResponse(HttpStatusCode.SwitchingProtocols);

}

return Request.CreateResponse(HttpStatusCode.BadRequest);

});

}

private async Task ProcessWebSocketRequest(AspNetWebSocketContext context)

{

var sessionCookie = context.Cookies["SessionId"];

if (sessionCookie != null)

{

await _webSocketHandler.ProcessWebSocketRequestAsync(context);

}

Note that I am injecting my SimpleWebSocketHandler over Unity Container that we configured in step above.

AngularJS "WebSocketPoller" Factory

For this purpose I wrote a simple AngularJS factory that creates a WebSocket connection upon the app start and raises the event on every message that has been received.

'use strict';

app.factory('webSocketPoller', function() {

var listener;

var errorHandler;

var address;

return function(options) {

var Service = {};

if (options && options.address) {

address = options.address;

}

if (options && options.listener) {

listener = options.listener;

}

if (options && options.errorHandler) {

errorHandler = options.errorHandler;

}

Service.init = function()

{

var ws = new WebSocket(address);

ws.onmessage = function(message) {

//Do whatever you need with

//SimpleMessage Object:

//JSON.parse(message.data);

};

ws.onerror = errorHandler;

}

return Service

}

});

Now you can find a right AngularJS Controller or use app.run() to add following code that initializes the Puller and attaches to OnMessage and OnError so you can handle your messages on UI:

var wsPoller = new webSocketPoller({

address: 'ws://localhost/api/messages/GetMessages',

listener: onNewSystemMessageFunction,

errorHandler: function (error) { console.error(error); }

})

wsPoller.init();

Setup Swagger to authenticate against Azure Active Directory

2016-11-23T14:40:16Z

After spending almost two days implementing security in my Web API application with Azure Active Directory and setting up the Swagger on the top and implementing Azure Active Directory via OAuth2 Implicit Grant for it as well, there is definitely some tips and tricks that you should know that will save you at least half of the time implementing the same.

First of all, some important things that you should make sure of:

You have correctly implemented AAD in your Web API application.
You have installed and configured (without security of course) Swagger in your Web API application.
You have set the [Authorize] Tags on every single Web API Method instead of whole Controller Class. This is important because if you put the Tag for whole Controller Class, Swagger will not recognize those methods as ones that need Authorization and will not render the Login Button (or exactly said Exclamation Mark image) that actually allows you to Login to AAD and come back with valid token.

Add new application to Azure Active Directory for Swagger

Now we should first add a new application to our Azure Active Directory. As of writing this Post, Azure Active Directory UI on latest Azure Management Portal is still not really usable so please use the old Azure Management Portal under https://manage.windowsazure.com/.

So here are the steps you need to do:

Add new Swagger Application in your Azure Active Directory (I will not explain how to do that in this post and if you already fulfill the requirements above, you already know how to do that). Just write down the Name you gave it. I will reference to it later in text as {nameSwagger}
Write down the Client ID {clientIdSwagger} of your new application. That is the only thing that you will need. You don't need to create any App/Secret Key etc.
Add a Reply URL with the "/o2c-html" postfix. Simply said, your Reply URL should be your Swagger URL + "/o2c-html" at the end. It is important as this is the entry point where Swagger returns from AAD after login and reads the token.
Under "Permissions to other applications", make sure that "Windows Azure Active Directory" hast Application Permissions: "Read directory data" and Delegated Permissions: "Read directory data" and "Sign in and read user profile".
Under "Permissions to other applications", click on "Add application", change Filter to "All apps" and add your Web API application that Swagger needs to access to. Then make sure that Web API application is now listed and that under Delegated Permissions you check the "Access {webApiAppName}" permission. {webApiAppName} is the name of you Web API application or better said, how you named it in your Azure Active Directory. We will need this parameter as well.
Click on the "Manage Manifest" from the bottom toolbar and then "Download Manifest". Open the JSON file, find the property named "oauth2AllowImplicitFlow" and set it to: "true". Upload the Manifest file back.
Click on the "View Endpoints" from the bottom toolbar and write down the last endpoint on the list named "OAuth 2.0 Authorization Endpoint". I will reference it later in text as {aadAuthority}.

Check the configuration of your Web API application under Azure Active Directory

Now we need check the configuration for our Web API application definition under Azure Active Directory:

Write down the App ID URI {appIdUri} of the application.
Under "Permissions to other applications", make sure that "Windows Azure Active Directory" hast Application Permissions: "Read directory data" and Delegated Permissions: "Read directory data" and "Sign in and read user profile". (Same as above)

Update your SwaggerConfig.cs file to support AAD via OAuth2 Implicit Grant

You can copy paste these lines to your solution. Just make sure you have all parameters I referenced in text with {} correctly set.

In .EnableSwagger Configuration add following lines:

c.OAuth2("oauth2")

.Description("OAuth2 Implicit Grant")

.Flow("implicit")

.AuthorizationUrl({aadAuthority})

.Scopes(scopes =>

{

scopes.Add("user_impersonation", $"Access {appIdUri}");

});

c.OperationFilter<SwaggerOAuth2SecurityRequirements>();

Under .EnableSwaggerUI Configuration add following lines:

c.EnableOAuth2Support(

{clientIdSwagger},

string.Empty,

"http://localhost/", //or where you host your app

{nameSwagger},

" ",

new Dictionary<string, string> { { "resource", {webApiAppName} } });

And of course the missing SwaggerOAuth2SecurityRequirements.cs class should look like this:

public class SwaggerOAuth2SecurityRequirements : IOperationFilter

{

public void Apply(Operation operation, SchemaRegistry schemaRegistry, ApiDescription apiDescription)

{

// First check if there is any Authorize attribute

var authorizeAttributes = apiDescription.ActionDescriptor.GetCustomAttributes<AuthorizeAttribute>();

if (!authorizeAttributes.Any())

return;

// Create the operation.security property

if (operation.security == null)

operation.security = new List<IDictionary<string, IEnumerable<string>>>();

// Add the oauth2 security definition to the operation

var oAuthRequirements = new Dictionary<string, IEnumerable<string>>

{

{ "oauth2", Enumerable.Empty<string>() }

};

operation.security.Add(oAuthRequirements);

}

Test your Swagger with new configuration and OAuth2 security

Finally, if you have done everything correctly, you should be able to see the Red Exclamation Mark indicator on the top right corner of every API Method in Swagger. Red color means that you are not authenticated and if you click on "Try it out!" button you should get answer like this:

By clicking on the sign, and logging in over Azure Active Directory page, you should get back to Swagger and the Exclamation Mark indicator should turn Blue. After that you will be able to call the method:

Final Words

Swagger is a great tool and I just simply love it! That is why I was willing to take the time and implement the Azure Active Directory security in it simply because I was not willing to give up on such great tool or to compromise by using my development instance without security.
I hope that I have saved you some time!

Set Azure Webjob to run in 64-bit Mode

2016-10-18T14:47:18Z

I just found out that my Azure Webjob was running 32-bit all the time without me even knowing it. As I tried to attach my debugger on the Webjob I got following error message:
"Unable to attach. The 64-bit version of the Visual Studio Remote Debugger (MSVSMON.EXE) cannot be used to debug 32-bit processes or 32-bit dumps. Please use the 32-bit version instead."

That was a surprise because I was expecting my WebJobs to be running 64-bit, especially as I double checked under my Application Settings in Azure Portal that my Web App IS running in 64-bit Mode. But no. WebJob Executables were acutely built as 32-bit Applications so I looked at my Build Configuration Settings and I found following Checkbox:

I am not sure why this setting is a default for every Azure WebJob. It only might have sense if Azure Team thinks that WebJobs are planned for a small workloads but if you have (as in my case) very large workloads you will see that x64 servers with sufficient CPU and RAM outperform x86 by a healthy measure.

So anyway, if you have huge workloads and process gigabytes of data with your WebJobs, make sure you unselect this Checkbox in your Build Configuration!

How to secure Static Content under ASP.NET MVC and OWIN

2016-10-10T10:38:33Z

As you can see in my previous post, I am currently working on securing an ASP.NET MVC Web Application based on OWIN. Because of that is this post some sort of continuation of my previous one.

So, my Web Application in pure Single Page Application that works on AngularJS and is being generated by a Gulp Task Runner as a static content. Because we also have some REST Web API Methods in our Application that are used by Single Page Application, it was not possible to implement the Security of our Web Application completely on Client via ADAL or any other Javascript Library so we used (in our case Active Directory Federation Services) Owin Security Provider and added it to our ASP.NET MVC Web Application. Now we can easily use [Authorize] Tags on our Web API Methods.

But now we had a Problem of securing our Single Page Application that is actually a static content in our ASP.NET MVC Web Application. For that I injected this simple Code Snippet that will be called upon every Request:

app.Use((context, cont) =>

{

if ((context.Authentication.User != null) &&

(context.Authentication.User.Identity != null) &&

(context.Authentication.User.Identity.IsAuthenticated))

{

return cont();

}

else

{

context.Authentication.Challenge(WsFederationAuthenticationDefaults.AuthenticationType);
return Task.Delay(0);

}

});

It simply checks if the user is authenticated, and if not, it Challenges our OWIN Authentication Provider to authenticate the user (in our case ADFS). Now we don't even have to use our [Authorize] Tags because all Request will need to be authenticated, what can make some problems in certain cases if you have some Web API Methods that needs to be publicly exposed.

How to implement Web Sign On with ADFS in ASP.NET MVC using OWIN

2016-10-06T14:08:39Z

In this Post I will (try to) shortly explain how to Implement Web Sign on with Active Directory Federation Services under ASP.NET MVC and OWIN/Katana as Middleware.

There is plenty of Resources (read Code Snippets) on the Net about this subject, but what I actually found as important as the Code Snippets is actual Configuration of AD FS Server. The Configuration of ADFS is highly sensitive on every identifier, endpoint definition and even on every character like underscores, slashes, and of course prefixes like http/https are all exactly to be defined and used in your Web App!

ADFS Server Configuration

That is why I will first show some screenshots and Configuration of my ADFS Server running on Azure VM Development Environment:

Under Authentication Policies, you should enable Forms Authentication for Extranet users. That way it will be possible for users outside your Domain or on a Public Computer to get a nice Forms Authentication provided by ADFS and still get authenticated.

You should create new Relying Party Trust with following Configuration: Display Name you can write whatever you want of course. Under Relaying party identifiers, you should add exactly your Web Application URL (Including correct prefix and slash at the end. If you have more Bindings on you Web Application, define all of them.
NOTE: Some users had problems if their Web Application URLs contains underscores, so if you can, try to avoid them.

Under Endpoint Tab, add a WS-Federation Passive Endpoint with the same URL of your Web Application as in Relying party identifiers.
Note: You can also define multiple if you have more the one Binding, but only one can be Default.

Now knowing your exact ADFS Configuration, you will definitely save time and avoid configuration conditioned Problems so we can continue and finally write some Code.

ASP.NET Web Application with OWIN Middleware

First we will start off with OWIN Startup.cs Class. We have the Authentication Configuration Method outsourced into separate Class called Startup.Auth.cs, like the Default ASP.NET MVC Web Application Template do it, but many of you have it all directly under Startup.cs.

Startup.cs

using System.Threading.Tasks;

using Microsoft.Owin;

using Microsoft.Owin.Security.WsFederation;

using Owin;

[assembly: OwinStartupAttribute(typeof(adfs.demo.Startup))]

namespace adfs.demo

{

public partial class Startup

{

public void Configuration(IAppBuilder app)

{

ConfigureAuth(app);

}

Startup.Auth.cs

using System.Configuration;

using Microsoft.Owin.Security.Cookies;

using Owin;

using Microsoft.Owin.Security;

using Microsoft.Owin.Security.WsFederation;

namespace adfs.demo

{

public partial class Startup

{

public void ConfigureAuth(IAppBuilder app)

{

app.UseCookieAuthentication(

new CookieAuthenticationOptions

{

AuthenticationType = WsFederationAuthenticationDefaults.AuthenticationType

});

app.UseWsFederationAuthentication(

new WsFederationAuthenticationOptions

{

MetadataAddress = ConfigurationManager.AppSettings["ida:ADFSMetadata"],

Wtrealm = ConfigurationManager.AppSettings["ida:Wtrealm"]

});

app.SetDefaultSignInAsAuthenticationType(WsFederationAuthenticationDefaults.AuthenticationType);

}

Here is important that you extract your ADFS Metadata Address correctly from your Server which is by Default http://youradfsserver.address.com/FederationMetadata/2007-06/FederationMetadata.xml.
In Wtrealm out your Relying Party Identifier from ADFS Server from first part of the Post.

Both of this entries I have placed in Web.Config and it looks like this:

</appSettings>

Now that should be enough to have OWIN Security running with our ADFS Server. All you have to do now is to add the [Authorize] Tags on needed Controllers or [AllowAnonymous] on single Actions that needs to be accessed anonymously.

Here is one very simple way of using a Templated AccountController.cs with our ADFS Implementation:

using System.Web;

using System.Web.Mvc;

using Microsoft.Owin.Security;

using Microsoft.Owin.Security.Cookies;

using Microsoft.Owin.Security.WsFederation;

namespace adfs.demo.Controllers

{

[Authorize]

public class AccountController : Controller

{

[AllowAnonymous]

public void Login(string returnUrl)

{

if (!Request.IsAuthenticated)

{

HttpContext.GetOwinContext().Authentication.Challenge(new AuthenticationProperties { RedirectUri = "/adfs.demo" },

WsFederationAuthenticationDefaults.AuthenticationType);

}

public void LogOff()

{

string callbackUrl = Url.Action("Index", "Home", routeValues: null, protocol: Request.Url.Scheme);

HttpContext.GetOwinContext().Authentication.SignOut(

new AuthenticationProperties { RedirectUri = callbackUrl },

WsFederationAuthenticationDefaults.AuthenticationType, CookieAuthenticationDefaults.AuthenticationType);

}

Conclusion

It was actually pretty easy to implement the ADFS Authentication Provider in OWIN once you understand and have access the whole configuration of ADFS Server. So far it looks really fast and stable, beside few problems I had with Chrome and Firefox Browser that I will explain below. So as I promised, this was actually short post and I hope you will get your ADFS running smoothly just as I did.

Chrome / Firefox Redirection Loop Problem
After my first Implementation of ADFS under OWIN, it looked like everything is working well. As soon as I tested it on Chrome and Firefox, I figured out that after Login, I am being redirected to ADFS Forms Authentication Web Page and back to my Default Return URL few times before getting Error Message (that was not telling me much about Error) on my ADFS Forms Authentication Web Page.

In ADFS Event Log, there was this Error event:
Microsoft.IdentityServer.Web.InvalidRequestException: MSIS7042: The same client browser session has made '6' requests in the last '1' seconds. Contact your administrator for details.

There are many explanations and workarounds for the Redirection Loop Problem under OWIN Security, most of them have something to do with CookieManager under OWIN but none of them has solved my problem.

My Solution:
As soon as I have defined "fresh" new Relying Party Trust (see first part of the Post) with exactly the same Relying Party Identifier as an WS-Federation Passive Endpoint URL (and I really mean exactly the same, same prefix, same URL and / at the end of URL, also see first part of the post) and then updated my Web.Config with the exact Values, it all started working as a Charm.

Including XML Comments in Swagger under ASP.NET Core

2016-09-30T14:44:47Z

For all of you using Swagger, a great tool or let's better say Framework to Document and Represent your RESTful Web API Service under ASP.NET Core, you will probably be interested in following few lines of Code that enables Swagger to use your Project XML Documentation as information source.

First of all, you have to enable Generation of XML Documentation for your ASP.NET Core Project under Project Properties > Build and Check the "XML Documentation file" checkbox. After that you need to change your Startup.cs file and add following lines to your Configuration for Swagger:

public void ConfigureServices(IServiceCollection services)

{

// Add framework services.

services.AddMvc();

// Inject an implementation of ISwaggerProvider with defaulted settings applied

services.AddSwaggerGen();

services.ConfigureSwaggerGen(options =>

{

//Determine base path for the application.

var basePath = PlatformServices.Default.Application.ApplicationBasePath;

//Set the comments path for the swagger json and ui.

options.IncludeXmlComments(basePath + "\\MyProjectName.xml");

});

}

Hope this will save you some time searching for on the net, and continue to focus on more important things in your Project.

How to Audit Login activity in IdentityServer3

2016-09-23T08:41:22Z

In some use cases there is a security requirement for Auditing of User Login Activity, which is not covered by IdentityServer3.

As we used the ASP.NET Identity as User Store, it also possible to implement some sort of Auditing as a custom SignInManager.cs in ASP.NET Identity, but that would not cover all Login Features that are supported by IdentityServer3, which us great Framework by the way and I had much joy of using it and I look forward of using the latest port of IdentityServer on ASP.NET Core.

Searching for a best way to implement this, I found out two interesting Features in Framework:

Logging (more for Development-time logging, that is produces a quite extensive output and not that great for Auditing)
Events (much better for production-time environments, firing four types of Events and is configurable. More on Events in IdentityServer3 here)

First of all, we will extend our IdentityDbContext that we used for ASP.NET Identity User Storage with another Class called UserAudit.cs with all the columns I want to store:

[Table("UserAuditEvents")]

public class UserAudit

{

[Key]

public int Id { get; private set; }

[Required]

public string UserId { get; private set; }

[Required]

public DateTimeOffset Timestamp { get; private set; } = DateTime.UtcNow;

[Required]

public EventTypes AuditEvent { get; set; }

public string IpAddress { get; private set; }

public static UserAudit CreateAuditEvent(string userId, EventTypes auditEventType, string ipAddress)

{

return new UserAudit { UserId = userId, AuditEvent = auditEventType, IpAddress = ipAddress };

}

For EventTypes Enum you will need to add using of Thinktecture.IdentityServer.Core.Events namespace. It contains Integer values for following Events: Success = 1, Failure = 2, Information = 3 and Error = 4.

Now that we have a class which represents the database table, we should add it to the entity framework IdentityDbContext:

public class LoginDbContext : IdentityDbContext<User, Role, string, IdentityUserLogin, IdentityUserRole, IdentityUserClaim>, ILoginDbContext

{

public virtual DbSet<UserAudit> UserAuditEvents { get; set; }

}

At this point, we have a new database table defined which needs to be physically created. We will do this by creating a migration and applying it to the database or if you have AutomaticMigrationsEnabled = true then you just have to update your database by running the "Update-Database" in Package Manager Console of your Project.

Now we have to implement our AuditEventService.cs as an Implementation of IEventService.cs.

public class AuditEventService : IEventService

{

private readonly LoginDbContext _db;

public AuditEventService(LoginDbContext dbContext)

{

_db = dbContext;

}

public void Raise<T>(Event<T> evt)

{

var localLoginDetails = evt.Details as LocalLoginDetails;

if (localLoginDetails != null)

{

EnBWUserAudit newAuditRecord = EnBWUserAudit.CreateAuditEvent(

localLoginDetails.LoginUserName,

evt.EventType,

HttpContext.Current.Request.UserHostAddress

);

_db.UserAuditEvents.Add(newAuditRecord);

_db.SaveChangesAsync();

}

As you can see, Raise<T> function will be called when any Event is fired and because we are implementing Login Auditing, I am only interested in Events.Details of type LocalLoginDetails as they contain all relevant information about the Login that we want to audit. Also, we are Injecting the DbContext into the Construct of the Service because we need it for storing our audit records. This Injection needs to be registered separated from our IEventService in order to work. Code for this in a minute.

So the final part is here! Now we need to change our Startup.cs Class and add few lines to our IdentityServerServiceFactory.

var factory = new IdentityServerServiceFactory();

First we need to register our AuditEventService and then the DbContext to the IdentityServerServiceFactory in order for Dependency Injection to work:

factory.EventService = new Registration<IEventService, AuditEventService>();

factory.Register(new Registration<LoginDbContext>(resolver => new LoginDbContext()));

Now, it should all be working if there was not one "small" thing: IEventService configurations stored in EventOptions Class is by default turned off for all types of events. We need to add EventOptions to our IdentityServerOptions in order to get Events fired at all.

My IdentityServerOptions looked at the end like this:

var eventOptions = new EventsOptions()

{

RaiseSuccessEvents = true,

RaiseFailureEvents = true

};

Finally, we can try to Login to our Application. If all went good, you should be able to see something like this in you Database Table "UserAuditEvents":

Summing Up

This blog post hopefully demonstrates the initial steps that we can follow to quite easily implement the IEventService in IdentityServer3 and extend it with nice auditing feature. I expect to be refactoring and extending this code further as my requirements determine.

How to integrate JavaScript Unit Tests in Visual Studio Online

2015-09-22T12:34:40Z

We all know the importance of Unit Testing and it should definitely have an important part of every Project, but we also know that todays Web Application have major parts of (at least UI) Logic implemented in diverse JavaScript libs that also needs to be Unit Tested and in also integrated in your Build Server Definitions.

As I was searching for ways how to achieve that goal, I run upon the great Post from Mathew Aniyan (link here) that describes how to use Chutzpah, JavaScript Unit Test Runner for Jasmine Unit Test Framework that comes with implemented Visual Studio Test Adapter. I was not 100% satisfied with the Solution, but I was more then happy to know that the Test Adapter of Chutzpah works on Visual Studio Online and that I don’t need to write any Command Lines in my Build Definition to run the Jasmine Specs (JavaScript Unit Tests) by myself.

So lets take a look how I solved the JavaScript Unit Testing on my hosted Visual Studio Online Build Definition:

1. Step was to create a new Test Project that will be used for JavaScript Unit Testing.

As you can see, I named it Demo.Javascript.Test and structured it so that it has Folder Test containing Specs Files and Sources that will actually contain my JavaScript Sources that needs to be tested.
(I strongly recommend not to copy your .js Sources from your Web Project to Test Project but to Link them to the Sources Folder)

2. Step was to add Chutzpah and Jasmine-Test Nuget Packages to my Project.

(I also recommend not to Check-In Packages to your TFS and to let your Build Server get the “fresh” version on every Build. On how to do that, read this link)

3. Step was modifying my Build Definition on Visual Studio Online and to reference Chutzpah Test Adapter so that VSTest can understand our JavaScript Specs files and test them correctly.
To do that, add new Visual Studio Test runner to your Build Definition and configure it like here:

The only two things you need to configure are:
- Test Assembly Wildcard, which was in my case all Files ending with Specs with .js extension, and in every Subfolder.
- Path to Custom Test Adapters, which should be pointing to local Sources Directory $(Build.SourcesDirectory) and then the Packages folder.

Really cool thing is that we don’t need to Check-In any binaries and have to update them from time to time. This way, on every Build, the MSBuild will get the latest NuGet Packages (Chutzpah in our case) and we will be using the latest binaries in our Visual Studio Test Runner.

Now, when you run the Hosted Build on your Visual Studio Online you should get Output like following:

In Logs of the Build Process you can then see all information about which Specs Files are tested and which Methods were being tested.

I hope I could save you some time or encourage you to add Unit Tests of your JavaScript Sources. Thanks to the Chutzpah Test Runner it is really simple do add Jasmine Unit Testing Framework to your Visual Studio Online which adds an Important feature to it.

How to use Client Certificate in Azure Web App

2015-08-14T13:28:15Z

If you need to Authenticate your Azure Web App (ASP.NET MVC Application) against WCF Service with a specified Client Certificate (.p12 in my case) you will find out that it is not quite simple as it sounds. There are plenty of samples of how to do it in Internet, but non of them has really worked for me! Here is a short list of what I have tested and what have worked and not worked:

1. Using Certification Store

First you need to upload your Certificate into your Azure Web App, and get the Thumbprint of it.

After that it is supposed to work with following line of code:

     var service = new WCFServiceClient();

    service.ClientCredentials.ClientCertificate.SetCertificate(

        StoreLocation.LocalMachine, 

        StoreName.My, 

        X509FindType.FindByThumbprint, 

        "TUMBPRINT");

This solution DID NOT WORK! It can not find any Certificate with than (or any) Thumbprint when running as Azure Web App. Also tried changing the StoreLocation to CurrentUser but it did not help.

2. Loading file from File System

Second idea was to load it from my File System, so I put my Certificate in App_Data and rewritten my code to:

    var service = new WCFServiceClient();

    service.ClientCredentials.ClientCertificate.Certificate = new X509Certificate2(

        "FILENAME.p12", 

        "PASSWORD", 

        X509KeyStorageFlags.MachineKeySet | X509KeyStorageFlags.Exportable | X509KeyStorageFlags.PersistKeySet);

This solution ALSO DID NOT WORK! It could not find specified file on my File System. By putting the Certificate on root of my Project and not in App_Data also did not help.

3. Loading the Certificate from Resource as byte[]

So I was looking at all overrides of X509Certificate2() ctor and I found that it is possible to give a Certificate as a byte[]. So I created a simple Resource file and added my Certificate as Existing File:

So I rewritten my code so I can get a byte[] out of my Resource file and initialize my Service Client with that Certificate:

    var service = new WCFServiceClient();

    service.ClientCredentials.ClientCertificate.Certificate = new X509Certificate2(

        (byte[])Properties.Resources.ResourceManager.GetObject("RESOURCE"),

        "PASSWORD", 

        X509KeyStorageFlags.MachineKeySet | X509KeyStorageFlags.Exportable | X509KeyStorageFlags.PersistKeySet);

And this code actually WORKED! I was able to make a SSL/TLS Connection to my WCF Endpoint successfully!

One more thing you should not forget is of course to define your Bindings in Web.Config correctly so that your client knows that he needs to Authenticate himself to Service with Client Certificate. Put or make sure you have following definition under your <system.serviceModel> tags:

    <bindings>

      <basicHttpBinding>

        <binding name="BasicHttpBinding_WCFService" maxBufferPoolSize="20971520" maxBufferSize="20971520" maxReceivedMessageSize="20971520">

          <security mode="Transport">

            <transport clientCredentialType="Certificate" />

          </security>

        </binding>

      </basicHttpBinding>

    </bindings>

Hope I saved you few hours of frustration!

How to use D3.js for Server Side Chart Generation in .NET (Part 3)

2015-07-30T12:31:20Z

How to use D3.js for Server Side Chart Generation in .NET

Part 1: Creating a Donut Chart using D3.js
Part 2: Render/Export D3.js Chart as PNG Image using PhantomJS
Part 3: Creating a simple REST Service using ASP.NET Web API

In order to make our Chart Generation logic reusable I have decided to put it in a simple RESTful Service that will be implemented using ASP.NET Web API. We need to take all files that we created in previous parts of this series and place it in one temporary folder that will be used for Chart Generation.

I have decided to use C:\Temp\Chart folder, and have copied following content:

     donut_template.html

    phantomjs.exe

    render.js

As you can see, phantomjs.exe and render.js are files that we used in Part 2 of our series. donut_template.html is actually donut.html file from the Part 1 with one following change:
I have removed the explicit definition of our dataset used for rendering of Donut Chart:

    var data = [{ label: 'Here', value: 190000, color: "#1e398f" },

                { label: 'Some', value: 50000, color: "#f7a600" },

                { label: 'Labels', value: 420000, color: "#e17e62" },

                { label: 'Needed', value: 1530000, color: "#985181" }];

With following line of code:

    var data = $$$PAYLOADINJECTION$$$;

This line will be used later in REST Service for Injecting the JSON dataset from our Server Side Model.

Now we can focus on creating a REST Service using ASP.NET Web API.
To do that, do the following steps:

Start new ASP.NET Web Application Project in Visual Studio and chose Empty Template with Web API added core references

Add new Model, name it ChartModel and add following definitions:

        namespace ChartService.Models

        {

            public class ChartModel

            {

                public string label { get; set; }

                public int value { get; set; }

                public string color { get; set; }

            }

        }

Now add new Controller, name it ChartController and place following code inside:

        using System.Linq;

        using System.Net;

        using System.Net.Http;

        using System.Net.Http.Headers;

        using System.Web.Hosting;

        using System.Web.Http;

        using Newtonsoft.Json;

        using ChartService.Models;

        namespace ChartService.Controllers

        {

            public class ChartController : ApiController

            {

                public HttpResponseMessage Post([FromBody] IEnumerable<ChartModel> payload)

                {

                    String imageFile = GenerateChartImage(payload);

                    MemoryStream imageStream = ReadChartImage(imageFile);

                    var result = new HttpResponseMessage(HttpStatusCode.OK);

                    result.Content = new ByteArrayContent(imageStream.ToArray());

                    result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

                    return result;

                }

                private string GenerateChartImage(IEnumerable<ChartModel> payload)

                {

                    Guid chartID = Guid.NewGuid();

                    string templatePath = @"C:\Temp\Chart\donut_template.html";

                    string htmlPath = String.Format(@"C:\Temp\Chart\{0}.html", chartID);

                    string pngPath = String.Format(@"C:\Temp\Chart\{0}.png", chartID);

                    // Read HTML Template File

                    string html = File.ReadAllText(templatePath);

                    // Create copy with Payload

                    html = html.Replace("$$$PAYLOADINJECTION$$$", JsonConvert.SerializeObject(payload));

                    File.WriteAllText(htmlPath, html);

                    // Start PhantomJS as Hidden Process in Background

                    ProcessStartInfo startInfo = new ProcessStartInfo();

                    startInfo.CreateNoWindow = false;

                    startInfo.UseShellExecute = false;

                    startInfo.FileName = Path.Combine(@"C:\Temp\Chart\", "phantomjs.exe");

                    startInfo.WorkingDirectory = @"C:\Temp\Chart\";

                    startInfo.WindowStyle = ProcessWindowStyle.Hidden;

                    startInfo.Arguments = "render.js \"" + htmlPath + "\" \"" + pngPath + "\"";

                    try

                    {

                        using (Process phantomJsProc = Process.Start(startInfo))

                        {

                            phantomJsProc.WaitForExit();

                            return pngPath;

                        }

                    }

                    catch (Exception)

                    {

                        throw;

                    }

                    finally

                    {

                        // At the end, don't forget to delete temp. generated files

                        File.Delete(htmlPath);

                    }

                }

                private static MemoryStream ReadChartImage(string imageFile)

                {

                    FileStream fileStream = new FileStream(imageFile, FileMode.Open);

                    Image image = Image.FromStream(fileStream);

                    MemoryStream memoryStream = new MemoryStream();

                    image.Save(memoryStream, ImageFormat.Png);

                    // Dispose objects and delete the temp. generated files

                    image.Dispose();

                    fileStream.Close();

                    File.Delete(imageFile);

                    return memoryStream;

                }

            }

        }

Now with this Implementation of ChartController.cs we can simply POST a JSON Payload containing our dataset that will be injected into our donut_template.html file.

After that we will run render.js on PhantomJS as hidden background process on our new generated html file and generate the PNG Image file that will be delivered in response to our http request as “image/png” content type.

You can easily test the functionality of code in Fiddler by composing the POST request to your new REST Service:

By Executing your request you should get following response of your request:

Now we have a nice REST Web API Service that uses D3.js Chart Library for Server Side generating, pre-rendering and delivering of Charts Images.

Now you can create a ASP.NET Web Application that will use the new REST Service to dynamically generate and display the Chart.

How to use D3.js for Server Side Chart Generation in .NET (Part 2)

2015-07-22T11:56:00Z

How to use D3.js for Server Side Chart Generation in .NET

Part 1: Creating a Donut Chart using D3.js
Part 2: Render/Export D3.js Chart as PNG Image using PhantomJS
Part 3: Creating a simple REST Service using ASP.NET Web API

So after we have created a HTML Template of our Donut Chart in the previous part, I will be dealing with exporting of this Chart as a PNG Image in this part of the Series.

For that purpose we will be using PhantomJS. It is a headless webkit engine that can be scriptable with Javascript and has native support for DOM, CSS and SVG. I have chosen the PhantomJS over other engines because it is really easy to use, supports various exports (PNG, PDF etc.) out of the box and its implementation of DOM is definitely better then using JSDom under Node.js/IO.js … at least this is my personal opinion.
One more thing that I like about PhantomJS is that is one single .exe file. This means you don’t have to install anything so it is portable and you can simply put him in the same folder as your HTML Template.

Now we need to script the PhantomJS to do what we want. We need to create new Javascript fille called render.js that will contain our rendering logic shown in the Code Snippet:

     var page = require('webpage').create(),

        fs = require('fs'),

        system = require('system'),

        address, output;

    if (system.args.length < 3 || system.args.length > 3) 

    {

        console.log('Usage: render.js htmlFileName pngFileName');

        phantom.exit(1);

    }

    else

    {

        address = 'file:///' + fs.absolute(system.args[1]);

        output = system.args[2];

        page.open(address, function (status) {

            if (status !== 'success') {

                console.log('Unable to load the address: ' + address);

                phantom.exit(1);

            } else {

                window.setTimeout(function () {

                    page.render(output);

                    phantom.exit();

                }, 200);

            }

        });

    }

As you can see, first we are including Webpage, File System and System Module from PhantomJS API. Webpage is needed for loading and rendering of our HTML Chart Template, File System gives us access to local file system for reading and writing the files and System Module is there only for accessing the command arguments on start of the PhantomJS.

Next thing is to check if the PhantomJS is started with enough arguments, and if everything is fine, we are proceeding to the main part of the script which is nothing more then loading the given HTML file in Webpage Module and calling the Render() method to the given output file. Depending of which file extension has been given to Render() method (PNG, PDF, JPEG or GIF), it will deliver the correct output format of the file.

Now when everything is in the same folder, we can simply start PhantomJS with following command:

    C:\Temp\Chart> phantomjs.exe render.js donut.html donut.png

As a result, you should find your Donut Chart as PNG file written on the File System looking something like this:

How to use D3.js for Server Side Chart Generation in .NET (Part 1)

2015-07-15T09:44:00Z

After finally finishing my studies (for now), I am getting my "old life" back again! That means more time for coding, research and of course blogging. As one of my first (small?!) series that I will be writing will be about "How to use D3.js for Server Side Chart Generation in .NET" that will be splitted in few parts, so lets get started!

How to use D3.js for Server Side Chart Generation in .NET

Part 1: Creating a Donut Chart using D3.js
Part 2: Render/Export D3.js Chart as PNG Image using PhantomJS
Part 3: Creating a simple REST Service using ASP.NET Web API

First of all, we need a simple empty HTML Document that will be used later on as a Tamplate for our chart generation. It has do contain the D3.js logic for our Donut Chart and all other needed assets like CSS, Images etc.

     <!DOCTYPE html>

    <meta charset="utf-8">

    <style>

    body {

      position: relative;

      background-color: #FFF;

    }

    svg {

        width: 100%;

        height: 100%;

    }

    text {

        font-size: 15px;

        font-family: Arial;

    }

    </style> 

    <body>

    <script src="http://d3js.org/d3.v3.min.js"></script>

    <div id="chart"></div>

    </body>

As you can see, we have defined few CSS global styles for Body, SVG, and Texts and the most important thing, we have included the latest minified D3.js version from their CDN and added a wrapper DIV with id=”chart” that will contain our generated chart.

Now we should define our dataset that we will be using for our chart generation:

    var data = [{ label: 'Here', value: 190000, color: "#1e398f" },

                { label: 'Some', value: 50000, color: "#f7a600" },

                { label: 'Labels', value: 420000, color: "#e17e62" },

                { label: 'Needed', value: 1530000, color: "#985181" }];

I strongly suggest that you put all properties you will need in the dataset, so you don’t have to change anything in this Template HTML when you start using it from your ASP.NET Web Application later in this series.

Before we start implementing the chart logic, we should also put following variables that are needed for correct calculation of our donut:

    var svg_width = 600;

    var svg_height = 400;

    /* Radius of the Donut should be a third of defined space */

    var radius = Math.min(svg_width, svg_height) / 3;

Now we are all set to start writing the chart generation code! I will split it in two parts, first will be rendering of needed SVG and Layout elements and second will be rendering of our Donut slices. So first part should look like this:

    var svg = d3.select("#chart")

            .attr("style", "width: " + svg_width + "px; height: " + svg_height + "px")

            .append("svg")

            .append("g")

        svg.append("g")

            .attr("class", "slices");

    var pie = d3.layout.pie()

        .sort(null)

        .value(function(d) {

            return d.value;

        });

    var arc = d3.svg.arc()

        .outerRadius(radius)

        .innerRadius(radius * 0.5);

    svg.attr("transform", "translate(" + svg_width / 2 + "," + svg_height / 2 + ")");

First we have extended our wrapper DIV with width and height styles, and appended a SVG element to it. In this SVG element we will render our Donut chart. Then we created a d3.js pie layout object and assigned a value property to return same named value property from our dataset (return d.value, where “d” is always assigned dataset for given object).

Next thing is to define an arc object with outerRadius and innerRadius. By defining the innerRadius we have actually created a Donut chart out of Pie chart by creating that hole in the middle of Pie that is half of our radius.

Last but not least, we want to position the chart in the middle of our wrapping div by calling the translate function with half of svg_width and svg_height as x,y position parameters.

Now, all we need to do is to generate the Donut/Pie slices in form of SVG Paths and interpolate it on our arc object that is already defined and centered in our wrapper DIV:

    /* Render Pie Slices */

    var slice = svg.select(".slices").selectAll("path.slice")

        .data(pie(data));

    slice.enter()

        .insert("path")

        .style("fill", function(d) { return d.data.color; });

    slice        

        .transition().duration(1000)

        .attrTween("d", function(d) {

            this._current = this._current || d;

            var interpolate = d3.interpolate(this._current, d);

            this._current = interpolate(0);

            return function(t) {

                return arc(interpolate(t));

            };

        })

    slice.exit()

        .remove();

Here is where the whole “magic” happens, that is at least what I thought when I first started using D3.js! In short words, we are assigning our dataset to a pie layout object and that object again in our .selectAll statement.
This .selectAll statement can be somehow hard to understand at the beginning but you will get used to it. Now we are going throughout every dataset entry and basically inserting a path element into our SVG with fill color value from our dataset property named color and in next step we are interpolating it on our arc element.

At the end, we should be able to see our new Donut chart by opening the HTML file in any Browser and it should be looking like on this Preview Page here.

In the next Part of this Series, I will be explaining how to Render/Export this SVG Chart as PNG Image file using PhantomJS.

jQuery Mobile - Search Filter placeholder text change

2013-01-23T10:28:00Z

If you are developing Multilanguage (or more dynamical) jQuery Mobile apps, the first thing you figure out is that Search Filter Placeholder on the of the Views is very much static and all you can do with it is to define its text directly in you HTML Code.

That was really bad if you needed to change this text dynamically (translation purposes etc.) but with the jQuery Mobile version 4.0 there is way to access this Property from the code. You are still not able to bind it but it is definitely better then having it static.

All you need to do is following:

//
// Bind your function on ‘pagechange’ document event
$(document).bind('pagechange', function () {
    //Changes the Filter Placeholder text
    changeFilterPlaceholder($('.ui-page-active').attr('id'));
});

//
// Changes the Filter Placeholder Text
changeFilterPlaceholder = function (id) {

    var filterText = "";

    if (id == "Home") {
        filterText = "Home or whatever you want";
    } else if (id == "Settings") {
        filterText = "Settings of whatever you want";
    } 

    $('.ui-input-search > .ui-input-text')
         .attr('placeholder', filterText);
}

In the next Posts I will be addressing more typical “Problems” developing
jQuery Mobile apps like Optimizing Performance on iPhone 4 or less,
Translating the jQuery Mobile apps etc. so stay tuned!

Visual Studio 2012 Debugger: Unable to start program ‘http://localhost/….’ The system cannot find the file specified.

2013-01-16T13:35:39Z

I used to get this Error Message in Visual Studio 2012 when I was about the start debugging my MVC or any other art of Web Application under Internet Explorer as soon as I installed the first RTM version of Visual Studio 2012 and Windows 8, but I fixed it fast and I thought it is not that big deal to Blog about.

Lately I saw very much Posts asking about the same problem so I was thinking that I should actually blog about it shortly an so try to save someone's time and nerves. :)

So the Problem is following:

If you are using Windows 8 and Visual Studio 2012
You want to debug any Web Application using Internet Explorer
If you use Domain Account and have in you Active Directory a Home Folder configured for you account

Then you should probably get following Error Message upon starting you Internet Explorer attached to Debugger in Visual Studio:

The easiest way (maybe not the only) is to do following:

Log in to your Domain Controller and Open “Active Directory Users and Computers”, and under your Account, delete the Home Folder Setting (local path) under Profile Tab.
(If you don’t have permissions to do this, contact your administrator and ask him to do this)
Log out from you Workstation, and log in again.

Your debugger should be working now!