欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

程序员文章站 2022-04-14 19:40:20
1、前言： WebAPI主要开放数据给手机APP，Pad，其他需要得知数据的系统，或者软件应用。Web 用户的身份验证，及页面操作权限验证是B/S系统的基础功能。我上次写的《Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解》这种跟明显安全性不是那 ......

1、前言：

webapi主要开放数据给手机app，pad，其他需要得知数据的系统，或者软件应用。web 用户的身份验证，及页面操作权限验证是b/s系统的基础功能。我上次写的《asp.net mvc webapi的创建与前台jquery ajax后台httpclient调用详解》这种跟明显安全性不是那么好，于是乎这个就来了 ，用户需要访问的api都必须带有票据过来，说白了就是登陆之后含有用户信息的token。开始撸...

2、新建一个webapi项目，在app_start文件夹下面新建一个baseapicontroller控制器，这是基础的api控制器，后面有要验证的接口都继承这个控制器：

using loginreqtoken.models;
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.http;
using system.web.mvc;

namespace loginreqtoken.app_start
{
    /// <summary>
    /// 基础api控制器  所有的都继承他
    /// </summary>
    public class baseapicontroller : apicontroller
    {
       
       /// <summary>
       /// 构造函数赋值
       /// </summary>
        public baseapicontroller()
        {
            tokenvalue = httpcontext.current.session[loginid] ?? "";
            httpcontext.current.request.headers.add("tokenvalue", tokenvalue.tostring());
        }
        /// <summary>
        /// 数据库上下文
        /// </summary>
        public wydbcontext db = wydbcontextfactory.getdbcontext();
        /// <summary>
        /// token值 登录后赋值请求api的时候添加到header中
        /// </summary>
        public static object tokenvalue { get; set; } = "";
        /// <summary>
        /// 登录者账号
        /// </summary>
        public static string loginid { get; set; } = "";
    }
}

这个构造函数里主动加一个header头信息 ，因为每次访问的时候都要执行构造函数，在那边验证的时候都要从header中取出来，计算出用户名 是否跟session缓存的一致这样判断的

3、在建一个tokencheckfilter.cs继承authorizeattribute重写基类的验证方式，重写handleunauthorizedrequest

using system.linq;
using system.net;
using system.net.http;
using system.text;
using system.web;
using system.web.helpers;
using system.web.http;
using system.web.http.controllers;
using system.web.security;
namespace loginreqtoken.app_start
{
    /// <summary>
    /// token验证
    /// </summary>
    public class tokencheckfilter: authorizeattribute
    {

        /// <summary>
        /// 重写基类的验证方式，加入自定义的ticket验证
        /// </summary>
        /// <param name="actioncontext"></param>
        public override void onauthorization(httpactioncontext actioncontext)
        {
            var content = actioncontext.request.properties["ms_httpcontext"] as httpcontextbase;
            //获取token（请求头里面的值）
            var token = httpcontext.current.request.headers["tokenvalue"] ?? "";
            //是否为空
            if (!string.isnullorempty(token.tostring()))
            {
                //解密用户ticket,并校验用户名密码是否匹配
                if (validateticket(token.tostring()))
                    base.isauthorized(actioncontext);
                else
                    handleunauthorizedrequest(actioncontext);
            }
            //如果取不到身份验证信息，并且不允许匿名访问，则返回未验证403
            else
            {
                var attributes = actioncontext.actiondescriptor.getcustomattributes<allowanonymousattribute>().oftype<allowanonymousattribute>();
                bool isanonymous = attributes.any(a => a is allowanonymousattribute);
                if (isanonymous) base.onauthorization(actioncontext);
                else handleunauthorizedrequest(actioncontext);
            }
        }

        //校验用户名密码（对session匹配，或数据库数据匹配）
        private bool validateticket(string encrypttoken)
        {
            //解密ticket
            var strticket = formsauthentication.decrypt(encrypttoken).userdata;
            //从ticket里面获取用户名和密码
            var index = strticket.indexof("&");
            string username = strticket.substring(0, index);
            string password = strticket.substring(index + 1);
            //取得session，不通过说明用户退出，或者session已经过期
            var token = httpcontext.current.session[username];
            if (token == null)
                return false;
            //对比session中的令牌
            if (token.tostring() == encrypttoken)
                return true;
            return false;
        }
        /// <summary>
        /// 重写handleunauthorizedrequest
        /// </summary>
        /// <param name="filtercontext"></param>
        protected override void handleunauthorizedrequest(httpactioncontext filtercontext)
        {
            base.handleunauthorizedrequest(filtercontext);

            var response = filtercontext.response = filtercontext.response ?? new httpresponsemessage();
            //状态码401改为其他状态码来避免被重定向。最合理的是改为403，表示服务器拒绝。
            response.statuscode = httpstatuscode.forbidden;
            var content = new 
            {
                success = false,
                errs = new[] { "服务端拒绝访问：你没有权限?，或者掉线了?" }
            };
            response.content = new stringcontent(json.encode(content), encoding.utf8, "application/json");
        }

    }
}

