asp.net基于JWT中web api身份驗證及跨域調用的示例分析

這篇文章將為大家詳細講解有關asp.net基于JWT中web api身份驗證及跨域調用的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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

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

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

開發登錄接口

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

根據jwt的定義，在jwt中承載用戶身份信息的數據段叫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")
   {
    //如果用戶登錄成功，則可以得到該用戶的身份數據。當然實際開發中，這里需要在數據庫中獲得該用戶的角色及權限
    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;
  }
 }

到此，我們已經編寫好登陸接口。如果用戶名密碼都正確，登陸接口生成一個包含著用戶身份信息的token作為響應。前端收到token后,在后續的請求中需要附帶該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)
      {
       //將用戶信息存放起來，供后續調用
       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(同源策略)是瀏覽器上的概念，服務器需要做的僅是根據需要返回一下幾個響應頭:

• Access-Control-Allow-Origin:表示該站點允許被那些源(域)訪問

• 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中進行配置:

必須注釋掉"<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},成功取得數據",authInfo.UserName);
  }
 }

前端站點

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

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

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

$(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未授權信息

以下是通信情況:

這次先登錄，再調用接口，同樣在fiddler中監視一下通信情況。

在fiddler中可以看到整個過程瀏覽器發出了3個請求，分別是登錄,調用接口前的prefight和實際調用接口:

來看看每個通信的情況

登錄過程:

prefight

實際發出get請求調用接口，獲得數據

關于“asp.net基于JWT中web api身份驗證及跨域調用的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。