【问题标题】:How to Call ASP.NET Web API base on Ajax with GET/POST and Token key如何使用 GET/POST 和 Token 键调用基于 Ajax 的 ASP.NET Web API
【发布时间】:2016-06-03 07:55:19
【问题描述】:

我知道如何将 Ajax 与 GET/POST 数据一起使用,如下面的代码,但我不知道如何将它与 Token 密钥一起使用(已获得 Token 密钥)

$("#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) {
            }
        });
    });

【问题讨论】:

    标签: javascript jquery ajax http token


    【解决方案1】:

    我找到了如下代码的方法

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

    当您获得令牌密钥后,您可以在“Headers”中添加代码。

    带有令牌的完整 JavaScript 代码

    <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】:

      标记如何使用带有基本令牌认证的web api[ref]

      请按照以下步骤操作
      Step 1. 创建虚拟数据库“Test”和两个表“Users”和“Employee”

          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') 
      

      步骤2.使用WebAPI(无身份验证)新建ASP.NET项目并在NuGet中找到点击安装;安装后,这些包将在参考中可用。

      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

      步骤 3. 删除 Global.asax 并在 Global.asax 文件的相同位置添加新类“Startup.cs”并添加以下代码。 (不用担心错误信息)

      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);  
              }  
          }  
      }
      

      步骤 4. 添加新项目并选择 Ado.Net 实体模型(名称:EmployeeModel)

      第 5 步。将新控制器添加为 EmployeeController 并添加以下代码。

      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. 在Provider文件夹中添加“SimpleAuthorizationServerProvider.cs”类名并添加如下代码

      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;  
                  }  
              }  
          }  
      }
      

      第 7 步。您只需在 app_Start 文件夹的 WebAPIConfig.cs 中启用 CORS。

      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();  
              }  
          }  
      }
      

      在服务器端完成

      客户端 您可以使用邮递员或提琴手来测试服务器代码是否可以

      更多详情可以查看[ref1] [ref2]

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-11-29
        • 2017-07-26
        • 1970-01-01
        • 2013-08-25
        • 2021-07-11
        • 2020-06-30
        • 1970-01-01
        相关资源
        最近更新 更多