Modern web applications have an explicit separation between the server and the client. Clients use AngularJS, ReactJS, EmberJS, and others. Servers use NodeJS, Java, and, .NET. Microsoft’s .NET platform is a strong, battle-proven server-side framework, and AngularJS is arguably the most popular client-side framework. They work seamlessly together, but adding solid, secure authentication can seem daunting. Leveraging Stormpath makes it easier than you’d think!

Get the Base Application

If you want to follow along with this article, you can clone the master branch from Github or download it from here. If you just want to see the finished project, you can clone the finished branch, or download the finished app from here.

1. Get Your Stormpath Credentials

Login to your Stormpath Account and there is a link to Manage API Keys under Developer Tools on the right-hand side of the admin home page (If this is a new Stormpath account, the link will say “Create API Key”). At the bottom of the page there is an API Keys section, just click the “Create API Key” button. After confirming with the modal dialog, a file named apiKey-[APIKEYID].properties should automatically be downloaded to your computer. Hang on to that, and we’ll use it later.

2. Add Stormpath to Your ASP.NET Core WebAPI

Visual Studio 2015
Open the Visual Studio Package Manager console and enter the following command:

Visual Studio Code
If you aren’t using Visual Studio, you can also edit project.json file add the following line to the dependencies section:

Then run dotnet restore (Chances are, VS Code will prompt you with a “Restore” button at the top of the IDE).

Adding the Stormpath Middleware

Open the Startup.cs file in the root of your project. This file is required for ASP.NET Core applications and is similar to Global.asax file in ASP.NET. At the top of the file, add this using statement:

Then, edit the ConfigureServices and Configure methods as follows:

3. Add Your Stormpath Credentials to Your Application

Now we’ll install our Stormpath credentials into the application. Create a file in the root of the application and name it stormpath.yaml. Use the API key and secret contained in the apiKey.properties file you downloaded, as well as the Stormpath Application href to fill in the values in the YAML file:

Configuration via a YAML file is simple and straightforward, but it’s important to not check this file into public source control, as it would expose your API key and secret. For production, Stormpath strongly recommends you to store these values as environment variables, STORMPATH_APPLICATION_HREF, STORMPATH_CLIENT_APIKEY_ID and STORMPATH_CLIENT_APIKEY_SECRET respectively. Read the documentation on Environment Variables here.

4. Add Stormpath to the AngularJS App

You can use your package manager of choice (Bower or NPM) for client-side dependencies. For simplicity’s sake, we’re going to get the reference directly from Github using Rawgit.

Add a link reference in your index.html file in the root of your client app to the Stormpath Angular SDK and templates files.

Then add the references to the angular app module:

5. Add Login and Register to the Angular App

Next, we’ll add some menu items in the index.html file:

And the routes that go with them:

We’ve added a login and register route to the application’s router, and we’ve updated the todo route to only be accessible by logged-in users.

The “Logout” route is completely handled by Stormpath, but we’ll need some handlers for the “Login” and “Register” routes. I’ve created a folder called auth to put these controllers in. First, the controllers:

login.controller.js

register.controller.js

Also, don’t forget to at the script references to your index.html page:

You’ll notice, both controllers are essentially empty. That’s because the real magic happens in the views:

login.view.html

register.view.html

We used a few directives here that come with the Stormpath Angular SDK. The sp-login-form and sp-registration-form create their respective forms, and the post-login-state tells the application where to go once the registration process is done and the application logs us in (assuming auto-login is enabled in the Stormpath Management UI).

6. Configure the Angular App

There are some things that need to be configured to make the Angular/.NET/Stormpath combination work seamlessly. First, we need to set up the routing hash and the configuration for the registration form’s POST behavior:
(Don’t forget to inject the $locationProvider and STORMPATH_CONFIG into the config function for the application)

For html5Mode to work in Angular, you must specify the base URL in the index.html file:

This turns on HTML5-type routing for the Angular application, and the STORMPATH_CONFIG line tells the Angular SDK to POST the registration form as application/json. By default, the Angular SDK sends the registration information as application/x-www-form-urlencoded, but the ASP.NET SDK expects JSON to be posted. This line just makes sure they’re on the same page as far as Content-Type headers.

Lastly, we’ll configure how the application behaves after login and after logout:

This code lets the application know that we want users to be routed to the todo route once someone has successfully logged in and that we want them to be routed to the login routed when they log out.

7. Adding Authorization to the Server Side

Now that we have the client side authenticating users, we need to make sure the server side only returns ToDos for the currently logged in user. First, we need to make sure that when the user requests their ToDos, they’re authenticated by adding the Authorize attribute to the TodoController:

Then we just make sure the queries filter by the currently logged in user and attach the current user to our ToDos when they’re being added.

That’s it! When you fire up the application and try to navigate to the todo page, you should be redirected to the login route, and it should look something like this:

screen-shot-2016-10-31-at-11-59-03-am

You should now only see ToDos for the currently logged in user, and when you add a ToDo, it should be saved as a ToDo for that user!


Excited to learn more about ASP.NET Core, or user authentication with Stormpath? Check out these resources:

  • Watch: Token Authentication with ASP.NET Core
  • Simple Social Login with ASP.NET Core
  • Tutorial: Build an ASP.NET Core Application with User Authentication
  • And as always, hit me up in the comments below, or on Twitter @leebrandt with questions!

    • Gianmaria Gregori

      Thank you for the great tutorial, that clarifies the use of Stormpath with Asp.Net Core and AngularJS.
      I have encountered only some minor issues for the proper testing of your final release.
      For solving them, in Startup.cs I have uncommented the two rows that create the database in memory and commented the assignment of the Id properties in the records to seed.
      The last change needed to serve index.html as default page is the intervention to the launchUrl property of the launchSettings.json as stated in this Stackoverflow answer: http://stackoverflow.com/questions/37770131/net-core-rc2-webapi-with-index-html-as-default-page.

      • Lee Brandt

        Thanks for the feedback. I will update the code and the post shortly.