How to use external authentication services on a ASP.NET MVC Web Api

Question

I'm developing an ASP.NET MVC Web Api with Visual Studio 2013, C# and .NET Framework 4.5.1.

I was reading this article and it is very interesting. It only talks about ASP.NET MVC applications and it doesn't say anything about how to implemented it with Web Api.

I think I can use it with Web Api but I don't know how because, as I read on the article, I will need a login page and a web api doesn't have one.

If I will consume that web api from mobile phones (iOS, Android, Windows Phone, etc.); what do I have to do?

Maybe I will need a login form on the mobile app, or maybe I will need a login page on my web api to allow login on Google, Facebook, etc.

Any advice?

Answer 1

@VansFannel, this is an old question and I'm guessing you have moved on, but I'm leaving this here for future seekers.

You are correct, it does not offer a login page, but it does offer what the login page itself would use.

Before I begin, go download a Chrome plugin called PostMan. I'll show a few screenshots as I go along using it. I've setup a basic WebAPI with the sample Values controller still in it, but protected with [Authorize]. I'm running my sample WebAPI at http://localhost:54211 for this example.

Here is a high level process:

Creating a User

I'm guessing your don't have any users in this new DB yet, but if you do just skip this. Otherwise, this is how you create them without a UI.

• POST to http://localhost:54211/api/Account/Register
  • The post should be x-www-form-urlencoded, and should include the following fields:
    • email --- For example "[email protected]"
    • password --- For example "Test123!"
    • confirmpassword --- For example "Test123!"

If the body is empty and the header status was 200, then it was successful:

If it failed, you'll get back a header status error of 400 and some kind of error in the body like:

Authenticating

Ok, we have a user in the database, lets authenticate with the WebAPI.

• POST to http://localhost:54211/token
  • The post should be x-www-form-urlencoded, and should include the following fields:
  • grant_type --- Set it to "password"
  • username --- For example "[email protected]"
  • password --- For example "Test123!"

In the results from the server, if successful (status 200), you will get back what is called a "Bearer Token" - its located in the "access_token" field like this:

For your test, copy that token value to the clipboard (in your app you could store this away in a variable).

Calling a WebAPI method with a Bearer Token

If you try to call an [Authorize] protected method without being authenticated, you will see something like this returned:

But you already authenticated, right? So why doesn't it know you anymore? Because it's REST based and it's stateless - it doesn't know you anymore after the call is complete. So, you have to "remind" it of who you are each time a call is made. You do this by passing the token you received earlier with every request.

• Call the URL (http://localhost:54211/api/Values/) using whatever verb you need (GET,POST,etc). I'm using GET below, because in the ValuesController that is what is required.
  • In the Header of the request, I add the following field: "Authorization" and it's value as "Bearer [token]" where [token] is the token you stored away earlier.

If you get back a success (200) you can check it's body data and it will have your response:

And that is how it's done! I hope that helps you or others down the road.