WebApi使用JWT认证（一）

Dear 丶 2021-06-26 16:06 419阅读 0赞

这是第一部：先实现`NetFramework`上的`WebApi`使用`JWT`认证

1、VS新建一个`WebApi`项目  
![在这里插入图片描述][20210620201955853.png]  
2、项目右键----管理`Nuget`程序包----找到`JWT`，然后安装  
![在这里插入图片描述][20210620202009796.png]  
3、`Model`文件夹下新建三个类`LoginResult，LoginRequest，AuthInfo`

namespace JwtWebApi.Models
    { 
        public class LoginResult
        { 
            public bool Success {  get; set; }
    
            public string Token {  get; set; }
    
            public string Message {  get; set; }
        }
    }

namespace JwtWebApi.Models
    { 
        public class LoginRequest
        { 
            public string UserName {  get; set; }
    
            public string Password {  get; set; }
        }
    }

using System.Collections.Generic;
    
    namespace JwtWebApi.Models
    { 
        public class AuthInfo
        { 
            //模拟JWT的payload
            public string UserName {  get; set; }
    
            public List<string> Roles {  get; set; }
    
            public bool IsAdmin {  get; set; }
        }
    }

4、在`Controllers`文件夹中的`HomeController`（没有就新建一个）中添加一个`Post`方法，这是生成`JWT Token`方法的地方，一般应放在登录的`Action`下

using JWT;
    using JWT.Algorithms;
    using JWT.Serializers;
    using JwtWebApi.Models;
    using System;
    using System.Collections.Generic;
    using System.Web.Http;
    
    namespace JwtWebApi.Controllers
    { 
        public class HomeController : ApiController
        { 
            public LoginResult Post([FromBody]LoginRequest request)
            { 
                LoginResult rs = new LoginResult();
                //这是是获取用户名和密码的，这里只是为了模拟
                if (request.UserName == "wangshibang" && request.Password == "123456")
                { 
                    AuthInfo info = new AuthInfo {  UserName = "wangshibang", Roles = new List<string> {  "Admin", "Manage" }, IsAdmin = true };
                    try
                    { 
                        const string secret = "To Live is to change the world";
                        //secret需要加密
                        IJwtAlgorithm algorithm = new HMACSHA256Algorithm();
                        IJsonSerializer serializer = new JsonNetSerializer();
                        IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();
                        IJwtEncoder encoder = new JwtEncoder(algorithm, serializer, urlEncoder);
                        var token = encoder.Encode(info, secret);
                        rs.Message = "XXXXX";
                        rs.Token = token;
                        rs.Success = true;
                    }
                    catch (Exception ex)
                    { 
                        rs.Message = ex.Message;
                        rs.Success = false;
                    }
                }
                else
                { 
                    rs.Message = "fail";
                    rs.Success = false;
                }
                return rs;
            }
        }
    }

5、项目下添加一个`Attributes`文件夹，需要写个权限拦截器，新建一个`ApiAuthorizeAttribute`类继承自`AuthorizeAttribute`类

using JWT;
    using JWT.Serializers;
    using JwtWebApi.Models;
    using System;
    using System.Linq;
    using System.Web.Http;
    using System.Web.Http.Controllers;
    
    namespace JwtWebApi.Attributes
    { 
        public class ApiAuthorizeAttribute : AuthorizeAttribute
        { 
            protected override bool IsAuthorized(HttpActionContext actionContext)
            { 
                var authHeader = from t in actionContext.Request.Headers where t.Key == "auth" select t.Value.FirstOrDefault();
                if (authHeader != null)
                { 
                    string token = authHeader.FirstOrDefault();
                    if (!string.IsNullOrEmpty(token))
                    { 
                        try
                        { 
                            const string secret = "To Live is to change the world";
                            //secret需要加密
                            IJsonSerializer serializer = new JsonNetSerializer();
                            IDateTimeProvider provider = new UtcDateTimeProvider();
                            IJwtValidator validator = new JwtValidator(serializer, provider);
                            IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();
                            IJwtDecoder decoder = new JwtDecoder(serializer, validator, urlEncoder);
    
                            var json = decoder.DecodeToObject<AuthInfo>(token, secret, verify: true);
                            if (json != null)
                            { 
                                actionContext.RequestContext.RouteData.Values.Add("auth", json);
                                return true;
                            }
                            return false;
                        }
                        catch (Exception ex)
                        { 
                            return false;
                        }
                    }
                }
                return false;
            }
        }
    }

6、`Controllers`文件夹中新建一个`UserController`，新建一个`Get`的`Action`，需要加上`ApiAuthorize`特性

using JwtWebApi.Attributes;
    using JwtWebApi.Models;
    using System.Web.Http;
    
    namespace JwtWebApi.Controllers
    { 
        public class UserController : ApiController
        { 
            // GET: User
            [ApiAuthorize]
            public string Get()
            { 
                AuthInfo info = RequestContext.RouteData.Values["auth"] as AuthInfo;
                if (info == null)
                { 
                    return "获取不到，失败";
                }
                else
                { 
                    return $"获取到了，Auth的Name是 {info.UserName}";
                }
            }
        }
    }

7、然后用`PostMan`测试

下面是解决接口调用的跨域问题，有两种，一种是用`CORS`，另外一种就是修改`WebConfig`添加自定义`options`谓词处理模块

我只用了自定义`Options`谓词处理

<system.webServer>
        <handlers>
          
          <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
          
          <remove name="TRACEVerbHandler" />
          <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
        </handlers>
        <httpProtocol>
          <customHeaders>
            
            <add name="Access-Control-Allow-Origin" value="http://localhost:8057"/>
            <add name="Access-Control-Allow-Headers" value="accept, auth"/>
            <add name="Access-Control-Allow-Methods" value="GET, OPTIONS"/>
          </customHeaders>
        </httpProtocol>
        <validation validateIntegratedModeConfiguration="false" />
        <modules>
          <remove name="ApplicationInsightsWebTracking" />
          <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
        </modules>
      </system.webServer>

好了，现在把你的`WebApi`部署到服务器上，然后用另一个跨域页面调取接口访问吧

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <script src="jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <fieldset>
            <legend>身份验证</legend>
            <form>
                <label for="UserName">用户名:</label><input type="text" name="userName" id="userName" value="admin" />
                <br />
                <br />
                <label for="Password">密码:</label><input type="password" name="password" id="password" value="123" />
                <br />
                <br />
            </form>
            <button id="login">登录</button>
        </fieldset>
        <br />
    
        <fieldset>
            <legend>调用接口</legend>
            <button id="invoke">调用接口</button>
        </fieldset>
        <script> $(function () { //调用api站点的登录接口,接口在登录成功后返回一个token。 $("#login").on("click", function () { $.ajax({ url: "http://localhost:8056/api/home", 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 () { console.log(window.token); $.ajax({ url: "http://localhost:8056/api/user", method: "get", headers: { "auth": window.token },//通过请求头来发送token，放弃了通过cookie的发送方式 complete: function (jqXHR,textStatus) { alert(jqXHR.responseText); }, }); }); }); </script>
    </body>
    </html>

[20210620201955853.png]: /images/20210626/29cd2dd23bd441498edd7e30d486eb82.png
[20210620202009796.png]: /images/20210626/f3f8e51805344452911070120c288f4e.png