用web api 分离前后台 会不会有风险

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用web api 分离前后台 会不会有风险相关的知识,希望对你有一定的参考价值。

参考技术A 1、 OAuth是做什么的?
  在网上浏览时,大家都见过这样的功能:网站A提供了第三方登录服务,比如使用新浪微博、QQ账户登录。用户使用第三方账户登陆后,第三方返回Token给网站A,当网站A调用第三方服务请求登录用户信息时需传递该Token给第三方,第三方才允许该服务请求。之后的每次请求无需再次认证,直接使用该Token即可。这就是OAuth的典型应用。
2、 简单使用介绍 (具体使用OAuth的方法请参考:在ASP.NET中基于Owin OAuth使用Client Credentials Grant授权发放Token)
  2.1、用户登录的过程即是获取Token的过程,前端用户登录示例代码如下:

1 $.ajax(
2 type: "POST",
3 url: api_address + "token", //api_address为WebApi服务地址,由于OAuth的使用中设置了属性TokenEndpointPath = new PathString("/token"),所以请求到“token”链接时即可自动进入认证流程。
4 data: grant_type: "password", username: username, password: password, ran: Math.random() ,//传递用户名、密码、认证方式
5 dataType: "json",
6 success: function (result)
7 if (result.access_token && result.access_token.length > 0)
8 //result.access_token即是有效的服务调用凭证,可以把该值存入到Cookie中,以备下次使用。
9 callback(1, "登录成功。");
10
11 else
12 callback(0, "未知错误!");
13
14 ,
15 error: function (XMLHttpRequest, textStatus, errorThrown)
16 callback(0, XMLHttpRequest.responseJSON.error);
17
18 );

登录代码
  2.2、当认证方式为password时,已下方法为认证流程中的一步。(认证通过才会返回Token)

1 public override Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
2
3 var username= context.UserName;
4 var password=context.Password;
5 if(用户名与密码不合法)
6
7 context.setError(“用户名或密码错误!”);//认证不通过
8
9 else
10
11 var oAuthIdentity = new ClaimsIdentity(context.Options.AuthenticationType);
12 oAuthIdentity.AddClaim(new Claim(ClaimTypes.Name, context.UserName));
13 //可以加入用户信息及其他必要信息到Token中,以便在api服务中使用(使用中HttpContext.Current.User.Identity即为oAuthIdentity对象,WebApi的Controller中可直接使用User.Identity)。
14 oAuthIdentity.AddClaim(new Claim("UserID", user.UserID.ToString()));
15 var ticket = new AuthenticationTicket(oAuthIdentity, new AuthenticationProperties());
16 context.Validated(ticket);//认证通过
17
18 return base.GrantResourceOwnerCredentials(context);
19

认证代码
3、 已经获取了Token,如何使用?
  网上的大部分示例都是使用HttpClient调用的方式,而前后端的完全分离作为一种发展趋势,我们需要Jquery的调用方式。

1 $.ajax(
2 type: “method”,//get,post,put,delete
3 url:api_address + “api/Test”,//如果调用webapi中的TestController
4 data: data,
5 dataType: "json",
6 headers:
7 "Authorization": "Bearer " + “token” //把登录获取的Token加入到http请求头中
8 ,
9 success: function (result)
10 callback(result);
11 ,
12 error: function (XMLHttpRequest, textStatus, errorThrown)
13 //。。。。。。
14
15 );

调用Api
4、Api的访问权限该如何做?
  认证中我们把用户登录成功作为认证通过的标志,但不同角色的用户具有不同的访问权限(个人认为认证中应使用最小权限验证,如示例中的登录成功),如何控制有些Controller不能被低权限用户访问。

1 [Authorize]
2 public class TestController: ApiController
3
4 // GET api/<controller>
5 public HttpResponseMessage Get(int appid)
6
7 return null;
8
9

一个典型的ApiController
  [Authorize]表示访问该Controller的请求必须经过认证(请求头中具有Token信息),这里我们可以自定义一个特性去验证用户权限,并替换特性AuthorizeAttribute。(这里仅提供思路,具体做法请自己摸索,不保证以下代码的正确性)

1 public class CustomeAuthorizeAttribute:System.Web.Http.AuthorizeAttribute
2
3 protected override bool IsAuthorized(System.Web.Http.Controllers.HttpActionContext actionContext)
4
5 if(base.IsAuthorized(actionContext))
6
7 //这里对用户的权限进行验证,actionContext可以获得请求的是哪一个Controller
8 var user = HttpContext.Current.User.Identity;//Token中带有的用户信息
9 if (可以访问)
10
11 return true;
12
13 return false;
14
15 return false;
16
17
18

以上是关于用web api 分离前后台 会不会有风险的主要内容,如果未能解决你的问题,请参考以下文章

如何处理好前后端分离的 API 问题

用产品思维设计API——数据解耦,才是前后分离的本质

前后端分离

vue+gin前后端分离

angular2 中怎么使用mock前后端分离

web系统是否要前后端分离?