asp.net基于JWT的web api身份驗證及跨域調用實踐

更新時間：2018年07月05日 13:49:09 作者：wyman25

這篇文章主要介紹了asp.net基于JWT的web api身份驗證及跨域調用實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

隨著多終端的出現(xiàn)，越來越多的站點通過web api restful的形式對外提供服務，很多網(wǎng)站也采用了前后端分離模式進行開發(fā)，因而在身份驗證的方式上可能與傳統(tǒng)的基于cookie的Session Id的做法有所不同，除了面臨跨域提交cookie的煩人問題外，更重要的是，有些終端可能根本不支持cookie。

Json Web Token(jwt)是一種不錯的身份驗證及授權方案，簡單的說就是調用端調用api時，附帶上一個由api端頒發(fā)的token，以此來驗證調用者的授權信息。

但由于時間關系，不對jwt多做描述，詳細請參考jwt.io

下面編寫一個基于jwt進行身份驗證的asp.net web api demo，為了模擬前后端分離的開發(fā)方式，該demo包含一個靜態(tài)頁站點(在IIS中的路徑為http://localhost:8057)以及一個web api站點(http://localhost:8056)。靜態(tài)頁站點僅有一個index.html，包含一個登錄功能和調用需要身份驗證的獲取數(shù)據(jù)的接口這兩個功能，所有接口均通過ajax調用。

以下是主要需要編寫的代碼，讓我們一步步來編寫代碼。

開發(fā)登錄接口

由于我們使用jwt技術，在nuget上先添加封裝了jwt使用的框架。我使用了以下框架。

根據(jù)jwt的定義，在jwt中承載用戶身份信息的數(shù)據(jù)段叫payload。這里需要建立一個類"AuthInfo"用來表示payload。

/// <summary>
 /// 表示jwt的payload
 /// </summary>
 public class AuthInfo
 {
  /// <summary>
  /// 用戶名
  /// </summary>
  public string UserName { get; set; }
  /// <summary>
  /// 角色列表，可以用于記錄該用戶的角色,相當于claims的概念(如不清楚什么事claim，請google一下"基于聲明的權限控制")
  /// </summary>
  public List<string> Roles { get; set; }
  /// <summary>
  /// 是否是管理員
  /// </summary>
  public bool IsAdmin { get; set; }

接著編寫登陸接口

public class LoginController : ApiController
 {
  public LoginResult Post([FromBody]LoginRequest request)
  {
   LoginResult rs = new LoginResult();
   //假設用戶名為"admin"，密碼為"123"
   if (request.UserName == "admin" && request.Password == "123")
   {
    //如果用戶登錄成功，則可以得到該用戶的身份數(shù)據(jù)。當然實際開發(fā)中，這里需要在數(shù)據(jù)庫中獲得該用戶的角色及權限
    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作為響應。前端收到token后,在后續(xù)的請求中需要附帶該token,用于證明其身份。

AuthorizeAttribute

接下來，我們需要編寫有關權限控制及token解析有關的代碼。

web api框架提供了AuthorizeAttribute，用于在調用api前對請求進行驗證，通過重寫AuthorizeAttribute.IsAuthorized方法可以自定義驗證邏輯

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進行解密
      string secureKey = System.Configuration.ConfigurationManager.AppSettings["SecureKey"];
      AuthInfo authInfo = JWT.JsonWebToken.DecodeToObject<AuthInfo>(token, secureKey);
      if (authInfo != null)
      {
       //將用戶信息存放起來，供后續(xù)調用
       actionContext.RequestContext.RouteData.Values.Add("auth", authInfo);
       return true;
      }
      else
       return false;
     }
     catch
     {
      return false;
     }
    }
    else
     return false;
   }
   else
    return false;
  }
 }

編寫一個受AuthorizeAttribute保護的接口，假設該接口返回和用戶相關的敏感信息。

需要注意的是，由于前端站點和web api站點使用了不同的端口，因此即使scheme(http)和address都相同，但仍然造成了跨域訪問。因此必須對web api站點啟用允許跨域訪問。實際上CORS(跨域資源共享)或所謂的same origin policy(同源策略)是瀏覽器上的概念，服務器需要做的僅是根據(jù)需要返回一下幾個響應頭:

Access-Control-Allow-Origin:表示該站點允許被那些源(域)訪問
Access-Control-Allow-Headers:表示該站點允許那些自定義的請求頭(我們通過jquery.ajax發(fā)送一個包含著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中進行配置:

必須注釋掉"<remove name="OPTIONSVerbHandler"/>"以開啟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},成功取得數(shù)據(jù)",authInfo.UserName);
  }
 }

前端站點

到此，api站點的代碼編寫完成。接下來編寫前端站點的代碼。

前端站點只有一個html頁面,包含兩個簡單功能:調用登錄接口進行登錄，以及調用被身份驗證保護的獲取數(shù)據(jù)的接口

前端頁面的關鍵腳本代碼如下:

$(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站點的獲取數(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>

接下來，在不登錄和登錄的情況下，調用獲取數(shù)據(jù)的接口，并使用fiddler監(jiān)視一下請求和響應的過程.

在不登錄情況下直接按“調用接口”,服務器返回401未授權信息