4、在webapiconfig.cs配置文件里面修改一下路由加上/{action}，这样就能调用到具体的哪一个了

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

 

 

 

webapi默认是不支持session的，所以我们需要在global加载时候添加对session的支持，在global.asax里面重写application_postauthorizerequest，不然运行调用会直接异常

    public class webapiapplication : system.web.httpapplication
    {
        protected void application_start()
        {
            arearegistration.registerallareas();
            globalconfiguration.configure(webapiconfig.register);
            filterconfig.registerglobalfilters(globalfilters.filters);
            routeconfig.registerroutes(routetable.routes);
            bundleconfig.registerbundles(bundletable.bundles);
        }
        /// <summary>
        /// 重写application_postauthorizerequest
        /// </summary>
        protected void application_postauthorizerequest()
        {
            //对session的支持，不然运行调用会直接异常
            httpcontext.current.setsessionstatebehavior(system.web.sessionstate.sessionstatebehavior.required);
        }
    }

 

 

5、现在来写一个登陆，新建一个控制器logincontroller继承baseapicontroller 里面写一个登陆的方法login 登陆页面就直接在home的index里面写一个简单的就行了这个控制器访问就不受限制了加上注解allowanonymous

[allowanonymous]
    public class logincontroller : baseapicontroller
    {
        [httpget]
        public object login(string uname, string upassword)
        {
            var user = db.users.where(x => x.loginid == uname && x.password == upassword).firstordefault();
            if (user==null)
            {
                return json(new { ret = 0, data = "", msg = "用户名密码错误" });
            }
            formsauthenticationticket token = new formsauthenticationticket(0, uname, datetime.now, datetime.now.addhours(12), true, $"{uname}&{upassword}", formsauthentication.formscookiepath);
            //返回登录结果、用户信息、用户验证票据信息
            var _token = formsauthentication.encrypt(token);
            //将身份信息保存在session中，验证当前请求是否是有效请求
            loginid = uname;
            tokenvalue = _token;
            httpcontext.current.session[loginid] = _token;
            return json(new { ret = 1, data = _token, msg = "登录成功！" });
        }
    }

 

登陆页面 简单而粗暴

 

<br /><br />
<input type="text" name="txtloginid" id="txtloginid"  />
<br /><br />
<input type="password" name="txtpassword" id="txtpassword"  />
<br /><br />
<input type="button" id="btnsave" value="登录验证" />
<script type="text/javascript" src="~/scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnsave").click(function () {
            $.ajax({
                type: "get",
                url: "/api/login/login",
                datatype: "json",
                data: { "uname": $("#txtloginid").val(), "upassword": $("#txtpassword").val()},
                success: function (data) {
                    if (data.ret > 0) {
                        alert(data.msg+"token:  "+data.data);
                    }
                    else {
                        alert(data.msg);
                    }
                },
                error: function (ret) {
                    console.log(ret);
                }
            });
        });
    });
</script>

 

 

 

 登陆这个我是写了链接数据库的自己练习可以最易更改一个固定的值 现在应该可以看到返回的token数据了

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

 

 

 

 6、现在就可以写api了 都继承baseapicontroller这个控制器的方法上面需要验证的都要加上验证的注解，我是整个控制都要就直接写在类上面了，随便写一个举举例子，就比如全国省市县的查询

using loginreqtoken.app_start;
using loginreqtoken.models;
using loginreqtoken.models.dto;
using newtonsoft.json;
using system;
using system.collections.generic;
using system.linq;
using system.net;
using system.net.http;
using system.web.http;

namespace loginreqtoken.controllers
{

