Creating REST API with OAuth in VS 2013

Introduction

Web API uses OAuth framework to secure rest method. Api methods are secured by OAuth access token. To access those api, we must show accesstoken to api methods.

Steps to create API with OAuth

Step-1

Step-2

Select "Individual User Accounts"

Now application is created with OAuth authenication and API controller class surrounded by [Authorize] attribute. API are listed in http://localhost:50117/Help

 Collapse | Copy Code

[Authorize]
public class ValuesController : ApiController
{
}

Following code blocks are used to get the access token.

Registration:

User can register using API http://localhost:50117/api/Account/Register as

 Collapse | Copy Code

var registrationData =  {
    "UserName": "testapi@test.com",
    "Password": "Test$123",
    "ConfirmPassword": "Test$123"
};

$.ajax({
 type: "POST",
 url: 'http://localhost:50117/api/Account/Register/',
 data: JSON.stringify(registrationData),
 contentType: "application/json; charset=utf-8",
 success: function (response) { alert(JSON.stringify(response)); }
}).fail(function (response) { alert(JSON.stringify(response)); });

Access Token:

After registration we need to get Access token. We can use /Token api to get access token. We have enpoint code for access token  in Startup.cs.

 Collapse | Copy Code

OAuthOptions = new OAuthAuthorizationServerOptions
{
 TokenEndpointPath = new PathString("/Token"),
    Provider = new ApplicationOAuthProvider(PublicClientId),
    AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
    AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
    AllowInsecureHttp = true
};

We can post user credential and get access token as 

 Collapse | Copy Code

var accsessToken = '';
$.ajax({
 type: "POST",
 url: 'http://localhost:50117/Token',
 data: 'grant_type=password&username=testapi@test.com&password=Test$123',
 contentType: "Content-Type: application/x-www-form-urlencoded",
 success: function (response) { accsessToken = response.access_token; }
}).fail(function (response) { alert(JSON.stringify(response)); });

Access token response looks like

API Access:

After getting access token we can use api methods. AccessToken can be used as bearer token in requet header. To access api methods, we need to show access token.

 Collapse | Copy Code

$.ajax({
    type: "GET",
    url: 'http://localhost:50117/api/values',
    beforeSend: function (xhr) {
      xhr.setRequestHeader("Authorization", 'Bearer ' + accesstoken);
    },
    success: function (response) { alert(JSON.stringify(response)); }
    }).fail(function (response) { alert(JSON.stringify(response)); });

Source from

http://www.codeproject.com/Tips/832264/Creating-REST-API-with-OAuth-in-VS