Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登陆、注销和API调用

时间  2019-11-19
标签 vue.js vue 使用 ajax resource 实现 oauth 注册 登陆 注销 api 调用 栏目 JavaScript 繁體版
原文   原文链接

概述

上一篇咱们介绍了如何使用vue resource处理HTTP请求，结合服务端的REST API，就可以很容易地构建一个增删查改应用。
这个应用始终遗留了一个问题，Web App在访问REST API时，没有通过任何认证，这使得服务端的REST API是不安全的，只要有人知道api地址，就能够调用API对服务端的资源进行修改和删除。
今天咱们就来探讨一下如何结合Web API来限制资源的访问。javascript

本文的主要内容以下：html

  • 介绍传统的Web应用和基于REST服务的Web应用
  • 介绍OAuth认证流程和密码模式
  • 建立一个基于ASP.NET Identity的Web API应用程序
  • 基于$.ajax实现OAuth的注册、登陆、注销和API调用
  • 基于vue-resource实现OAuth的注册、登陆、注销和API调用

本文的最终示例是结合上一篇的CURD，本文的登陆、注册、注销和API调用功能实现的。前端

35

本文9个示例的源码已放到GitHub，若是您以为本篇内容不错，请点个赞，或在GitHub上加个星星！vue

Page Demo GitHub Sourcejava

基于$.ajax的示例以下：jquery

注册示例 登陆和注销示例 登陆获取token并调用API示例 注册、登陆、注销、调用API综合示例git

基于vue-resource的示例以下：github

注册示例 登陆和注销示例 登陆获取token并调用API示例 注册、登陆、注销、调用API综合示例ajax

OAuth介绍

传统的Web应用

在传统的Web应用程序中，先后端是放在一个站点下的，咱们能够经过会话（Session）来保存用户的信息。
例如：一个简单的ASP.NET MVC应用程序，用户登陆成功后，咱们将用户的ID记录在Session中，假设为Session["UserID"]。
前端发送ajax请求时，若是这个请求要求已登陆的用户才能访问，咱们只需在后台Controller中验证Session["UserID"]是否为空，就能够判断用户是否已经登陆了。
这也是传统的Web应用可以逃避HTTP面向无链接的方法。数据库

基于REST服务的Web应用

当今不少应用，客户端和服务端是分离的，服务端是基于REST风格构建的一套Service，客户端是第三方的Web应用，客户端经过跨域的ajax请求获取REST服务的资源。
然而REST Service一般是被设计为无状态的（Stateless），这意味着咱们不能依赖于Session来保存用户信息，也不能使用Session["UserID"]这种方式肯定用户身份。

解决这个问题的方法是什么呢？常规的方法是使用OAuth 2.0。
对于用户相关的OpenAPI，为了保护用户数据的安全和隐私，第三方Web应用访问用户数据前都须要显式的向用户征求受权。
相比于OAuth 1.0，OAuth 2.0的认证流程更加简单。

专用名词介绍

在了解OAuth 2.0以前，咱们先了解几个名词：

  1. Resource：资源，和REST中的资源概念一致，有些资源是访问受保护的
  2. Resource Server：存放资源的服务器
  3. Resource Owner：资源全部者，本文中又称为用户(user)
  4. User Agent：用户代理，即浏览器
  5. Client： 访问资源的客户端，也就是应用程序
  6. Authorization Server：认证服务器，用于给Client提供访问令牌的服务器
  7. Access Token：访问资源的令牌，由Authorization Server器授予，Client访问Resource时，需提供Access Token
  8. Bearer Token：Bearer Token是Access Token的一种，另外一种是Mac Token。
    Bearer Token的使用格式为：Bearer XXXXXXXX

Token的类型请参考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1

有时候认证服务器和资源服务器能够是一台服务器，本文中的Web API示例正是这种运用场景。

OAuth认证流程

在知道这几个词之后，咱们用这几个名词来编个故事。

简化版本

这个故事的简化版本是：用户(Resource Owner)访问资源(Resource)。

image

具体版本

