隨著多終端的出現(xiàn)，越來越多的站點(diǎn)通過web api restful的形式對外提供服務(wù)，很多網(wǎng)站也采用了前后端分離模式進(jìn)行開發(fā)，因而在身份驗證的方式上可能與傳統(tǒng)的基于cookie的Session Id的做法有所不同，除了面臨跨域提交cookie的煩人問題外，更重要的是，有些終端可能根本不支持cookie。
Json Web Token(jwt)是一種不錯的身份驗證及授權(quán)方案，簡單的說就是調(diào)用端調(diào)用api時，附帶上一個由api端頒發(fā)的token，以此來驗證調(diào)用者的授權(quán)信息。
但由于時間關(guān)系，不對jwt多做描述，詳細(xì)請參考jwt.io
下面編寫一個基于jwt進(jìn)行身份驗證的asp.net web api demo，為了模擬前后端分離的開發(fā)方式，該demo包含一個靜態(tài)頁站點(diǎn)(在IIS中的路徑為http://localhost:8057)以及一個web api站點(diǎn)(http://localhost:8056)。 靜態(tài)頁站點(diǎn)僅有一個index.html，包含一個登錄功能和調(diào)用需要身份驗證的獲取數(shù)據(jù)的接口這兩個功能，所有接口均通過ajax調(diào)用。
以下是主要需要編寫的代碼，讓我們一步步來編寫代碼。
開發(fā)登錄接口
由于我們使用jwt技術(shù)，在nuget上先添加封裝了jwt使用的框架。我使用了以下框架。
根據(jù)jwt的定義，在jwt中承載用戶身份信息的數(shù)據(jù)段叫payload。這里需要建立一個類"AuthInfo"用來表示payload。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/// <summary> /// 表示jwt的payload /// </summary> public class AuthInfo { /// <summary> /// 用戶名 /// </summary> public string UserName { get; set; } /// <summary> /// 角色列表，可以用于記錄該用戶的角色,相當(dāng)于claims的概念(如不清楚什么事claim，請google一下"基于聲明的權(quán)限控制") /// </summary> public List<string> Roles { get; set; } /// <summary> /// 是否是管理員 /// </summary> public bool IsAdmin { get; set; } |
接著編寫登陸接口
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
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í)際開發(fā)中，這里需要在數(shù)據(jù)庫中獲得該用戶的角色及權(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)編寫好登陸接口。如果用戶名密碼都正確，登陸接口生成一個包含著用戶身份信息的token作為響應(yīng)。前端收到token后,在后續(xù)的請求中需要附帶該token,用于證明其身份。
AuthorizeAttribute
接下來，我們需要編寫有關(guān)權(quán)限控制及token解析有關(guān)的代碼。
web api框架提供了AuthorizeAttribute，用于在調(diào)用api前對請求進(jìn)行驗證，通過重寫AuthorizeAttribute.IsAuthorized方法可以自定義驗證邏輯
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
public class ApiAuthorizeAttribute : AuthorizeAttribute { protected override bool IsAuthorized(HttpActionContext actionContext) { //前端請求api時會將token存放在名為"auth"的請求頭中 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 { //對token進(jìn)行解密 string secureKey = System.Configuration.ConfigurationManager.AppSettings["SecureKey"]; AuthInfo authInfo = JWT.JsonWebToken.DecodeToObject<AuthInfo>(token, secureKey); if (authInfo != null) { //將用戶信息存放起來，供后續(xù)調(diào)用 actionContext.RequestContext.RouteData.Values.Add("auth", authInfo); return true; } else return false; } catch { return false; } } else return false; } else return false; } } |
編寫一個受AuthorizeAttribute保護(hù)的接口，假設(shè)該接口返回和用戶相關(guān)的敏感信息。
需要注意的是，由于前端站點(diǎn)和web api站點(diǎn)使用了不同的端口，因此即使scheme(http)和address都相同，但仍然造成了跨域訪問。因此必須對web api站點(diǎn)啟用允許跨域訪問。實(shí)際上CORS(跨域資源共享)或所謂的same origin policy(同源策略)是瀏覽器上的概念，服務(wù)器需要做的僅是根據(jù)需要返回一下幾個響應(yīng)頭:
- Access-Control-Allow-Origin:表示該站點(diǎn)允許被那些源(域)訪問
- Access-Control-Allow-Headers:表示該站點(diǎn)允許那些自定義的請求頭(我們通過jquery.ajax發(fā)送一個包含著token的名為"auth"的請求頭,因此需要api站點(diǎn)設(shè)置允許"auth"請求頭)
- Access-Control-Allow-Methods:表示該站點(diǎn)允許那些請求謂詞(GET,POST,OPTIONS,PUT...)
在asp.net web api中，有兩種方式可以開啟允許跨域訪問：
第一種是在Nuget上安裝"Microsoft.AspNet.WebApi.Cors"包，并對api controller使用[EnableCors]特性
第二種是在web.config中進(jìn)行配置:
必須注釋掉"<remove name="OPTIONSVerbHandler"/>"以開啟OPTIONS謂詞處理，否則跨域訪問時prefight會失敗。
返回和用戶相關(guān)的敏感信息的api代碼如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//標(biāo)記該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},成功取得數(shù)據(jù)",authInfo.UserName); } } |
前端站點(diǎn)
到此，api站點(diǎn)的代碼編寫完成。接下來編寫前端站點(diǎn)的代碼。
前端站點(diǎn)只有一個html頁面,包含兩個簡單功能:調(diào)用登錄接口進(jìn)行登錄，以及調(diào)用被身份驗證保護(hù)的獲取數(shù)據(jù)的接口
前端頁面的關(guān)鍵腳本代碼如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
$(function () { //調(diào)用api站點(diǎn)的登錄接口,接口在登錄成功后返回一個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); } } }); }); //調(diào)用api站點(diǎn)的獲取數(shù)據(jù)的接口，該接口要求身份驗證。 $("#invoke").on("click", function () { $.ajax({ url: "http://localhost:8056/api/user", method: "get", headers: { "auth": window.token },//通過請求頭來發(fā)送token，放棄了通過cookie的發(fā)送方式 complete: function (jqXHR,textStatus) { alert(jqXHR.responseText); }, }); }); }); </script> |
接下來，在不登錄和登錄的情況下，調(diào)用獲取數(shù)據(jù)的接口，并使用fiddler監(jiān)視一下請求和響應(yīng)的過程.
在不登錄情況下直接按“調(diào)用接口”,服務(wù)器返回401未授權(quán)信息
以下是通信情況:
這次先登錄，再調(diào)用接口，同樣在fiddler中監(jiān)視一下通信情況。
在fiddler中可以看到整個過程瀏覽器發(fā)出了3個請求，分別是登錄,調(diào)用接口前的prefight和實(shí)際調(diào)用接口:
來看看每個通信的情況
登錄過程:
prefight
實(shí)際發(fā)出get請求調(diào)用接口，獲得數(shù)據(jù)
到此，基于JWT進(jìn)行身份驗證及跨域訪問的demo已經(jīng)完成，如有錯誤的地方請指正
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://www.cnblogs.com/lwhkdash/p/6686999.html
