C#實現JWT無狀態驗證的實戰應用

kiba518發表於2021-03-01

C#JWT

前言

本文主要介紹JWT的實戰運用。

準備工作

首先我們建立一個Asp.Net的，包含MVC和WebApi的Web專案。

然後使用Nuget搜尋JWT，安裝JWT類庫，如下圖。

設計思路

這裡我們簡單的做了一個token驗證的設計，設計思路如下圖所示：

程式碼實現

快取

首先，我們先開發工具類，根據設計思路圖可得知，我們需要一個快取類，用於在伺服器端儲存token。

編寫快取相關類程式碼如下：

 public class CacheHelper
 {
     public static object GetCache(string key)
     {
         return HttpRuntime.Cache[key];
     }

     public static T GetCache<T>(string key) where T : class
     {
         return (T)HttpRuntime.Cache[key];
     }

     public static bool ContainsKey(string key)
     {
         return GetCache(key) != null;
     }

     public static void RemoveCache(string key)
     {
         HttpRuntime.Cache.Remove(key);
     }

     public static void SetKeyExpire(string key, TimeSpan expire)
     {
         object value = GetCache(key);
         SetCache(key, value, expire);
     }

     public static void SetCache(string key, object value)
     {
         _SetCache(key, value, null, null);
     }

     public static void SetCache(string key, object value, TimeSpan timeout)
     {
         _SetCache(key, value, timeout, ExpireType.Absolute);
     }

     public static void SetCache(string key, object value, TimeSpan timeout, ExpireType expireType)
     {
         _SetCache(key, value, timeout, expireType);
     }

     private static void _SetCache(string key, object value, TimeSpan? timeout, ExpireType? expireType)
     {
         if (timeout == null)
             HttpRuntime.Cache[key] = value;
         else
         {
             if (expireType == ExpireType.Absolute)
             {
                 DateTime endTime = DateTime.Now.AddTicks(timeout.Value.Ticks);
                 HttpRuntime.Cache.Insert(key, value, null, endTime, Cache.NoSlidingExpiration);
             }
             else
             {
                 HttpRuntime.Cache.Insert(key, value, null, Cache.NoAbsoluteExpiration, timeout.Value);
             }
         }
     }
 }
 /// <summary>
 /// 過期型別
 /// </summary>
 public enum ExpireType
 {
     /// <summary>
     /// 絕對過期
     /// 注：即自建立一段時間後就過期
     /// </summary>
     Absolute,

     /// <summary>
     /// 相對過期
     /// 注：即該鍵未被訪問後一段時間後過期，若此鍵一直被訪問則過期時間自動延長
     /// </summary>
     Relative,
 }

如上述程式碼所示，我們編寫了快取幫助類—CacheHelper類。

CacheHelper類：使用HttpRuntime的快取，類裡實現快取的增刪改，因為使用的是HttpRuntime，所以，如果沒有設定快取的超時時間，則快取的超時時間等於HttpRuntime.Cache配置的預設超時時間。

如果網站掛載在IIS裡，那麼，HttpRuntime.Cache配置超時時間的地方在該網站的應用程式池中，如下圖：

Jwt的幫助類

現在我們編寫Jwt的幫助類，程式碼如下：

public class JwtHelper
{
    //私鑰  
    public const string secret = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNAmD7RTE2drj6hf3oZjJpMPZUQ1Qjb5H3K3PNwIDAQAB";
    
    /// <summary>
    /// <summary>
    /// 生成JwtToken
    /// </summary>
    /// <param name="payload">不敏感的使用者資料</param>
    /// <returns></returns>
    public static string SetJwtEncode(string username,int expiresMinutes)
    {
        //格式如下
        var payload = new Dictionary<string, object>
        {
            { "username",username },
            { "exp ", expiresMinutes },
            { "domain", "" }
        };

        IJwtAlgorithm algorithm = new HMACSHA256Algorithm();
        IJsonSerializer serializer = new JsonNetSerializer();
        IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();
        IJwtEncoder encoder = new JwtEncoder(algorithm, serializer, urlEncoder);

        var token = encoder.Encode(payload, secret); 
        return token;
    }
   
