asp.net基于JWT的web api身份驗(yàn)證及跨域調(diào)用實(shí)踐
隨著多終端的出現(xiàn),越來(lái)越多的站點(diǎn)通過(guò)web api restful的形式對(duì)外提供服務(wù),很多網(wǎng)站也采用了前后端分離模式進(jìn)行開(kāi)發(fā),因而在身份驗(yàn)證的方式上可能與傳統(tǒng)的基于cookie的Session Id的做法有所不同,除了面臨跨域提交cookie的煩人問(wèn)題外,更重要的是,有些終端可能根本不支持cookie。
Json Web Token(jwt)是一種不錯(cuò)的身份驗(yàn)證及授權(quán)方案,簡(jiǎn)單的說(shuō)就是調(diào)用端調(diào)用api時(shí),附帶上一個(gè)由api端頒發(fā)的token,以此來(lái)驗(yàn)證調(diào)用者的授權(quán)信息。
但由于時(shí)間關(guān)系,不對(duì)jwt多做描述,詳細(xì)請(qǐng)參考jwt.io
下面編寫(xiě)一個(gè)基于jwt進(jìn)行身份驗(yàn)證的asp.net web api demo,為了模擬前后端分離的開(kāi)發(fā)方式,該demo包含一個(gè)靜態(tài)頁(yè)站點(diǎn)(在IIS中的路徑為http://localhost:8057)以及一個(gè)web api站點(diǎn)(http://localhost:8056)。 靜態(tài)頁(yè)站點(diǎn)僅有一個(gè)index.html,包含一個(gè)登錄功能和調(diào)用需要身份驗(yàn)證的獲取數(shù)據(jù)的接口這兩個(gè)功能,所有接口均通過(guò)ajax調(diào)用。
以下是主要需要編寫(xiě)的代碼,讓我們一步步來(lái)編寫(xiě)代碼。
開(kāi)發(fā)登錄接口
由于我們使用jwt技術(shù),在nuget上先添加封裝了jwt使用的框架。我使用了以下框架。

根據(jù)jwt的定義,在jwt中承載用戶身份信息的數(shù)據(jù)段叫payload。這里需要建立一個(gè)類(lèi)"AuthInfo"用來(lái)表示payload。
/// <summary>
/// 表示jwt的payload
/// </summary>
public class AuthInfo
{
/// <summary>
/// 用戶名
/// </summary>
public string UserName { get; set; }
/// <summary>
/// 角色列表,可以用于記錄該用戶的角色,相當(dāng)于claims的概念(如不清楚什么事claim,請(qǐng)google一下"基于聲明的權(quán)限控制")
/// </summary>
public List<string> Roles { get; set; }
/// <summary>
/// 是否是管理員
/// </summary>
public bool IsAdmin { get; set; }
接著編寫(xiě)登陸接口
public class LoginController : ApiController
{
public LoginResult Post([FromBody]LoginRequest request)
{
LoginResult rs = new LoginResult();
//假設(shè)用戶名為"admin",密碼為"123"
if (request.UserName == "admin" && request.Password == "123")
{
//如果用戶登錄成功,則可以得到該用戶的身份數(shù)據(jù)。當(dāng)然實(shí)際開(kāi)發(fā)中,這里需要在數(shù)據(jù)庫(kù)中獲得該用戶的角色及權(quán)限
AuthInfo authInfo = new AuthInfo
{
IsAdmin = true,
Roles = new List<string> { "admin", "owner" },
UserName = "admin"
};
try
{
//生成token,SecureKey是配置的web.config中,用于加密token的key,打死也不能告訴別人
byte[] key = Encoding.Default.GetBytes(ConfigurationManager.AppSettings["SecureKey"]);
//采用HS256加密算法
string token = JWT.JsonWebToken.Encode(authInfo, key, JWT.JwtHashAlgorithm.HS256);
rs.Token = token;
rs.Success = true;
}
catch
{
rs.Success = false;
rs.Message = "登陸失敗";
}
}
else
{
rs.Success = false;
rs.Message = "用戶名或密碼不正確";
}
return rs;
}
}
到此,我們已經(jīng)編寫(xiě)好登陸接口。如果用戶名密碼都正確,登陸接口生成一個(gè)包含著用戶身份信息的token作為響應(yīng)。前端收到token后,在后續(xù)的請(qǐng)求中需要附帶該token,用于證明其身份。
AuthorizeAttribute
接下來(lái),我們需要編寫(xiě)有關(guān)權(quán)限控制及token解析有關(guān)的代碼。
web api框架提供了AuthorizeAttribute,用于在調(diào)用api前對(duì)請(qǐng)求進(jìn)行驗(yàn)證,通過(guò)重寫(xiě)AuthorizeAttribute.IsAuthorized方法可以自定義驗(yàn)證邏輯
public class ApiAuthorizeAttribute : AuthorizeAttribute
{
protected override bool IsAuthorized(HttpActionContext actionContext)
{
//前端請(qǐng)求api時(shí)會(huì)將token存放在名為"auth"的請(qǐng)求頭中
var authHeader = from h in actionContext.Request.Headers where h.Key == "auth" select h.Value.FirstOrDefault();
if (authHeader != null)
{
string token = authHeader.FirstOrDefault();
if (!string.IsNullOrEmpty(token))
{
try
{
//對(duì)token進(jìn)行解密
string secureKey = System.Configuration.ConfigurationManager.AppSettings["SecureKey"];
AuthInfo authInfo = JWT.JsonWebToken.DecodeToObject<AuthInfo>(token, secureKey);
if (authInfo != null)
{
//將用戶信息存放起來(lái),供后續(xù)調(diào)用
actionContext.RequestContext.RouteData.Values.Add("auth", authInfo);
return true;
}
else
return false;
}
catch
{
return false;
}
}
else
return false;
}
else
return false;
}
}
編寫(xiě)一個(gè)受AuthorizeAttribute保護(hù)的接口,假設(shè)該接口返回和用戶相關(guān)的敏感信息。
需要注意的是,由于前端站點(diǎn)和web api站點(diǎn)使用了不同的端口,因此即使scheme(http)和address都相同,但仍然造成了跨域訪問(wèn)。因此必須對(duì)web api站點(diǎn)啟用允許跨域訪問(wèn)。實(shí)際上CORS(跨域資源共享)或所謂的same origin policy(同源策略)是瀏覽器上的概念,服務(wù)器需要做的僅是根據(jù)需要返回一下幾個(gè)響應(yīng)頭:
- Access-Control-Allow-Origin:表示該站點(diǎn)允許被那些源(域)訪問(wèn)
- Access-Control-Allow-Headers:表示該站點(diǎn)允許那些自定義的請(qǐng)求頭(我們通過(guò)jquery.ajax發(fā)送一個(gè)包含著token的名為"auth"的請(qǐng)求頭,因此需要api站點(diǎn)設(shè)置允許"auth"請(qǐng)求頭)
- Access-Control-Allow-Methods:表示該站點(diǎn)允許那些請(qǐng)求謂詞(GET,POST,OPTIONS,PUT...)
在asp.net web api中,有兩種方式可以開(kāi)啟允許跨域訪問(wèn):
第一種是在Nuget上安裝"Microsoft.AspNet.WebApi.Cors"包,并對(duì)api controller使用[EnableCors]特性
第二種是在web.config中進(jìn)行配置:

必須注釋掉"<remove name="OPTIONSVerbHandler"/>"以開(kāi)啟OPTIONS謂詞處理,否則跨域訪問(wèn)時(shí)prefight會(huì)失敗。
返回和用戶相關(guān)的敏感信息的api代碼如下:
//標(biāo)記該controller要求身份驗(yàn)證
[ApiAuthorize]
public class UserController : ApiController
{
public string Get()
{
//獲取回用戶信息(在ApiAuthorize中通過(guò)解析token的payload并保存在RouteData中)
AuthInfo authInfo = this.RequestContext.RouteData.Values["auth"] as AuthInfo;
if (authInfo == null)
return "無(wú)效的驗(yàn)收信息";
else
return string.Format("你好:{0},成功取得數(shù)據(jù)",authInfo.UserName);
}
}
前端站點(diǎn)
到此,api站點(diǎn)的代碼編寫(xiě)完成。接下來(lái)編寫(xiě)前端站點(diǎn)的代碼。
前端站點(diǎn)只有一個(gè)html頁(yè)面,包含兩個(gè)簡(jiǎn)單功能:調(diào)用登錄接口進(jìn)行登錄,以及調(diào)用被身份驗(yàn)證保護(hù)的獲取數(shù)據(jù)的接口

前端頁(yè)面的關(guān)鍵腳本代碼如下:
$(function () {
//調(diào)用api站點(diǎn)的登錄接口,接口在登錄成功后返回一個(gè)token。
$("#login").on("click", function () {
$.ajax({
url: "http://localhost:8056/api/login",
data: $("form").serialize(),
method: "post",
success: function (data) {
if (data.Success) {
//為簡(jiǎn)單起見(jiàn),將token保存在全局變量中。
window.token = data.Token;
alert("登錄成功");
} else {
alert("登錄失敗:" + data.Message);
}
}
});
});
//調(diào)用api站點(diǎn)的獲取數(shù)據(jù)的接口,該接口要求身份驗(yàn)證。
$("#invoke").on("click", function () {
$.ajax({
url: "http://localhost:8056/api/user",
method: "get",
headers: { "auth": window.token },//通過(guò)請(qǐng)求頭來(lái)發(fā)送token,放棄了通過(guò)cookie的發(fā)送方式
complete: function (jqXHR,textStatus) {
alert(jqXHR.responseText);
},
});
});
});
</script>
接下來(lái),在不登錄和登錄的情況下,調(diào)用獲取數(shù)據(jù)的接口,并使用fiddler監(jiān)視一下請(qǐng)求和響應(yīng)的過(guò)程.
在不登錄情況下直接按“調(diào)用接口”,服務(wù)器返回401未授權(quán)信息

以下是通信情況:

這次先登錄,再調(diào)用接口,同樣在fiddler中監(jiān)視一下通信情況。

在fiddler中可以看到整個(gè)過(guò)程瀏覽器發(fā)出了3個(gè)請(qǐng)求,分別是登錄,調(diào)用接口前的prefight和實(shí)際調(diào)用接口:

來(lái)看看每個(gè)通信的情況
登錄過(guò)程:

prefight

實(shí)際發(fā)出get請(qǐng)求調(diào)用接口,獲得數(shù)據(jù)

到此,基于JWT進(jìn)行身份驗(yàn)證及跨域訪問(wèn)的demo已經(jīng)完成,如有錯(cuò)誤的地方請(qǐng)指正
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Asp.NET Core 如何調(diào)用WebService的方法
這篇文章主要介紹了Asp.NET Core 如何調(diào)用WebService的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
ASP.NET輸出PNG圖片時(shí)出現(xiàn)GDI+一般性錯(cuò)誤的解決方法
偶原來(lái)的用ASP.NET生成驗(yàn)證碼圖片時(shí)用的是JPG格式,今天想把它改成PNG格式的,結(jié)果就出現(xiàn)GDI+一般性錯(cuò)誤,查了N久資料,才發(fā)現(xiàn)解決的辦法,對(duì)分享此解決辦法的網(wǎng)友深表感謝2009-01-01
asp.net core調(diào)用wps實(shí)現(xiàn)word轉(zhuǎn)pdf的過(guò)程
這篇文章主要介紹了asp.net core調(diào)用wps實(shí)現(xiàn)word轉(zhuǎn)pdf的過(guò)程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
ASP.NET自定義Web服務(wù)器控件之Button控件
這篇文章主要介紹了ASP.NET自定義Web服務(wù)器控件之Button控件,詳細(xì)講述了Button控件的實(shí)現(xiàn)代碼、前臺(tái)頁(yè)面的調(diào)用以及對(duì)應(yīng)的事件響應(yīng)代碼,具有很好的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11
http轉(zhuǎn)https的實(shí)戰(zhàn)記錄(iis 7.5)
這篇文章主要給大家介紹了關(guān)于http轉(zhuǎn)https的相關(guān)資料,文中是最近的一次實(shí)戰(zhàn)記錄,基于iis7.5,通過(guò)一步步的圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2018-01-01
.NET Core讀取配置文件方式詳細(xì)總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了.NET Core讀取配置文件方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
使用HttpClient消費(fèi)ASP.NET Web API服務(wù)案例
這篇文章介紹了使用HttpClient消費(fèi)ASP.NET Web API服務(wù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
asp.net Cookie值中文亂碼問(wèn)題解決方法
cookie里面不能寫(xiě)中文,是由于cookie先天的編碼方式造成的,所以有必要存在一種中間的編碼方式:URLEncode是最好的選擇,感興趣的你可千萬(wàn)不要錯(cuò)過(guò)了哈,或許本文提供的知識(shí)點(diǎn)對(duì)你學(xué)習(xí)cookie有所幫助2013-02-02