    /// <summary>
    /// 区域查询
    /// </summary>
    [tokencheckfilter]
    public class areaopcontroller : baseapicontroller
    {
        /// <summary>
        /// 获取全部区域
        /// </summary>
        /// <returns></returns>
        public result getallareas()
        {
            var data = db.addressall.orderby(x => x.id);
            if(data.count()>0)
            {
                var ret = new result()
                {
                    ret = 1,
                    code = "200",
                    msg = "获取数据成功",
                    data = jsonconvert.serializeobject(data)

                };
                return ret;
            }
            else
            {
                var ret = new result()
                {
                    ret = 0,
                    code = "400",
                    msg = "接口失败异常",
                    data = ""

                };
                return ret;
            }
        }
        /// <summary>
        /// 查询某个省市直辖市自治区下所有的信息
        /// </summary>
        /// <param name="name">省名称（全名）</param>
        /// <returns></returns>
        public result getprovincebyname(string name)
        {
            var codeid = db.addressall.firstordefault(x => x.name == name)?.id;
            if(codeid<=0)
            {
                var ret = new result()
                {
                    ret = 1,
                    code = "f",
                    msg = "没有查到相关数据",
                    data = ""

                };
                return ret;
            }
            var bb = db.addressall.where(x=>x.id>0).asenumerable();
            var data = getprovincecity(bb,codeid).tolist();
            if (data.count() > 0)
            {
                var ret = new result()
                {
                    ret = 1,
                    code = "200",
                    msg = "获取数据成功",
                    data = jsonconvert.serializeobject(data)

                };
                return ret;
            }
            else
            {
                var ret = new result()
                {
                    ret = 0,
                    code = "500",
                    msg = "查询不到数据或者接口调用出错",
                    data = ""

                };
                return ret;
            }

        }
        /// <summary>
        /// 递归获取树形数据
        /// </summary>
        /// <param name="areasdtos"></param>
        /// <param name="parentid"></param>
        /// <returns></returns>
        public ienumerable<object> getprovincecity(ienumerable<addressall> areasdtos,int? parentid)
        {
            var data = areasdtos as addressall[] ?? areasdtos.toarray();
            var ret = data.where(n => n.parentid == parentid).select(n => new
            {
                n.id,
                n.code,
                n.parentid,
                n.name,
                n.levelnum,
                n.ordernum,
                children = getprovincecity(data, n.id)
            });
            return ret;
        }
    }
}

 

记录一个ef随意取数据库条数信息是这么写的 var data = db.cnblogslist.orderby(p => guid.newguid()).take(100);

现在看效果图

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

 

 

 没有登陆的时候是进不去的 postman上面的效果也看一下

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

 

 

效果都是一样的，如果登录了就可以直接访问 了 不用加参数 ，只有方法需要参数的就可以加 

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

 

 

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解

 

 

 

 这里贴一个调用的代码：

 httpclient bb = new httpclient();
            //获取端口
            httpcontent httpcontent = new stringcontent("");
            httpcontent.headers.contenttype = new system.net.http.headers.mediatypeheadervalue("application/json");
            
             var dl = bb.getasync("http://localhost:63828/api/login/login?uname=admin&upassword=admin888").result.content.readasstringasync().result;
            var token = jsonconvert.deserializeobject<result>(dl);
           
            for (var i=0;i<100;i++)
            {
                
                var ret = bb.getasync("http://localhost:63828/api/cnblog/getallartic").result.content.readasstringasync().result;
            }

 

7、总结：

1）、总体思路，如果是合法的http请求，在http请求头中会有用户身份的票据信息，服务端会读取票据信息，并校验票据信息是否完整有效，如果满足校验要求，则进行业务数据的处理，并返回给请求发起方；

2) 如果没有票据信息，或者票据信息不是合法的，则返回“未授权的访问”异常消息给前端，由前端处理此异常。

3）、登录的时候判断用户名跟密码对不对，对了就生成用户信息的token，session保存一个token，baseapicontroller里面的登录名跟token也赋值了。保存这些票据信息。

4）、当用户有权限操作页面或页面元素时，跳转到页面，并由页面controller提交业务数据处理请求到api服务器； 如果用户没有权限访问该页面或页面元素时，则显示“未授权的访问操作”，跳转到系统异常处理页面。

5）、 api业务服务处理业务逻辑，并将结果以json 数据返回，返回渲染后的页面给浏览器前端，并呈现业务数据到页面；

8、测试地址：

   ---------------------->先登录，用户名 test密码 123456 可以调用调试的接口 然后访问看看，其他的js 调用， 其他平台的我没有试过，还不知道问题，欢迎指教！

http://www.yijianlan.com:8001/api/areaop/getprovincebyname?name=省全称   -------->    查看某个省市的所有子集

http://www.yijianlan.com:8001/api/areaop/getallareas -------------------------------------------->  获取全部区域（全国首位省市县）

http://www.yijianlan.com:8001/api/cnblog/getallartic -----------------------------------------------> 获取博客园数据（这是以前爬虫抓的有2年了吧），随机一百条

http://www.yijianlan.com:8001/api/cnblog/getarticbyname?name=标题 --------------------->  查询数据按标题

 

 

 

上一篇： 缓冲字符流 java.io.BufferedWriter ,java.io.BufferedReader,缓冲字符输出流:PrintWriter

下一篇： WPF 3D足球导览

推荐阅读