    /// <summary>
    /// 根據jwtToken  獲取實體
    /// </summary>
    /// <param name="token">jwtToken</param>
    /// <returns></returns>
    public static IDictionary<string,object> GetJwtDecode(string token)
    {
        IJsonSerializer serializer = new JsonNetSerializer();
        IDateTimeProvider provider = new UtcDateTimeProvider();
        IJwtValidator validator = new JwtValidator(serializer, provider);
        IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();
        IJwtAlgorithm algorithm = new HMACSHA256Algorithm();
        IJwtDecoder decoder = new JwtDecoder(serializer, validator, urlEncoder, algorithm);
        var dicInfo = decoder.DecodeToObject(token, secret, verify: true);//token為之前生成的字串
        return dicInfo;
    }
}

程式碼很簡單，實現了JWT的Code的建立和解析。

注：JWT的Code雖然是密文，但它是可以被解析的，所以我們不要在Code裡儲存重要資訊，比如密碼。

JWT的Code與解析後的內容如下圖所示，左邊未Code，右邊未解析的內容。

AuthenticationHelper驗證幫助類

現在，我們已經可以編寫驗證類了，利用剛剛已建立的快取幫助類和JWT幫助類。

AuthenticationHelper驗證幫助類程式碼如下：

 public class AuthenticationHelper
 { 
     /// <summary>
     /// 預設30分鐘
     /// </summary>
     /// <param name="username"></param>
     public static void AddUserAuth(string username)
     {
         var token = JwtHelper.SetJwtEncode(username, 30);
         CacheHelper.SetCache(username, token, new TimeSpan(TimeSpan.TicksPerHour / 2)); 
     } 
     public static void AddUserAuth(string username, TimeSpan ts)
     { 
         var token = JwtHelper.SetJwtEncode(username, ts.Minutes);
         CacheHelper.SetCache(username, token, ts);

     }
     public static string GetToken(string username)
     {
         var cachetoken = CacheHelper.GetCache(username);
         return cachetoken.ParseToString();  
     } 
     public static bool CheckAuth(string token)
     {
         var dicInfo = JwtHelper.GetJwtDecode(token);
         var username = dicInfo["username"];

         var cachetoken = CacheHelper.GetCache(username.ToString());
         if (!cachetoken.IsNullOrEmpty() && cachetoken.ToString() == token)
         {
             return true;
         }
         else
         {
             return false;
         } 
     }
 }

如程式碼所示，我們實現了驗證token建立、驗證token獲取、驗證Token校驗三個方法。

到此，我們的基礎程式碼已經編寫完了，下面進入驗證的應用。

Fliter

首先，在Global.asax檔案中，為我們WebApi新增一個過濾器，程式碼如下：

 public class WebApiApplication : System.Web.HttpApplication
 {
     protected void Application_Start()
     {
         AreaRegistration.RegisterAllAreas();
         GlobalConfiguration.Configure(WebApiConfig.Register); 
         //webapiFilter
         System.Web.Http.GlobalConfiguration.Configuration.Filters.Add(new HttpPermissionFilter());
         System.Web.Http.GlobalConfiguration.Configuration.Filters.Add(new HttpExceptionFilter());
         //mvcFliter
         System.Web.Mvc.GlobalFilters.Filters.Add(new MvcExceptionFilter());
         System.Web.Mvc.GlobalFilters.Filters.Add(new MvcPermissionFilter()); 
         RouteConfig.RegisterRoutes(RouteTable.Routes);
         BundleConfig.RegisterBundles(BundleTable.Bundles);
     }
 }

程式碼中建立了四個過濾器，分別是MVC的請求和異常過濾器和WebApi的請求和異常過濾器。

這裡我們主要看WebApi的請求過濾器——HttpPermissionFilter。程式碼如下：

