Category Archives: Web Development

.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

A U.S. State paid over $1,000,000 USD (million) for “fake” security in their web application!

I have the “pleasure” of interacting with a software for a US state that was contracted out to a third party.  The third party vendor is not known for high caliber software, but what found recently while digging around their web application really made me cringe.

When you first login to the application, a little modal pops up and alerts you to the fact that it is connecting to secure servers.

I noticed after the redirect, I ended up in a non-ssl web application.  I mean, literally, no SSL ANYWHERE.  Every piece of information posted back and forth to the web application is done in PLAIN TEXT across the magical internet pipes.

This piqued my interest, and led me to dig around the HTML/JS that was loading during that modal.

To my surprise, NOTHING was being done at all!  This piece of code literally LIES to its users, suggesting that it is going into secure channels.

Knowing the state paid over $1,000,000 for this web application makes me sick to my stomach.  The system has been plagues with issues since launch, (as most web applications do), but this really is going above and beyond.  Seeing the commented “alert” let’s me know someone was debugging this thing at some point.  What was the time spent to write this code (essentially misleading users about security) vs the time it would have taken to install an actual SSL certificate?!

BioCrap_SecureLogin

Tagged ,

Card – Make your credit card form better in one line of code.

Card – Make your credit card form better in one line of code.

  • Animations for 4 different card types
  • An intuitive experience for your users
  • Pure CSS, HTML, and Javascript (no images)
  • 100% free and open source
Tagged ,

CodyHouse

CodyHouse

A new resource for code snippets!

Tagged ,

CSS Vocabulary

CSS Vocabulary

Man what a great resource!  Easily learn the different terms related to CSS!

Tagged

Git Push Heroku Master: Now 40% Faster

Git Push Heroku Master: Now 40% Faster

Nice!  Heroku just made Git pushes 40% faster!

Tagged ,

PERFECTLY PAIRED: USING SYMMETRY IN WEB DESIGN

PERFECTLY PAIRED: USING SYMMETRY IN WEB DESIGN

I never really knew how deep symmetry goes into web design.  I knew about natural symmetry in plants, animals, etc, but it never occurred to me how “natural” the design is to us.

Tagged

Understanding the Z-Layout in Web Design

Understanding the Z-Layout in Web Design

I had been using the “Z-Layout” unknowingly for some time now.  It just felt more natural.  Now that I understand the reasoning behind it I’ll definitely try to push the concept more.

Tagged

Check your website’s SEO problems for free.

Check your website’s SEO problems for free.

Nifty little site that checks for some basic SEO techniques on a webpage.  It is not perfect, but is definitely a good base line.

Tagged