阅读目录

• 一、为什么需要身份认证
• 二、Basic基础认证的原理解析
  • 1、常见的认证方式
  • 2、Basic基础认证原理
• 三、Basic基础认证的代码示例
  • 1、登录过程
  • 2、/Home/Index主界面
  • 3、WebApiCORS验证部分（重点）
• 四、优化
  • 1、解决API的问题
  • 2、解决ajax的问题
  • 3、解决特殊不想使用验证的方法
• 五、总结

body>
    div style="text-align:center;"> 
        div>用户名：input type="text" id="txt_username" />div>
        div>密  码：input type="password" id="txt_password"  />div>
        div>input type="button" value="登录" id="btn_login" class="btn-default" />div>
    div>
body>

$(function () {
    $("#btn_login").click(function () {
        $.ajax({
            type: "get",
            url: "http://localhost:27221/api/User/Login",
            data: { strUser: $("#txt_username").val(), strPwd: $("#txt_password").val() },
            success: function (data, status) {
                if (status == "success") {
                    if (!data.bRes){
                        alert("登录失败");
                        return;
                    }
                    alert("登录成功"); 　　　　　　　　　　　 //登录成功之后将用户名和用户票据带到主界面
                    window.location = "/Home/Index?UserName=" + data.UserName + "&Ticket=" + data.Ticket;
                }
            },
            error: function (e) {
            },
            complete: function () {

            }

        });
    });
});

 　　public class UserController : ApiController
    {
        /// 
/// 用户登录
        /// 
/// 
/// 
///         [HttpGet]
        public object Login(string strUser, string strPwd)
        {
            if (!ValidateUser(strUser, strPwd))
            {
                return new { bRes = false };
            }
            FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(0, strUser, DateTime.Now,
                            DateTime.Now.AddHours(1), true, string.Format("{0}&{1}", strUser, strPwd),
                            FormsAuthentication.FormsCookiePath);
            //返回登录结果、用户信息、用户验证票据信息
            var oUser = new UserInfo { bRes = true, UserName = strUser, Password = strPwd, Ticket = FormsAuthentication.Encrypt(ticket) };
            //将身份信息保存在session中，验证当前请求是否是有效请求
            HttpContext.Current.Session[strUser] = oUser;
            return oUser;
        }

        //校验用户名密码（正式环境中应该是数据库校验）
        private bool ValidateUser(string strUser, string strPwd)
        {
            if (strUser == "admin" && strPwd == "123456")
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    }

    public class UserInfo
    {
        public bool bRes { get; set; }

        public string UserName { get; set; }

        public string Password { get; set; }

        public string Ticket { get; set; }
    }

 　　public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index(string UserName, string Ticket)
        {
            ViewBag.UserName = UserName;
            ViewBag.Ticket = Ticket;
            return View();
        }
    }

html>
head>
    meta name="viewport" content="width=device-width" />
    title>Indextitle>
    script src="~/Content/jquery-1.9.1.js">script>
    link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    script src="~/Content/bootstrap/js/bootstrap.js">script>
    script src="~/Scripts/Home/Index.js">script>
    script type="text/javascript">
        //打开页面的时候保存票据信息
        var UserName = ‘@ViewBag.UserName‘;
        var Ticket = ‘@ViewBag.Ticket‘;
    script>
head>
body>
    div>当前登录用户：‘@ViewBag.UserName‘div>

    div id="div_test">

    div>
body>
html>

$(function () {
    $.ajax({
        type: "get",
        url: "http://localhost:27221/api/Charging/GetAllChargingData",
        data: {},
        beforeSend: function (XHR) {
            //发送ajax请求之前向http的head里面加入验证信息
            XHR.setRequestHeader(‘Authorization‘, ‘BasicAuth ‘ + Ticket);
        },
        success: function (data, status) {
            if (status == "success") {
                $("#div_test").html(data);
            }
        },
        error: function (e) {
            $("#div_test").html("Error");
        },
        complete: function () {

        }

    });
});

　　 /// 
/// 自定义此特性用于接口的身份验证
    /// 
