ajax webapi 接口认证,WebApi身份认证解决方案（1）：Basic基础认证（上）

来源：赖的安分链接：http://www.cnblogs.com/landeanfen/p/5287064.html

前言：最近，讨论到数据库安全的问题，于是就引出了WebApi服务没有加任何验证的问题。也就是说，任何人只要知道了接口的url，都能够模拟http请求去访问我们的服务接口，从而去增删改查数据库，这后果想想都恐怖。经过一番折腾，总算是加上了接口的身份认证

一、为什么需要身份认证

在前言里面，我们说了，如果没有启用身份认证，那么任何匿名用户只要知道了我们服务的url，就能随意访问我们的服务接口，从而访问或修改数据库。

1、我们不加身份认证，匿名用户可以直接通过url随意访问接口：

可以看到，匿名用户直接通过url就能访问我们的数据接口，最终会发生什么事，大家可以随意畅想。

2、增加了身份认证之后，只有带了我们访问票据的请求才能访问我们的接口。

例如我们直接通过url访问，会返回401

如果是正常流程的请求，带了票据，就OK了。

可以看到，正常流程的请求，会在请求报文的头里面增加Authorization这一项，它的值就是我们的Ticket票据信息。

二、Basic基础认证的原理解析

1、常见的认证方式

我们知道，asp.net的认证机制有很多种。对于WebApi也不例外，常见的认证方式有

FORM身份验证

集成WINDOWS验证

Basic基础认证

Digest摘要认证

园子里很多关于WebApi认证的文章，各种认证方式都会涉及到，但感觉都不够细。这里也并不想去研究哪种验证方式适用哪种使用场景，因为博主还是觉得“贪多嚼不烂”，也可能是博主能力所限。对于认证机制，弄懂其中一种，其他的都能融会贯通。此篇就使用Basic基础认证来详细讲解下整个的过程。

2、Basic基础认证原理

我们知道，认证的目的在于安全，那么如何能保证安全呢？常用的手段自然是加密。Basic认证也不例外，主要原理就是加密用户信息，生成票据，每次请求的时候将票据带过来验证。这样说可能有点抽象，我们详细分解每个步骤：

首先登陆的时候验证用户名、密码，如果登陆成功，则将用户名、密码按照一定的规则生成加密的票据信息Ticket，将票据信息返回到前端。

如果登陆成功，前端会收到票据信息，然后跳转到主界面，并且将票据信息也带到主界面的ActionResult里面(例如跳转的url可以这样写：/Home/Index?Ticket=Ticket)

在主界面的ActionResult里面通过参数得到票据信息Ticket，然后将Ticket信息保存到ViewBag里面传到前端。

在主界面的前端，发送Ajax请求的时候将票据信息加入到请求的Head里面，将票据信息随着请求一起发送到服务端去。

在WebApi服务里面定义一个类，继承AuthorizeAttribute类，然后重写父类的OnAuthorization方法，在OnAuthorization方法里面取到当前http请求的Head，从Head里面取到我们前端传过来的票据信息。解密票据信息，从解密的信息里面得到用户名和密码，然后验证用户名和密码是否正确。如果正确，表示验证通过，否则返回未验证的请求401。

这个基本的原理。下面就按照这个原理来看看每一步的代码如何实现。

三、Basic基础认证的代码示例

首先说下我们的示例场景，上次介绍 CORS 的时候我们在一个解决方案里面放了两个项目Web和WebApiCORS，我们这次还是以这个为例来说明。

1、登录过程

1.1、Web前端

<='' span=''>style='text-align:center;'>

用户名：<='' span=''>type='text'id='txt_username'/>

密  码：<='' span=''>type='password'id='txt_password'/>

<='' span=''>type='button'value='登录'id='btn_login'class='btn-default'/>

$(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(){

}

});

});

});

1.2、登录的API接口

publicclassUserController:ApiController

{

///

/// 用户登录

///

[HttpGet]

publicobjectLogin(stringstrUser,stringstrPwd)

{

if(!ValidateUser(strUser,strPwd))

{

returnnew{bRes=false};

}

FormsAuthenticationTicketticket=newFormsAuthenticationTicket(0,strUser,DateTime.Now,

DateTime.Now.AddHours(1),true,string.Format('{0}&{1}',strUser,strPwd),

FormsAuthentication.FormsCookiePath);

//返回登录结果、用户信息、用户验证票据信息

varoUser=newUserInfo{bRes=true,UserName=strUser,Password=strPwd,Ticket=FormsAuthentication.Encrypt(ticket)};

//将身份信息保存在session中，验证当前请求是否是有效请求

HttpContext.Current.Session[strUser]=oUser;

returnoUser;

}

//校验用户名密码(正式环境中应该是数据库校验)

privateboolValidateUser(stringstrUser,stringstrPwd)

{

if(strUser=='admin'&strPwd=='123456')

{

returntrue;

}

else

{

returnfalse;

}

}

}

publicclassUserInfo

{

publicboolbRes{get;set;}

publicstringUserName{get;set;}

publicstringPassword{get;set;}

publicstringTicket{get;set;}

}

这里有一点需要注意的是，因为WebApi默认是没有开启Session的，所以需要我们作一下配置，手动去启用session。如何开启WebApi里面的Session，请参考：http://www.cnblogs.com/tinya/p/4563641.html

正如上面的原理部分说的，登录如果失败，则直接返回；如果成功，则将生成的票据Ticket带到前端，传到主界面/Home/Index，下面，我们就来看看主界面Home/Index。

2、/Home/Index主界面

publicclassHomeController:Controller

{

// GET: Home

publicActionResult Index(stringUserName,stringTicket)

{

ViewBag.UserName=UserName;

ViewBag.Ticket=Ticket;

returnView();

}

}

name='viewport'content='width=device-width'/>

Index

href='~/Content/bootstrap/css/bootstrap.css'rel='stylesheet'/>

当前登录用户：'@ViewBag.UserName'

<='' span=''>id='div_test'>

$(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(){

}

});

});

这里需要说明的是，我们在发送ajax请求之前，通过 XHR.setRequestHeader(‘Authorization’, ‘BasicAuth ‘ + Ticket); 这一句向请求的报文头里面增加票据信息。就是因为这里加了这一句，所以才有我们下图中的红线部分：