public class HttpPermissionFilter : System.Web.Http.Filters.ActionFilterAttribute
{
    public override void OnActionExecuting(HttpActionContext actionContext)
    {
        string url ="請求Url" + actionContext.Request.RequestUri.ToString(); 
        var action = actionContext.ActionDescriptor.ActionName.ToLower();
        var controller = actionContext.ControllerContext.ControllerDescriptor.ControllerName.ToLower();
        if (controller != "login" && controller != "loginout")
        { 
            //客戶端段token獲取
            var token = actionContext.Request.Headers.Authorization != null ? actionContext.Request.Headers.Authorization.ToString() : "";
            //服務端獲取token 與客戶端token進行比較
            if (!token.IsNullOrEmpty() && AuthenticationHelper.CheckAuth(token))
            {
                //認證通過，可進行日誌等處理 
            }
            else
            { 
                throw new Exception("Token無效");
            } 
        }
    }
}

我們的HttpPermissionFilter類繼承了System.Web.Http.Filters.ActionFilterAttribute，這樣他就可以截獲所有的WebApi請求了。

然後我們重寫了他的OnActionExecuting方法，在方法裡，我們查詢到當前請求的Controller的名稱，然後對其進行了一個簡單的判斷，如果是login（登入）或loginout（登出），那我們就不對他的token進行驗證。如果是其他請求，則會從請求的Headers的Authorization屬性裡讀取token，並使用AuthenticationHelper類對這個token進行正確性的驗證。

WebApi介面

現在我們編寫WebApi介面，編寫一個登入介面和一個普通請求介面。

登入介面：這裡我們使用AuthenticationHelper類建立一個token，並把他儲存到快取中。

然後再把token返回給呼叫者。

普通介面：這裡我們不做任何操作，就是簡單的返回成功，因為是否可以訪問這個介面，已經又Filter控制了。

程式碼如下:

public class LoginController : ApiController
{  
    public string Get(string username,string pwd)
    {
        AuthenticationHelper.AddUserAuth(username, new TimeSpan(TimeSpan.TicksPerMinute * 5));//5分鐘 
        string token = AuthenticationHelper.GetToken(username);
        return token;
    }  
}
public class RequestController : ApiController
{ 
    public string Get()
    {
        return "請求成功";
    }  
}

測試頁面

現在我們編寫測試頁面，這裡我們實現三個按鈕，登入、帶token訪問Api、無token訪問Api。

程式碼如下：

<div> 
    <script>
        $(document).ready(function () {
            $("#request").click(function () {
                var token = window.localStorage.getItem('token');
                if (token) {

                    $.ajax({
                        type: "GET",
                        url: "http://localhost:50525/api/Request",
                        success: function (data) {
                            $('#con').append('<div> success：' + data + '</div>');
                            console.log(data);
                        },
                        beforeSend: function (xhr) {
                            //向Header頭中新增Authirization
                            xhr.setRequestHeader("Authorization", token);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) { 
                            $('#con').append('<div> error：' + errorThrown + '</div>');
                        }
                    });
                }
                else {
                    alert("token不存在");
                }
            });
            $("#requestNotoken").click(function () {
                var token = window.localStorage.getItem('token');
                if (token) {

                    $.ajax({
                        type: "GET",
                        url: "http://localhost:50525/api/Request",
                        success: function (data) {
                            $('#con').append('<div> success：' + data + '</div>');
                            console.log(data);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $('#con').append('<div> error：' + errorThrown + '</div>');
                        }
                    });
                }
                else {
                    alert("token不存在");
                }
            });
            $("#login").click(function () {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:50525/api/Login/?username=kiba&pwd=518",
                    success: function (data) {
                      
                        $('#con').append('<div> token：' + data + '</div>');
                        console.log(data);
                        window.localStorage.setItem('token', data)  
                    }
                });
            });
        }); 
    </script> 
    <h1>測試JWT</h1> 
    <button id="login">登入</button>
    <button id="request">帶token訪問Api</button>
    <button id="requestNotoken">無token訪問Api</button>
    <div id="con"></div>
</div>

測試結果如下：