概述
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出白銀免費做網(wǎng)站回饋大家。
上一篇我們介紹了如何使用vue resource處理HTTP請求，結(jié)合服務(wù)端的REST API，就能夠很容易地構(gòu)建一個增刪查改應(yīng)用。
這個應(yīng)用始終遺留了一個問題，Web App在訪問REST API時，沒有經(jīng)過任何認(rèn)證，這使得服務(wù)端的REST API是不安全的，只要有人知道api地址，就可以調(diào)用API對服務(wù)端的資源進行修改和刪除。
今天我們就來探討一下如何結(jié)合Web API來限制資源的訪問。
本文的主要內(nèi)容如下：
本文的最終示例是結(jié)合上一篇的CURD，本文的登錄、注冊、注銷和API調(diào)用功能實現(xiàn)的。
本文9個示例的源碼已放到GitHub：https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth
OAuth介紹
傳統(tǒng)的Web應(yīng)用
在傳統(tǒng)的Web應(yīng)用程序中，前后端是放在一個站點下的，我們可以通過會話（Session）來保存用戶的信息。
例如：一個簡單的ASP.NET MVC應(yīng)用程序，用戶登錄成功后，我們將用戶的ID記錄在Session中，假設(shè)為Session["UserID"]。
前端發(fā)送ajax請求時，如果這個請求要求已登錄的用戶才能訪問，我們只需在后臺Controller中驗證Session["UserID"]是否為空，就可以判斷用戶是否已經(jīng)登錄了。
這也是傳統(tǒng)的Web應(yīng)用能夠逃避HTTP面向無連接的方法。
基于REST服務(wù)的Web應(yīng)用
當(dāng)今很多應(yīng)用，客戶端和服務(wù)端是分離的，服務(wù)端是基于REST風(fēng)格構(gòu)建的一套Service，客戶端是第三方的Web應(yīng)用，客戶端通過跨域的ajax請求獲取REST服務(wù)的資源。
然而REST Service通常是被設(shè)計為無狀態(tài)的（Stateless），這意味著我們不能依賴于Session來保存用戶信息，也不能使用Session["UserID"]這種方式確定用戶身份。
解決這個問題的方法是什么呢？常規(guī)的方法是使用OAuth 2.0。
對于用戶相關(guān)的OpenAPI，為了保護用戶數(shù)據(jù)的安全和隱私，第三方Web應(yīng)用訪問用戶數(shù)據(jù)前都需要顯式的向用戶征求授權(quán)。
相比于OAuth 1.0，OAuth 2.0的認(rèn)證流程更加簡單。
專用名詞介紹
在了解OAuth 2.0之前，我們先了解幾個名詞：
Token的類型請參考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1
有時候認(rèn)證服務(wù)器和資源服務(wù)器可以是一臺服務(wù)器，本文中的Web API示例正是這種運用場景。
OAuth認(rèn)證流程
在知道這幾個詞以后，我們用這幾個名詞來編個故事。
簡化版本
這個故事的簡化版本是：用戶(Resource Owner)訪問資源(Resource)。
具體版本
簡化版的故事只有一個結(jié)果，下面是這個故事的具體版本：
以上幾個步驟，(B)是較為關(guān)鍵的一個，即用戶怎么樣才能給客戶端授權(quán)。有了這個授權(quán)以后，客戶端就可以獲取令牌，進而通過臨牌獲取資源。這也是OAuth 2.0的運行流程，詳情請參考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-1.2
客戶端的授權(quán)模式
客戶端必須得到用戶的授權(quán)（authorization grant），才能獲得令牌（access token）。
OAuth 2.0定義了四種授權(quán)方式：
本文的示例是基于密碼模式的，我就只簡單介紹這種模式，其他3我就不介紹了。
密碼模式
密碼模式（Resource Owner Password Credentials Grant）中，用戶向客戶端提供自己的用戶名和密碼?？蛻舳耸褂眠@些信息，向服務(wù)端申請授權(quán)。
在這種模式中，用戶必須把自己的密碼給客戶端，但是客戶端不得儲存密碼。這通常用在用戶對客戶端高度信任的情況下，比如客戶端是操作系統(tǒng)的一部分，或者由一個著名公司出品。
密碼嘛事的執(zhí)行步驟如下：
（A）用戶向客戶端提供用戶名和密碼。
（B）客戶端將用戶名和密碼發(fā)給認(rèn)證服務(wù)器，向后者請求令牌。
（C）認(rèn)證服務(wù)器確認(rèn)無誤后，向客戶端提供訪問令牌。
(B)步驟中，客戶端發(fā)出的HTTP請求，包含以下參數(shù)：
注意：在后面的客戶端示例中，除了提供username和password，grant_type也是必須指定為"password"，否則無法獲取服務(wù)端的授權(quán)。
服務(wù)端環(huán)境準(zhǔn)備
如果您是前端開發(fā)人員，并且未接觸過ASP.Net Web API，可以跳過此段落。
Authentication選擇Individual User Accounts
創(chuàng)建這個Web API工程時，VS會自動引入Owin和AspNet.Identity相關(guān)的庫。
修改ValuesController，除了IEnumerable
重慶分公司
重慶分公司
public class ValuesController : ApiController
{
// GET: api/Values
[Authorize]
public IEnumerable Get()
{
return new string[] { "value1", "value2" };
}
} 添加Model, Controller
初始化數(shù)據(jù)庫
執(zhí)行以下3個命令
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 GetCustomers()
{
return db.Customers;
}
// GET: api/Customers/5
[ResponseType(typeof(Customer))]
public async Task 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 PutCustomer(int id, Customer customer)
{
// ...
}
// POST: api/Customers
[Authorize]
[ResponseType(typeof(Customer))]
public async Task PostCustomer(Customer customer)
{
// ...
}
// DELETE: api/Customers/5
[ResponseType(typeof(Customer))]
[Authorize]
public async Task DeleteCustomer(int id)
{
// ...
}
}
讓W(xué)eb 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);
// ...
}
}
類說明
在執(zhí)行上述步驟時，VS已經(jīng)幫我們生成好了一些類
IdentityModels.cs：包含ApplicationDbContext類和ApplicationUser類，無需再創(chuàng)建DbContext類
public class ApplicationUser : IdentityUser
{
// ...
}
public class ApplicationDbContext : IdentityDbContext
{
// ...
}
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配置項，我們只用關(guān)注其中的兩項：
ApplicationOAuthProvider.cs：默認(rèn)的OAuthProvider實現(xiàn)，GrantResourceOwnerCredentials方法用于驗證用戶身份信息，并返回access_token（訪問令牌）。
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
// ...
}通俗地講，客戶端輸入用戶名、密碼，點擊登錄后，會發(fā)起請求到www.example.com/token。
token這個請求在服務(wù)端執(zhí)行的驗證方法是什么呢？正是GrantResourceOwnerCredentials方法。
客戶端發(fā)起驗證請求時，必然是跨域的，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：配置用戶名和密碼的復(fù)雜度，主要用于用戶注冊時。例如：不允許用戶名為純字母和數(shù)字的組合，密碼長度至少為6位…。
public static ApplicationUserManager Create(IdentityFactoryOptionsoptions, IOwinContext context) { var manager = new ApplicationUserManager(new UserStore (context.Get ())); // Configure validation logic for usernames manager.UserValidator = new UserValidator (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數(shù)據(jù)。
測試POST請求
POST請求測試不通過，提示：驗證不通過，請求被拒絕。
基于$.ajax實現(xiàn)注冊、登錄、注銷和API調(diào)用
服務(wù)端的環(huán)境已經(jīng)準(zhǔn)備好了，現(xiàn)在我們就逐個實現(xiàn)用戶注冊、登錄，以及API調(diào)用功能吧。
注冊
頁面的HTML代碼如下：
{{ msg }}
創(chuàng)建Vue實例，然后基于$.ajax發(fā)送用戶注冊請求：
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
}
}
})
登錄和注銷
登錄的HTML代碼：
創(chuàng)建Vue實例，然后基于$.ajax發(fā)送用戶登錄請求：
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
}
}
})
在試驗這個示例時，把Fiddler也打開，我們一共進行了3次操作：
注意第2次操作，在Fiddler中查看服務(wù)端返回的內(nèi)容：
服務(wù)端返回了access_token, expires_in, token_type,userName等信息，在客戶端可以用sessionStorage或localStorage保存access_token。
調(diào)用API
取到了access_token后，我們就可以基于access_token去訪問服務(wù)端受保護的資源了。
這里我們要訪問的資源是/api/Values，它來源于ValuesController的Get操作。
基于注冊畫面，添加一段HTML代碼：
API調(diào)用結(jié)果：{{ result | json }}
在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
})
}
在調(diào)用callApi方法時，設(shè)置了請求頭的Authorization屬性，其格式為："Bearer access_token"。
由于服務(wù)端指定使用了Bearer類型的access token，所以客戶端必須使用這種格式將access token傳給資源服務(wù)器。
在試驗這個示例時，我們一共進行了5次操作：
有人可能會注意到，為什么每次點擊[調(diào)用API]按鈕，都發(fā)起了兩次請求？
這是因為當(dāng)瀏覽器發(fā)送跨域請求時，瀏覽器都會先發(fā)送一個OPTIONS預(yù)請求（preflight request）給目標(biāo)站點，用于確認(rèn)目標(biāo)站點是否接受跨域請求，如果目標(biāo)站點不支持跨域請求，瀏覽器會提示錯誤：
No 'Access-Control-Allow-Origin' header is present on the requested resource.
如果是POST請求，且數(shù)據(jù)類型(Content-Type)是application/x-www-form-urlencoded,multipart/form-data 或 text/plain中的一種，則瀏覽器不會發(fā)送預(yù)請求，上圖的/token請求就是滿足該條件的。
zepto會自動將非GET請求的Content-Type設(shè)置為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請求和響應(yīng)的Headers信息
請求的Headers信息，它是一次OPTIONS請求。
響應(yīng)的Headers信息，Access-Control-Allow-Origin: *表示允許所有外部站點對目標(biāo)站點發(fā)送跨域請求。
更多CORS的知識，請參考MDN上的說明：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
基于vue-resource實現(xiàn)注冊、登錄和API調(diào)用
基于vue-resource實現(xiàn)這3項功能時，沿用上面的HTML代碼。
注冊
更為簡潔的register方法：
register: function() {
this.$http.post(this.registerUrl, this.registerModel)
.then((response) => {
this.msg = '注冊成功！'
}).catch((response) => {
this.msg = response.json()
})
}注意：當(dāng)使用vue-resource發(fā)送注冊的POST請求時，F(xiàn)iddler捕獲到了2次請求，第1次是由瀏覽器發(fā)送的OPTIONS預(yù)請求，第2次才是實際的POST請求。這和使用$.ajax時是不一樣的，因為$.ajax會將非GET請求的Content-Type設(shè)置為application/x-www-form-urlencoded，而vue-resource發(fā)送POST請求的Content-Type為application/json;charset=UTF-8。
啟用emulateJSON選項，可以讓瀏覽器不發(fā)送OPTIONS預(yù)請求，有兩種啟用方式。
1.全局啟用
Vue.http.options.emulateJSON = true
2.局部啟用
this.$http.post(this.registerUrl, this.registerModel ,{ emulateJSON : true})
.then( (response) => {
this.msg = '注冊成功！'
})啟用了emulateJSON選項后，使得POST請求的Content-Type變?yōu)閍pplication/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()
}
API調(diào)用
調(diào)用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)
}
同樣的，在發(fā)送請求前，需要將access token添加到請求頭。
綜合示例
本文在準(zhǔn)備服務(wù)端環(huán)境的時候，提供了一個CustomersController，除了GET操作，其他操作的訪問都是受保護的，需要用戶登錄以后才能操作。
現(xiàn)在我們來實現(xiàn)這個示例， 該示例結(jié)合了上一篇的CURD示例，以及本文的注冊、登錄、注銷功能。
具體代碼我就不再貼出來了，大家結(jié)合源代碼試一試吧。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