简化版的故事只有一个结果，下面是这个故事的具体版本：

  1. 用户经过浏览器打开客户端后，客户端要求用户给予受权。
    客户端能够直接将受权请求发给用户（如图所示），或者发送给一个中间媒介，好比认证服务器。
  2. 用户赞成给予客户端受权，客户端收到用户的受权。
    受权模式(Grant Type)取决于客户端使用的模式，以及认证服务器所支持的模式。
  3. 客户端提供身份信息，而后向认证服务器发送请求，申请访问令牌
  4. 认证服务器验证客户端提供的身份信息，若是验证经过，则向客户端发放令牌
  5. 客户端使用访问令牌，向资源服务器请求受保护的资源
  6. 资源服务器验证访问令牌，若是有效，则向客户端开放资源

image

以上几个步骤，(B)是较为关键的一个，即用户怎么样才能给客户端受权。有了这个受权之后，客户端就能够获取令牌，进而经过临牌获取资源。这也是OAuth 2.0的运行流程，详情请参考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-1.2

客户端的受权模式

客户端必须获得用户的受权（authorization grant），才能得到令牌（access token）。

OAuth 2.0定义了四种受权方式：

  • 受权码模式（authorization code）
  • 简化模式（implicit）
  • 密码模式（resource owner password credentials）
  • 客户端模式（client credentials）

本文的示例是基于密码模式的，我就只简单介绍这种模式，其余3我就不介绍了，你们有兴趣能够看阮大的文章：

http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

密码模式

密码模式（Resource Owner Password Credentials Grant）中，用户向客户端提供本身的用户名和密码。客户端使用这些信息，向服务端申请受权。

在这种模式中，用户必须把本身的密码给客户端，可是客户端不得储存密码。这一般用在用户对客户端高度信任的状况下，好比客户端是操做系统的一部分，或者由一个著名公司出品。

image

密码嘛事的执行步骤以下：

（A）用户向客户端提供用户名和密码。

（B）客户端将用户名和密码发给认证服务器，向后者请求令牌。

（C）认证服务器确认无误后，向客户端提供访问令牌。

(B)步骤中，客户端发出的HTTP请求，包含如下参数：

  • grant_type：表示受权类型，此处的值固定为"password"，必选项。
  • username：表示用户名，必选项。
  • password：表示用户的密码，必选项。
  • scope：表示权限范围，可选项。

注意：在后面的客户端示例中，除了提供username和password，grant_type也是必须指定为"password"，不然没法获取服务端的受权。

服务端环境准备

若是您是前端开发人员，而且未接触过ASP.NET Web API，能够跳过此段落。

image

Authentication选择Individual User Accounts

image

建立这个Web API工程时，VS会自动引入Owin和AspNet.Identity相关的库。

image

修改ValuesController，除了IEnumerable<string> Get()操做外，其余操做都删除，并为该操做应用[Authorize]特性，这表示客户端必须经过身份验证后才能调用该操做。

