Monthly Archives: February 2016

.NET Authentication In WebAPI 2 With Cross Domain Support

Recently I had a project requirement to create a .NET WebAPI 2 project that supported authentication as well as cross domain support (CORS / Cross-Origin Resource Sharing).  This will allow external domains to POST requests to the authentication API, and we will return an OAuth token that can be used in later WebAPI requests.

All .NET code examples below are in C#.

First start a new “ASP.NET Web Application” project.  Select the “WebAPI” template, and make sure “Individual User Accounts” is selected.

Second, use NuGet to install the following packages:

  • Microsoft.AspNet.Cors
  • Microsoft.AspNet.WebApi.Cors
  • Microsoft.Owin.Cors

These packages will enable you to configure CORS for API and Owin calls.

Under “App_Start/Startup.Auth.cs” inside the function “ConfigureAuth” add this line of code to the top of the function (yes, having it be the first line is very important).

public void ConfigureAuth(IAppBuilder app)
{
    // Allow cross domain authentication requests
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

    // ..... The rest of the code for the function goes below here

Please note, this line will allow requests from ANY external domain. If you want to lock down which domains have rights to post to the authentication API you’ll need more configuration at this point. Typically you will NOT want requests from any domain, and will have a list of accepted domains.

Your login URL will be “/Token”. This can be adjusted in “App_Start/Startup.Auth.cs” where “OAuthOptions” is defined. Specifically the “TokenEndpointPath” is the parameter that controls the route.

When POST’ing to “/Token” you’ll send three parameters.  The “grant_type” is a static string which will be set to “password”.  The “username” and “password” parameters will be the username and password you are attempting to authenticate with.

var loginData = {
    grant_type: 'password',
    username: 'yourusername',
    password: 'yourpassword'
};

If your POST is successful, the response will contain an “access_token”. For all future WebAPI calls you’ll want to set an “Authorization” header to “Bearer ” followed by your access_token you received from your initial login.

Here are some resources that helped me with my project!

Sample .NET C# WebAPI project with local individual accounts.
http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

Explanation of posting form data in AngularJS
http://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

Tagged , , , ,

AngularJS and MomentJS – Formatting UTC to local time using a custom filter

Frequently in our app, we need to show date/time’s which are stored in our database as UTC time.  From a users perspective however, it is best to view datetime’s in their local timezones.

MomentJS is a great library that is used pretty heavily to display date/time’s in JavaScript in a friendly manner.  Combining MomentJS with AngularJS (and with a small custom filter).

We use “angular-moment” which provides Moment.JS directives for Angular.JS (timeago and more).

https://github.com/urish/angular-moment

We also like to have some conformity for formatting date/times throughout our app. Centralizing the formatting allows use to easily change the style/layout/format of our date/time’s and have that change occur throughout our entire app!

Once you have “angular-moment” running in your AngularJS app, add the custom filter to your AngularJS app.

Our custom filter: (where “angularJSApp” is the name of your AngularJS app)

var angularJSApp = angular.module('angularJSApp', ['angularMoment']);

angularJSApp.filter('UTCToNow', ['moment', function (moment) {
     return function (input, format) {
            if(format)
            {
                return moment.utc(input).local().format('dddd, MMMM Do YYYY, h:mm:ss a');
            }
            else
            {
                return moment.utc(input).local();
            }
        };
    }]
);

How to use the custom filter in our HTML:

{{dateCreated | UTCToNow: true }}
<br />
<span am-time-ago="dateCreated | UTCToNow"></span>

You should now see your date/time in your local timezone