購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(3)--Idetity,OWIN前後端驗證

chsakell分享了前端使用AngularJS,後端使用ASP.NET Web API的購物車案例，非常精彩，這裡這裡記錄下對此項目的了解。

文章：

http://chsakell.com/2015/01/31/angularjs-feat-web-api/

http://chsakell.com/2015/03/07/angularjs-feat-web-api-enable-session-state/

源碼：

https://github.com/chsakell/webapiangularjssecurity

本系列共三篇，本篇是第三篇。

<a href="http://www.cnblogs.com/darrenji/p/4959623.html" target="_blank">購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(1)--後端</a>

<a href="http://www.cnblogs.com/darrenji/p/4959694.html" target="_blank">購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(2)--前端，以及前後端Session</a>

<a href="http://www.cnblogs.com/darrenji/p/4959721.html" target="_blank">購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(3)--Idetity,OWIN前後端驗證</a>

這裡會涉及到三方面的内容：

1、ASP.NET Identity &amp; Entity Framework

● Identity User

● User Mnager

2、OWIN Middleware

● Authorization Server

● Bearer Auhentication

3、AngularJS

● Generate Tokens

● Creae authorized requests

首先安裝Microsoft ASP.NET Identity EntityFramework。

添加一個有關使用者的領域模型，繼承IdentityUser。

配置使用者，繼承EntityTypeConfiguration&lt;T&gt;

然後讓上下文繼承Identity特有的上下文類。

繼承Identity的UserManager類：

在NuGet中輸入owin，確定已經安裝如下元件：

Microsoft.Owin.Host.SystemWeb

Microsoft.Owin

Microsoft ASP.NET Web API 2.2 OWIN

Microsoft.Owin.Security

Microsoft.Owin.Security.OAth

Microsoft.Owin.Security.Cookies (optional)

Microsoft ASP.NET Identity Owin

OWIN

在項目根下建立Startup.cs部分類。

在App_Start中建立Startup.cs部分類。

在Identity使用者管理類中添加如下代碼：

當在API中需要擷取使用者的時候，就會調用以上的代碼，比如：

為了能夠使用OWIN的功能，還需要實作一個OAuthAuthorizationServerProvider。

OWIN這個中間件的工作原理大緻是：

→對Token的請求過來

→OWIN調用以上的GrantResourceOwnerCredentials方法

→OAuthAuthorizationServerProvider擷取UerManager的執行個體

→OAuthAuthorizationServerProvider建立access token

→OAuthAuthorizationServerProvider建立access token給響應

→Identity的UserManager檢查使用者的credentials是否有效

→Identity的UserManager建立ClaimsIdentity

接着，在WebApiConfig中配置，讓API隻接受bearer token authentication。

在需要驗證的控制器上加上Authorize特性。

AccountController用來處理使用者的相關事宜。

在前端，把token相關的常量放到主module中去。

送出訂單的時候需要把token寫到headers的Authorization屬性中去。

在主module中增加登出和注冊使用者的功能。

當然還需要添加對應的路由：

再往主module中添加一個controller，用來處理使用者賬戶相關事宜。

有關登入頁：

有關注冊頁：

在購物車摘要區域添加一個登出按鈕。

最後可以把賬戶相關封裝在一個服務中。

把有關訂單相關，封裝在storeService.js中：

本系列結束