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調用功能實現的。

本文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)。

具體版本

簡化版的故事只有一個結果，下面是這個故事的具體版本：

1. 用戶經過瀏覽器打開客戶端後，客戶端要求用戶給予受權。
   客戶端能夠直接將受權請求發給用戶（如圖所示），或者發送給一箇中間媒介，好比認證服務器。
2. 用戶贊成給予客戶端受權，客戶端收到用戶的受權。
   受權模式(Grant Type)取決於客戶端使用的模式，以及認證服務器所支持的模式。
3. 客戶端提供身份信息，而後向認證服務器發送請求，申請訪問令牌
4. 認證服務器驗證客戶端提供的身份信息，若是驗證經過，則向客戶端發放令牌
5. 客戶端使用訪問令牌，向資源服務器請求受保護的資源
6. 資源服務器驗證訪問令牌，若是有效，則向客戶端開放資源

以上幾個步驟，(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）中，用戶向客戶端提供本身的用戶名和密碼。客戶端使用這些信息，向服務端申請受權。

在這種模式中，用戶必須把本身的密碼給客戶端，可是客戶端不得儲存密碼。這一般用在用戶對客戶端高度信任的狀況下，好比客戶端是操做系統的一部分，或者由一個著名公司出品。

密碼嘛事的執行步驟以下：

（A）用戶向客戶端提供用戶名和密碼。

（B）客戶端將用戶名和密碼發給認證服務器，向後者請求令牌。

（C）認證服務器確認無誤後，向客戶端提供訪問令牌。

(B)步驟中，客戶端發出的HTTP請求，包含如下參數：

• grant_type：表示受權類型，此處的值固定爲"password"，必選項。
• username：表示用戶名，必選項。
• password：表示用戶的密碼，必選項。
• scope：表示權限範圍，可選項。

注意：在後面的客戶端示例中，除了提供username和password，grant_type也是必須指定爲"password"，不然沒法獲取服務端的受權。

服務端環境準備

若是您是前端開發人員，而且未接觸過ASP.NET Web API，能夠跳過此段落。

Authentication選擇Individual User Accounts

建立這個Web API工程時，VS會自動引入Owin和AspNet.Identity相關的庫。

修改ValuesController，除了IEnumerable<string> Get()操做外，其餘操做都刪除，併爲該操做應用[Authorize]特性，這表示客戶端必須經過身份驗證後才能調用該操做。

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

添加Model, Controller

初始化數據庫

執行如下3個命令

執行如下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已經幫咱們生成好了一些類

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請求

GET請求測試成功，能夠獲取到JSON數據。

測試POST請求

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 } } }) 

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 } } }) 

View Demo

在試驗這個示例時，把Fiddler也打開，咱們一共進行了3次操做：

1. 第1次操做：輸入了錯誤的密碼，服務端響應400的狀態碼，並提示了錯誤信息。
2. 第2次操做：輸入了正確的用戶名和密碼，服務端響應200的狀態碼
3. 第3次操做：點擊右上角的註銷連接

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

服務端返回了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傳給資源服務器。

View Demo

在試驗這個示例時，咱們一共進行了5次操做：

1. 第1次操做：沒有輸入用戶名和密碼，直接點擊[調用API]按鈕，服務端返回401的狀態碼，表示該請求未受權。
2. 第2次操做：輸入用戶名和密碼，而後店點擊登陸按鈕，登陸成功。
3. 第3次操做：點擊[調用API]按鈕，服務端返回200的狀態碼，請求成功。
4. 第4次操做：點擊[註銷]連接，註銷成功。
5. 第5次操做：再次點擊[調用API]按鈕，服務端返回401的狀態碼，表示該請求未受權。

有人可能會注意到，爲何每次點擊[調用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') 

咱們仍是經過Fidder看一下第1次/api/Values請求和響應的Headers信息

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

響應的Headers信息，Access-Control-Allow-Origin: *表示容許全部外部站點對目標站點發送跨域請求。

更多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。

啓用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

登陸和註銷

登陸和註銷的方法：

 

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示例，以及本文的註冊、登陸、註銷功能。

具體代碼我就再也不貼出來了，你們結合源代碼試一試吧。

View Demo