public class RequestAuthorizeAttribute : AuthorizeAttribute
    {
        //重写基类的验证方式，加入我们自定义的Ticket验证
        public override void OnAuthorization(System.Web.Http.Controllers.HttpActionContext actionContext)
        {
            //从http请求的头里面获取身份验证信息，验证是否是请求发起方的ticket
            var authorization = actionContext.Request.Headers.Authorization;
            if ((authorization != null) && (authorization.Parameter != null))
            {
                //解密用户ticket,并校验用户名密码是否匹配
                var encryptTicket = authorization.Parameter;
                if (ValidateTicket(encryptTicket))
                {
                    base.IsAuthorized(actionContext);
                }
                else
                {
                    HandleUnauthorizedRequest(actionContext);
                }
            }
            //如果取不到身份验证信息，并且不允许匿名访问，则返回未验证401
            else
            {
                var attributes = actionContext.ActionDescriptor.GetCustomAttributes().OfType();
                bool isAnonymous = attributes.Any(a => a is AllowAnonymousAttribute);
                if (isAnonymous) base.OnAuthorization(actionContext);
                else HandleUnauthorizedRequest(actionContext);
            }
        }

        //校验用户名密码（正式环境中应该是数据库校验）
        private bool ValidateTicket(string encryptTicket)
        {
            //解密Ticket
            var strTicket = FormsAuthentication.Decrypt(encryptTicket).UserData;

            //从Ticket里面获取用户名和密码
            var index = strTicket.IndexOf("&");
            string strUser = strTicket.Substring(0, index);
            string strPwd = strTicket.Substring(index + 1);

            if (strUser == "admin" && strPwd == "123456")
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    }

    [RequestAuthorize]
    public class ChargingController : ApiController
    {
        /// 
/// 得到所有数据
        /// 
/// 返回数据        [HttpGet]
        public string GetAllChargingData()
        {
            return "Success";
        }

        /// 
/// 得到当前Id的所有数据
        /// 
/// 
参数Id
        /// 返回数据        [HttpGet]
        public string GetAllChargingData(string id)
        {
            return "ChargingData" + id;
        }

    }

namespace WebApiCORS.Controllers
{
    [RequestAuthorize]
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class BaseApiController : ApiController
    {
    }
}

namespace WebApiCORS.Controllers
{
    public class ChargingController : BaseApiController
    {
        /// 
/// 得到所有数据
        /// 
/// 返回数据        [HttpGet]
        public string GetAllChargingData()
        {
            return "Success";
        }

        /// 
/// 得到当前Id的所有数据
        /// 
/// 
参数Id
        /// 返回数据        [HttpGet]
        public string GetAllChargingData(string id)
        {
            return "ChargingData" + id;
        }
　　}
}

(function ($) {
    //1.得到$.ajax的对象
    var _ajax = $.ajax;
    $.ajax = function (options) {
        //2.每次调用发送ajax请求的时候定义默认的error处理方法
        var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, ‘错误消息‘, { closeButton: true, timeOut: 0, positionClass: ‘toast-top-full-width‘ });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }
        //3.扩展原生的$.ajax方法，返回最新的参数
        var _options = $.extend({}, {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                fn.success(data, textStatus);
            },
            beforeSend: function (XHR) {
                XHR.setRequestHeader(‘Authorization‘, ‘BasicAuth ‘ + Ticket);
                fn.beforeSend(XHR);
            },
            complete: function (XHR, TS) {
                fn.complete(XHR, TS);
            }
        }, options);
        //4.将最新的参数传回ajax对象
        _ajax(_options);
    };
})(jQuery);

　　public class ChargingController : BaseApiController
    {
        /// 
/// 得到所有数据
        /// 
/// 返回数据        [HttpGet]
        public string GetAllChargingData()
        {
            return "Success";
        }

        /// 
/// 得到当前Id的所有数据
        /// 
/// 
参数Id
        /// 返回数据        [HttpGet]
        [AllowAnonymous]
        public string GetAllChargingData(string id)
        {
            return "ChargingData" + id;
        }
　　}