How to Call ASP.NET Web API base on Ajax with GET/POST and Token key

问题

I know how to use Ajax with GET/POST data like as following code but I don’t know how to use it with Token key (Has got a Token key)

$("#read1").click(function () {  
        $.support.cors = true;
        $.ajax({            
            crossDomain: true,
            url: 'http://localhost:65370/api/travels',
            type: 'GET',
            cache: false,
            error: function (xhr, status, errorThrow) {
            },
            complete: function (xhr) {
            },
            success: function (data) {
            }
        });
    });

  $("#create1").click(function () {   
        var person = {
            "travel_id": 4
        };
        $.ajax({
            },
            type: "post",
            url: 'http://localhost:65370/api/travels',
            datatype: "json",
            contenttype: "application/json; charset=utf-8",
            data: person,
            success: function (data) {
            },
            error: function (xhr, status, errorThrow) {
            }
        });
    });

回答1:

I have found the method as following code

    //you just need to put it in Ajax content 
    headers:{
                'Authorization': 'Bearer ' + token
            }

When you got the token key you can add the code in the “Headers”.

Full JavaScript code with token

<script>

    $(document).ready(function()
    {
        var bearer ="";
        var user ={
            grant_type:'password',
            username:'a',
            password:'a'
        };
        $.ajax({
            type: "POST",
            url: "http://localhost:50971/token",
            data:user,
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (data) {
                bearer = JSON.parse(JSON.stringify(data));
                bearer = bearer.access_token;
                Authorization();
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });


        function Authorization() {
            $.ajax({
                type: "GET",
                url: "http://localhost:50971/api/employee/GetEmployees",
                headers: {
                    'Authorization': 'Bearer ' + bearer
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (a) {
                    alert(JSON.stringify(a))
                    //$.each(a, function (x, y) {
                    //    alert(x)
                    //    alert(y)
                    //    $.each(y, function (x, y) {
                    //        alert(x)
                    //        alert(y)
                    //    });
                    //});

                    //alert("Hello: " + a.Name + ".\nCurrent Date and Time: " + a.address);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        }
    })


</script>

回答2:

To mark how to use web api with base token authentication [ref]

Please follow as below steps
Step 1. To create dummy database “Test” and two tables “Users” and “Employee” respectively

    CREATE DATABASE TEST   GO     

    USE TEST   GO      

    CREATE TABLE Users(Id INT IDENTITY(1,1) PRIMARY KEY, Name varchar(255) NOT NULL, UserName varchar(50), Password varchar(50))   INSERT INTO [TEST].[dbo].[Users](Name, UserName, Password) VALUES('Mukesh Kumar', 'Mukesh', AAAAAA');      


    CREATE TABLE Employees(Id INT IDENTITY(1,1) PRIMARY KEY, Name varchar(255) NOT NULL, Address varchar(500))         
INSERT INTO Employees (Name, Address) VALUES('Mukesh Kumar', 'New Delhi')   
INSERT INTO Employees (Name, Address) VALUES('John Right', 'England')    
INSERT INTO Employees (Name, Address) VALUES('Chris Roy', 'France')    
INSERT INTO Employees (Name, Address) VALUES('Anand Mahajan', 'Canada')       
INSERT INTO Employees (Name, Address) VALUES('Prince Singh', 'India') 

Step 2.To new ASP.NET project with WebAPI (no Authentication) and find out in NuGet click to install; After Installation, these packages will be available in references.

1.Microsoft.Owin
2.Microsoft.Owin.Host.SystemWeb
3.Microsoft.Owin.Security.OAuth
4.Microsoft.Owin.Security
5.Microsoft.AspNet.Identity.Owin
6.Microsoft.AspNet.WebApi.Cors

Step 3. remove Global.asax and add new class “Startup.cs” at the same location of Global.asax file and add following code. (don't worry about error message)

using EmployeeService.Provider;  
using Microsoft.Owin;  
using Microsoft.Owin.Security.OAuth;  
using Owin;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Http;  

[assembly: OwinStartup(typeof(EmployeeService.Startup))]  
namespace EmployeeService  
{  
    public class Startup  
    {  
        public void ConfigureAuth(IAppBuilder app)  
        {  

            var OAuthOptions = new OAuthAuthorizationServerOptions  
            {  
                AllowInsecureHttp = true,  
                TokenEndpointPath = new PathString("/token"),  
                AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(20),  
                Provider = new SimpleAuthorizationServerProvider()  
            };  

            app.UseOAuthBearerTokens(OAuthOptions);  
            app.UseOAuthAuthorizationServer(OAuthOptions);  
            app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions());  

            HttpConfiguration config = new HttpConfiguration();  
            WebApiConfig.Register(config);  
        }  

        public void Configuration(IAppBuilder app)  
        {  
            ConfigureAuth(app);  
            GlobalConfiguration.Configure(WebApiConfig.Register);  
        }  
    }  
}

Step 4. To add New Item and choose Ado.Net Entity Model (Name:EmployeeModel)

Step 5. To add new controller as EmployeeController and add following code.

using System.Collections.Generic;  
using System.Linq;  
using System.Web.Http;  

namespace EmployeeService.Controllers  
{  
    public class EmployeeController : ApiController  
    {  
        [HttpGet]  
        [Authorize]  
        public List<Employee> GetEmployees()  
        {  
            using (var db = new TESTEntities())  
            {  
                var employees = db.Employees.ToList();  
                return employees;  
            }  
        }  
    }  
}

Step 6. To add class name of "SimpleAuthorizationServerProvider.cs" in the folder of Provider and add following code

using Microsoft.Owin.Security;  
using Microsoft.Owin.Security.OAuth;  
using System.Collections.Generic;  
using System.Linq;  
using System.Security.Claims;  
using System.Threading.Tasks;  
using System.Web.Http.Cors;  

namespace EmployeeService.Provider  
{  
    [EnableCors(origins: "*", headers: "*", methods: "*")]  
    public class SimpleAuthorizationServerProvider : OAuthAuthorizationServerProvider  
    {  
        public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)  
        {  
            context.Validated(); //   
        }  

        public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)  
        {  
            var identity = new ClaimsIdentity(context.Options.AuthenticationType);  
            context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });  

            using (var db = new TESTEntities())  
            {  
                if (db != null)  
                {  
                    var empl = db.Employees.ToList();  
                    var user = db.Users.ToList();  
                    if (user != null)  
                    {  
                        if (!string.IsNullOrEmpty(user.Where(u => u.UserName == context.UserName && u.Password ==  context.Password).FirstOrDefault().Name))  
                        {  
                            identity.AddClaim(new Claim("Age", "16"));  

                            var props = new AuthenticationProperties(new Dictionary<string, string>  
                            {  
                                {  
                                    "userdisplayname", context.UserName  
                                },  
                                {  
                                     "role", "admin"  
                                }  
                             });  

                            var ticket = new AuthenticationTicket(identity, props);  
                            context.Validated(ticket);  
                        }  
                        else  
                        {  
                            context.SetError("invalid_grant", "Provided username and password is incorrect");  
                            context.Rejected();  
                        }  
                    }  
                }  
                else  
                {  
                    context.SetError("invalid_grant", "Provided username and password is incorrect");  
                    context.Rejected();  
                }  
                return;  
            }  
        }  
    }  
}

Step 7. You just need to Enable CORS in WebAPIConfig.cs at app_Start folder.

using Newtonsoft.Json.Serialization;  
using System.Linq;  
using System.Net.Http.Formatting;  
using System.Web.Http;  
using System.Web.Http.Cors;  

namespace EmployeeService  
{  
    public class WebApiConfig  
    {  
        public static void Register(HttpConfiguration config)  
        {  
            // Web API configuration and services  

            EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");  
            config.EnableCors(cors);  

            // Web API routes  
            config.MapHttpAttributeRoutes();  

            config.Routes.MapHttpRoute(  
                name: "DefaultApi",  
                routeTemplate: "api/{controller}/{id}",  
                defaults: new { id = RouteParameter.Optional }  
            );  

            var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();  
            jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();  
        }  
    }  
}

Done with server side

Client side you can use postman or fiddler to test server code is okay

More detail you can check [ref1] [ref2]

来源：https://stackoverflow.com/questions/37608965/how-to-call-asp-net-web-api-base-on-ajax-with-get-post-and-token-key