基於JWT的web api身份驗證及跨域調用實踐

本文轉載自查看原文 2017-04-10 13:22 24023 原創文章/ 身份驗證/ jwt/ 跨域/ .NET

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

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>