asp.net基于JWT的web api身份验证及跨域调用实践(2)

Access-Control-Allow-Headers:表示该站点允许那些自定义的请求头(我们通过jquery.ajax发送一个包含着token的名为"auth"的请求头,因此需要api站点设置允许"auth"请求头)

Access-Control-Allow-Methods:表示该站点允许那些请求谓词(GET,POST,OPTIONS,PUT...)

在asp.net web api中,有两种方式可以开启允许跨域访问:

第一种是在Nuget上安装"Microsoft.AspNet.WebApi.Cors"包,并对api controller使用[EnableCors]特性

第二种是在web.config中进行配置:

asp.net基于JWT的web api身份验证及跨域调用实践

必须注释掉"<remove/>"以开启OPTIONS谓词处理,否则跨域访问时prefight会失败。

返回和用户相关的敏感信息的api代码如下:

//标记该controller要求身份验证 [ApiAuthorize] public class UserController : ApiController { public string Get() { //获取回用户信息(在ApiAuthorize中通过解析token的payload并保存在RouteData中) AuthInfo authInfo = this.RequestContext.RouteData.Values["auth"] as AuthInfo; if (authInfo == null) return "无效的验收信息"; else return string.Format("你好:{0},成功取得数据",authInfo.UserName); } }

前端站点

到此,api站点的代码编写完成。接下来编写前端站点的代码。

前端站点只有一个html页面,包含两个简单功能:调用登录接口进行登录,以及调用被身份验证保护的获取数据的接口

asp.net基于JWT的web api身份验证及跨域调用实践

前端页面的关键脚本代码如下:

$(function () { //调用api站点的登录接口,接口在登录成功后返回一个token。 $("#login").on("click", function () { $.ajax({ url: "http://localhost:8056/api/login", data: $("form").serialize(), method: "post", success: function (data) { if (data.Success) { //为简单起见,将token保存在全局变量中。 window.token = data.Token; alert("登录成功"); } else { alert("登录失败:" + data.Message); } } }); }); //调用api站点的获取数据的接口,该接口要求身份验证。 $("#invoke").on("click", function () { $.ajax({ url: "http://localhost:8056/api/user", method: "get", headers: { "auth": window.token },//通过请求头来发送token,放弃了通过cookie的发送方式 complete: function (jqXHR,textStatus) { alert(jqXHR.responseText); }, }); }); }); </script>

接下来,在不登录和登录的情况下,调用获取数据的接口,并使用fiddler监视一下请求和响应的过程.

在不登录情况下直接按“调用接口”,服务器返回401未授权信息

asp.net基于JWT的web api身份验证及跨域调用实践

以下是通信情况:

asp.net基于JWT的web api身份验证及跨域调用实践

这次先登录,再调用接口,同样在fiddler中监视一下通信情况。

asp.net基于JWT的web api身份验证及跨域调用实践

在fiddler中可以看到整个过程浏览器发出了3个请求,分别是登录,调用接口前的prefight和实际调用接口:

asp.net基于JWT的web api身份验证及跨域调用实践

来看看每个通信的情况

登录过程:

asp.net基于JWT的web api身份验证及跨域调用实践

prefight

asp.net基于JWT的web api身份验证及跨域调用实践

实际发出get请求调用接口,获得数据

asp.net基于JWT的web api身份验证及跨域调用实践

到此,基于JWT进行身份验证及跨域访问的demo已经完成,如有错误的地方请指正

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdsxgp.html