AI专业者开发社区 1 号成员
  •  0 回帖  •  8 浏览  •  4 个月前
   

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

概述

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

本文的主要内容如下：

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

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

35

本文 9 个示例的源码已放到 GitHub，如果您觉得本篇内容不错，请点个赞，或在 GitHub 上加个星星！

Page Demo GitHub Source

基于 $.ajax 的示例如下：

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

基于 vue-resource 的示例如下：

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

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 语句：

显示代码
SET IDENTITY_INSERT [dbo].[Customers] ON 

INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (1, N'ALFKI', N'Alfreds Futterkiste', N'Maria Anders', N'Sales Representative', N'Obere Str. 57', N'Berlin', NULL, N'12209', N'Germany', N'030-0074321', N'030-0076545', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (2, N'ANATR', N'Ana Trujillo Emparedados y helados', N'Ana Trujillo', N'Owner', N'Avda. de la Constitución 2222', N'México D.F.', NULL, N'05021', N'Mexico', N'(5) 555-4729', N'(5) 555-3745', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (3, N'ANTON', N'Antonio Moreno Taquería', N'Antonio Moreno', N'Owner', N'Mataderos  2312', N'México D.F.', NULL, N'05023', N'Mexico', N'(5) 555-3932', NULL, 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (4, N'AROUT', N'Around the Horn', N'Thomas Hardy', N'Sales Representative', N'120 Hanover Sq.', N'London', NULL, N'WA1 1DP', N'UK', N'(171) 555-7788', N'(171) 555-6750', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (5, N'BERGS', N'Berglunds snabbköp', N'Christina Berglund', N'Order Administrator', N'Berguvsvägen  8', N'Luleå', NULL, N'S-958 22', N'Sweden', N'0921-12 34 65', N'0921-12 34 67', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (6, N'BLAUS', N'Blauer See Delikatessen', N'Hanna Moos', N'Sales Representative', N'Forsterstr. 57', N'Mannheim', NULL, N'68306', N'Germany', N'0621-08460', N'0621-08924', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (7, N'BLONP', N'Blondesddsl père et fils', N'Frédérique Citeaux', N'Marketing Manager', N'24, place Kléber', N'Strasbourg', NULL, N'67000', N'France', N'88.60.15.31', N'88.60.15.32', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (8, N'BOLID', N'Bólido Comidas preparadas', N'Martín Sommer', N'Owner', N'C/ Araquil, 67', N'Madrid', NULL, N'28023', N'Spain', N'(91) 555 22 82', N'(91) 555 91 99', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (9, N'BONAP', N'Bon app''', N'Laurence Lebihan', N'Owner', N'12, rue des Bouchers', N'Marseille', NULL, N'13008', N'France', N'91.24.45.40', N'91.24.45.41', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (10, N'BOTTM', N'Bottom-Dollar Markets', N'Elizabeth Lincoln', N'Accounting Manager', N'23 Tsawassen Blvd.', N'Tsawassen', N'BC', N'T2F 8M4', N'Canada', N'(604) 555-4729', N'(604) 555-3745', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (11, N'BSBEV', N'B''s Beverages', N'Victoria Ashworth', N'Sales Representative', N'Fauntleroy Circus', N'London', NULL, N'EC2 5NT', N'UK', N'(171) 555-1212', NULL, 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (12, N'CACTU', N'Cactus Comidas para llevar', N'Patricio Simpson', N'Sales Agent', N'Cerrito 333', N'Buenos Aires', NULL, N'1010', N'Argentina', N'(1) 135-5555', N'(1) 135-4892', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (13, N'CENTC', N'Centro comercial Moctezuma', N'Francisco Chang', N'Marketing Manager', N'Sierras de Granada 9993', N'México D.F.', NULL, N'05022', N'Mexico', N'(5) 555-3392', N'(5) 555-7293', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (14, N'CHOPS', N'Chop-suey Chinese', N'Yang Wang', N'Owner', N'Hauptstr. 29', N'Bern', NULL, N'3012', N'Switzerland', N'0452-076545', NULL, 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (15, N'COMMI', N'Comércio Mineiro', N'Pedro Afonso', N'Sales Associate', N'Av. dos Lusíadas, 23', N'Sao Paulo', N'SP', N'05432-043', N'Brazil', N'(11) 555-7647', NULL, 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (16, N'CONSH', N'Consolidated Holdings', N'Elizabeth Brown', N'Sales Representative', N'Berkeley Gardens 12  Brewery', N'London', NULL, N'WX1 6LT', N'UK', N'(171) 555-2282', N'(171) 555-9199', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (17, N'DRACD', N'Drachenblut Delikatessen', N'Sven Ottlieb', N'Order Administrator', N'Walserweg 21', N'Aachen', NULL, N'52066', N'Germany', N'0241-039123', N'0241-059428', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (18, N'DUMON', N'Du monde entier', N'Janine Labrune', N'Owner', N'67, rue des Cinquante Otages', N'Nantes', NULL, N'44000', N'France', N'40.67.88.88', N'40.67.89.89', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (19, N'EASTC', N'Eastern Connection', N'Ann Devon', N'Sales Agent', N'35 King George', N'London', NULL, N'WX3 6FW', N'UK', N'(171) 555-0297', N'(171) 555-3373', 1)
INSERT [dbo].[Customers] ([CustomerId], [CustomerCode], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax], [CustomerType]) VALUES (20, N'ERNSH', N'Ernst Handel', N'Roland Mendel', N'Sales Manager', N'Kirchgasse 6', N'Graz', NULL, N'8010', N'Austria', N'7675-3425', N'7675-3426', 1)


SET IDENTITY_INSERT [dbo].[Customers] OFF

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&lt;Customer&gt; GetCustomers()
{
    return db.Customers;
}

// GET: api/Customers/5
[ResponseType(typeof(Customer))]
public async Task&lt;IHttpActionResult&gt; 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&lt;IHttpActionResult&gt; PutCustomer(int id, Customer customer)
{
  // ...
}

// POST: api/Customers
[Authorize]
[ResponseType(typeof(Customer))]
public async Task&lt;IHttpActionResult&gt; PostCustomer(Customer customer)
{
    // ...
}

// DELETE: api/Customers/5
[ResponseType(typeof(Customer))]
[Authorize]
public async Task&lt;IHttpActionResult&gt; 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>

		&lt;div class="form-group"&gt;
			&lt;label&gt;确认密码&lt;/label&gt;
			&lt;input type="text" v-model="registerModel.confirmPassword" /&gt;
		&lt;/div&gt;

		&lt;div class="form-group"&gt;
			&lt;label&gt;&lt;/label&gt;
			&lt;button @click="register"&gt;注册&lt;/button&gt;
		&lt;/div&gt;
&lt;/div&gt;



</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) =&gt; {
		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) =&gt; {
		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) =&gt; {
		this.result = response.json()
	}).catch(this.requestError)



}

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

View Demo

综合示例

本文在准备服务端环境的时候，提供了一个 CustomersController，除了 GET 操作，其他操作的访问都是受保护的，需要用户登录以后才能操作。

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

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

35

View Demo