public class ValuesController : ApiController { // GET: api/Values [Authorize] public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } }

添加Model, Controller

image

image

image

初始化数据库

image

执行如下3个命令

image

image

执行如下SQL语句：

显示代码

CustomersController类有5个Action，除了2个GET请求外，其余3个请求分别是POST, PUT和DELETE。
为这3个请求添加[Authorize]特性，这3个请求必须经过身份验证才能访问。

隐藏代码 
public class CustomersController : ApiController { private ApplicationDbContext db = new ApplicationDbContext(); // GET: api/Customers public IQueryable<Customer> GetCustomers() { return db.Customers; } // GET: api/Customers/5 [ResponseType(typeof(Customer))] public async Task<IHttpActionResult> GetCustomer(int id) { Customer customer = await db.Customers.FindAsync(id); if (customer == null) { return NotFound(); } return Ok(customer); } // PUT: api/Customers/5 [Authorize] [ResponseType(typeof(void))] public async Task<IHttpActionResult> PutCustomer(int id, Customer customer) { // ... } // POST: api/Customers [Authorize] [ResponseType(typeof(Customer))] public async Task<IHttpActionResult> PostCustomer(Customer customer) { // ... } // DELETE: api/Customers/5 [ResponseType(typeof(Customer))] [Authorize] public async Task<IHttpActionResult> DeleteCustomer(int id) { // ... } }

让Web API以CamelCase输出JSON

在Global.asax文件中添加如下几行代码：

var formatters = GlobalConfiguration.Configuration.Formatters;
var jsonFormatter = formatters.JsonFormatter; var settings = jsonFormatter.SerializerSettings; settings.Formatting = Formatting.Indented; settings.ContractResolver = new CamelCasePropertyNamesContractResolver();

启用CORS

在Nuget Package Manager Console输入如下命令:

Install-Package Microsoft.AspNet.WebApi.Cors

在WebApiConfig中启用CORS：

public static class WebApiConfig { public static void Register(HttpConfiguration config) { var cors = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(cors); // ... } }

类说明

在执行上述步骤时，VS已经帮咱们生成好了一些类

image

IdentityModels.cs：包含ApplicationDbContext类和ApplicationUser类，无需再建立DbContext类

public class ApplicationUser : IdentityUser { // ... } public class ApplicationDbContext : IdentityDbContext<ApplicationUser> { // ... }

Startup.Auth.cs：用于配置OAuth的一些属性。

public partial class Startup { public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; } public static string PublicClientId { get; private set; } // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864 public void ConfigureAuth(IAppBuilder app) { // .. // Configure the application for OAuth based flow PublicClientId = "self"; OAuthOptions = new OAuthAuthorizationServerOptions { TokenEndpointPath = new PathString("/Token"), Provider = new ApplicationOAuthProvider(PublicClientId), AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"), AccessTokenExpireTimeSpan = TimeSpan.FromDays(14), // In production mode set AllowInsecureHttp = false AllowInsecureHttp = true }; // Enable the application to use bearer tokens to authenticate users app.UseOAuthBearerTokens(OAuthOptions); // .. } }

这些OAuth配置项，咱们只用关注其中的两项：

  • TokenEndpointPath：表示客户端发送验证请求的地址，例如：Web API的站点为www.example.com，验证请求的地址则为www.example.com/token。
  • UseOAuthBearerTokens：使用Bearer类型的token_type（令牌类型）。

ApplicationOAuthProvider.cs：默认的OAuthProvider实现，GrantResourceOwnerCredentials方法用于验证用户身份信息，并返回access_token（访问令牌）。

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) { // ... }

通俗地讲，客户端输入用户名、密码，点击登陆后，会发起请求到www.example.com/token。
token这个请求在服务端执行的验证方法是什么呢？正是GrantResourceOwnerCredentials方法。

客户端发起验证请求时，必然是跨域的，token这个请求不属于任何ApiController的Action，而在WebApiConfig.cs中启用全局的CORS，只对ApiController有效，对token请求是不起做用的。
因此还须要在GrantResourceOwnerCredentials方法中添加一行代码：

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) { context.Response.Headers.Add("Access-Control-Allow-Origin", new []{"*"}); // ... }

IdentityConfig.cs：配置用户名和密码的复杂度，主要用于用户注册时。例如：不容许用户名为纯字母和数字的组合，密码长度至少为6位…。

隐藏代码 
public static ApplicationUserManager Create(IdentityFactoryOptions<ApplicationUserManager> options, IOwinContext context) { var manager = new ApplicationUserManager(new UserStore<ApplicationUser>(context.Get<ApplicationDbContext>())); // Configure validation logic for usernames manager.UserValidator = new UserValidator<ApplicationUser>(manager) { AllowOnlyAlphanumericUserNames = false, RequireUniqueEmail = true }; // Configure validation logic for passwords manager.PasswordValidator = new PasswordValidator { RequiredLength = 6, RequireNonLetterOrDigit = true, RequireDigit = true, RequireLowercase = true, RequireUppercase = true, }; // ... return manager; }

使用Postman测试GET和POST请求

测试GET请求

image

GET请求测试成功，能够获取到JSON数据。

测试POST请求

image

POST请求测试不经过，提示：验证不经过，请求被拒绝。

基于$.ajax实现注册、登陆、注销和API调用

服务端的环境已经准备好了，如今咱们就逐个实现用户注册、登陆，以及API调用功能吧。

注册

页面的HTML代码以下：

<div id="app"> <div class="container"> <span id="message">{{ msg }}</span> </div> <div class="container"> <div class="form-group"> <label>电子邮箱</label> <input type="text" v-model="registerModel.email" /> </div> <div class="form-group"> <label>密码</label> <input type="text" v-model="registerModel.password" /> </div> <div class="form-group"> <label>确认密码</label> <input type="text" v-model="registerModel.confirmPassword" /> </div> <div class="form-group"> <label></label> <button @click="register">注册</button> </div> </div> </div>

建立Vue实例，而后基于$.ajax发送用户注册请求：

var demo = new Vue({ el: '#app', data: { registerUrl: 'http://localhost:10648/api/Account/Register', registerModel: { email: '', password: '', confirmPassword: '' }, msg: '' }, methods: { register: function() { var vm = this vm.msg = '' $.ajax({ url: vm.registerUrl, type: 'POST', dataType: 'json', data: vm.registerModel, success: function() { vm.msg = '注册成功！' }, error: vm.requestError }) }, requestError: function(xhr, errorType, error) { this.msg = xhr.responseText } } })

32

View Demo

登陆和注销

登陆的HTML代码：

<div id="app"> <div class="container text-center"> <span id="message">{{ msg }}</span> </div> <div class="container"> <div class="account-info"> <span v-if="userName">{{ userName }} | <a href="#" @click="logout">注销</a></span> </div> </div> <div class="container"> <div class="form-group"> <label>电子邮箱</label> <input type="text" v-model="loginModel.username" /> </div> <div class="form-group"> <label>密码</label> <input type="text" v-model="loginModel.password" /> </div> <div class="form-group"> <label></label> <button @click="login">登陆</button> </div> </div> </div>

建立Vue实例，而后基于$.ajax发送用户登陆请求：

var demo = new Vue({ el: '#app', data: { loginUrl: 'http://localhost:10648/token', logoutUrl: 'http://localhost:10648/api/Account/Logout', loginModel: { username: '', password: '', grant_type: 'password' }, msg: '', userName: '' }, ready: function() { this.userName = sessionStorage.getItem('userName') }, methods: { login: function() { var vm = this vm.msg = '' vm.result = '' $.ajax({ url: vm.loginUrl, type: 'POST', dataType: 'json', data: vm.loginModel, success: function(data) { vm.msg = '登陆成功！' vm.userName = data.userName sessionStorage.setItem('accessToken', data.access_token) sessionStorage.setItem('userName', vm.userName) }, error: vm.requestError }) }, logout: function() { var vm = this vm.msg = '' $.ajax({ url: vm.logoutUrl, type: 'POST', dataType: 'json', success: function(data) { vm.msg = '注销成功！' vm.userName = '' vm.loginModel.userName = '' vm.loginModel.password = '' sessionStorage.removeItem('userName') sessionStorage.removeItem('accessToken') }, error: vm.requestError }) }, requestError: function(xhr, errorType, error) { this.msg = xhr.responseText } } })

33

View Demo

在试验这个示例时，把Fiddler也打开，咱们一共进行了3次操做：

  1. 第1次操做：输入了错误的密码，服务端响应400的状态码，并提示了错误信息。
  2. 第2次操做：输入了正确的用户名和密码，服务端响应200的状态码
  3. 第3次操做：点击右上角的注销连接

image

注意第2次操做，在Fiddler中查看服务端返回的内容：

image

服务端返回了access_token, expires_in, token_type,userName等信息，在客户端能够用sessionStorage或localStorage保存access_token。

调用API

取到了access_token后，咱们就能够基于access_token去访问服务端受保护的资源了。
这里咱们要访问的资源是/api/Values，它来源于ValuesController的Get操做。

基于注册画面，添加一段HTML代码：

<div class="container text-center"> <div> <button @click="callApi">调用API</button> </div> <div class="result"> API调用结果：{{ result | json }} </div> </div>

在Vue实例中添加一个callApi方法：

callApi: function() { var vm = this vm.msg = '' vm.result = '' headers = {} headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken'); $.ajax({ type: 'get', dataTye: 'json', url: vm.apiUrl, headers: headers, success: function(data) { vm.result = data }, error: vm.requestError }) }

在调用callApi方法时，设置了请求头的Authorization属性，其格式为："Bearer access_token"。
因为服务端指定使用了Bearer类型的access token，因此客户端必须使用这种格式将access token传给资源服务器。

34

View Demo

在试验这个示例时，咱们一共进行了5次操做：

  1. 第1次操做：没有输入用户名和密码，直接点击[调用API]按钮，服务端返回401的状态码，表示该请求未受权。
  2. 第2次操做：输入用户名和密码，而后店点击登陆按钮，登陆成功。
  3. 第3次操做：点击[调用API]按钮，服务端返回200的状态码，请求成功。
  4. 第4次操做：点击[注销]连接，注销成功。
  5. 第5次操做：再次点击[调用API]按钮，服务端返回401的状态码，表示该请求未受权。

image

有人可能会注意到，为何每次点击[调用API]按钮，都发起了两次请求？

这是由于当浏览器发送跨域请求时，浏览器都会先发送一个OPTIONS预请求（preflight request）给目标站点，用于确认目标站点是否接受跨域请求，若是目标站点不支持跨域请求，浏览器会提示错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource.

若是是POST请求，且数据类型(Content-Type)是 application/x-www-form-urlencoded,multipart/form-data 或 text/plain中的一种，则浏览器不会发送预请求，上图的/token请求就是知足该条件的。

zepto会自动将非GET请求的Content-Type设置为application/x-www-form-urlencoded：

 

if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET')) setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')

image

咱们仍是经过Fidder看一下第1次/api/Values请求和响应的Headers信息

请求的Headers信息，它是一次OPTIONS请求。

image

响应的Headers信息，Access-Control-Allow-Origin: *表示容许全部外部站点对目标站点发送跨域请求。

image

更多CORS的知识，请参考MDN上的说明：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

基于vue-resource实现注册、登陆和API调用

基于vue-resource实现这3项功能时，沿用上面的HTML代码。

注册

更为简洁的register方法：

register: function() { this.$http.post(this.registerUrl, this.registerModel) .then((response) => { this.msg = '注册成功！' }).catch((response) => { this.msg = response.json() }) }

View Demo

注意：当使用vue-resource发送注册的POST请求时，Fiddler捕获到了2次请求，第1次是由浏览器发送的OPTIONS预请求，第2次才是实际的POST请求。这和使用$.ajax时是不同的，由于$.ajax会将非GET请求的Content-Type设置为application/x-www-form-urlencoded，而vue-resource发送POST请求的Content-Type为application/json;charset=UTF-8。

image

image

启用emulateJSON选项，可让浏览器不发送OPTIONS预请求，有两种启用方式。

1.全局启用

Vue.http.options.emulateJSON = true

2.局部启用

this.$http.post(this.registerUrl, this.registerModel ,{ emulateJSON : true}) .then( (response) => { this.msg = '注册成功！' })

启用了emulateJSON选项后，使得POST请求的Content-Type变为application/x-www-form-urlencoded

image

登陆和注销

登陆和注销的方法：

 

login: function() { this.$http.post(this.loginUrl, this.loginModel) .then((response) => { var body = response.json() this.msg = '登陆成功！' this.userName = body.userName sessionStorage.setItem('accessToken', body.access_token) sessionStorage.setItem('userName', body.userName) }).catch(this.requestError) }, logout: function() { this.$http.post(this.logoutUrl) .then((response) => { this.msg = '注销成功！' this.userName = '' this.loginModel.username = '' this.loginModel.password = '' sessionStorage.removeItem('userName') sessionStorage.removeItem('accessToken') }).catch(this.requestError) }, requestError: function(response) { this.msg = response.json() }

View Demo

API调用

调用API的方法也更为简洁：

callApi: function() { var headers = {} headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken') this.$http.get(this.apiUrl, { headers: headers }) .then((response) => { this.result = response.json() }).catch(this.requestError) }

一样的，在发送请求前，须要将access token添加到请求头。

View Demo

综合示例

本文在准备服务端环境的时候，提供了一个CustomersController，除了GET操做，其余操做的访问都是受保护的，须要用户登陆之后才能操做。

如今咱们来实现这个示例， 该示例结合了上一篇的CURD示例，以及本文的注册、登陆、注销功能。

具体代码我就再也不贴出来了，你们结合源代码试一试吧。

35

View Demo

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程