.NET Magazine國際中文電子雜誌
作者：許薰尹
審稿：張智凱
文章編號：N160216801
出刊日期：2016/2/10
開發工具：Visual Studio 2015 Enterprise
資料庫：SQL Server Express 2014
版本：.NET Framework 4.6、MVC5

ASP.NET MVC5網站支援多種驗證機制，在Visual Studio 2015建立MVC 5範本專案時，可以選擇以下的驗證方式：

· No Authentication ：不驗證。
· Individual User Accounts：將個人帳號與密碼相關資訊寫到資料庫之中。
· Organizational Accounts：使用Azure AD或Office 365驗證。
· Windows Authentication：使用Windows帳號驗證。

本篇文章介紹如何使用Azure AD帳戶登入MVC 5網站的設計步驟。

建立目錄服務

首先你需要有Microsoft Azure的帳號，可以先從以下網址伸請免費試用一個月：

https://azure.microsoft.com/zh-tw/pricing/free-trial/

接下來我們需要在Microsoft Azures建立目錄服務，瀏覽到此網址https://azure.microsoft.com/zh-tw/，使用Microsoft Azures帳號登入。從下方選取「新增」-「應用程式服務」-「Active Directory」-「目錄」，建立Microsoft Azure AD目錄，請參考如下圖所示：

圖 1：建立Microsoft Azure AD目錄。

選取「自訂建立」，請參考如下圖所示：

圖 2：選取「自訂建立」Microsoft Azure AD目錄。

接著便會看到一個「加入目錄」的對話方塊，輸入適當的資訊。在此選取「建立新目錄」，為其設定一個名稱，以及網域名稱，網域名稱不能重複，然後按下右下方的確定按鈕，請參考如下圖所示：

圖 3：「加入目錄」。

稍待一會兒之後，目錄便建立完成，從Microsoft Azure網站Active Directory頁可以看到目前它處於作用中的狀態，請參考如下圖所示：

圖 4：目錄處於作用中的狀態。

建立目錄服務使用者

接下我們需為目錄服務先建立好管理者以及使用者帳號，以便後續進行測試的工作。從Microsoft Azures網站左方的管理畫面中選「Active Directory」，選取前一個步驟建立的「mvcdemodirectory」，點選右方管理頁面中的「使用者」，請參考如下圖所示：

圖 5：建立目錄服務使用者。

再點選下方的「加入使用者」，請參考如下圖所示：

圖 6：加入使用者。

設定一個全域系統管理者名稱，然後按一下右下方的箭頭，請參考如下圖所示：

圖 7：設定一個全域系統管理者名稱。

設定使用者設定檔案，設定使用者的角色為「全域管理員」，並給一個替代電子郵件地址，然後按一下右下方的箭頭，請參考如下圖所示：

圖 8：設定使用者的角色為「全域管理員」。

下一步會看到「取得暫時密碼」的畫面，按下「建立」按鈕，系統會先為你建立的帳號設定一個暫時性的密碼，在使用者第一次登入時，需輸入此暫時性密碼，當下便會要求變更密碼，請參考如下圖所示：

圖 9：「取得暫時密碼」。

接著便會看到暫時性的密碼顯示在畫面上，你可以點選密碼旁的複製按鈕將密碼複製到剪貼簿，然後按一下右下方確定的按鈕，請參考如下圖所示：

圖 10：複製密碼到剪貼簿。

建立使用者帳號

接著重複上面的步驟，建立使用者帳號，以下步驟建立一個名為Mary的使用者，然後按一下右下方的箭頭，請參考如下圖所示：

圖 11：建立使用者帳號。

設定使用者設定檔案，設定使用者的角色為「使用者」，並給一個替代電子郵件地址，然後按一下右下方的箭頭，請參考如下圖所示：

圖 12：設定使用者設定檔案。

下一步會看到「取得暫時密碼」的畫面，按下「建立」按鈕，系統會先為你建立的帳號設定一個暫時性的密碼，請參考如下圖所示：

圖 13：「取得暫時密碼」。

點選密碼旁的複製按鈕將密碼複製到剪貼簿，然後按一下右下方確定的按鈕，請參考如下圖所示：

圖 14：複製密碼到剪貼簿。

目前目錄中的帳號資料參考如下所示：

圖 15：目錄服務使用者清單。

建立MVC 5專案

目錄服務以及帳號建置完成之後，我們便可以利用Visual Studio 2015來建立MVC 5的網站，從「File」-「New」-「Project」，在「New Project」對話盒中，確認視窗上方.NET Framework的目標版本為「.NET Framework 4.6」，選取左方「Installed」-「Templates」-「Visual C#」程式語言，從「Web」分類中，選取「ASP.NET Web Application」，適當設定專案名稱與專案存放路徑，按下「OK」鍵，請參考如下圖所示：

圖 16：建立MVC 5專案。

在「New ASP.NET Project」對話盒中選取「MVC」，勾選下方的「MVC」項目，然後按一下畫面中的「Change Authentication」按鈕，請參考如下圖所示：

圖 17：勾選下方的「MVC」項目。

選取「Work And School Accounts」，設定右方的清單方塊，選取「Cloud – Single Organization」項目，設定文章一開始在Microsoft Azures建立的網域名稱，請參考如下圖所示：

圖 18：選取「Cloud – Single Organization」。

此時會要求登入目錄服務，我們可以使用管理者的身份登入，請參考如下圖所示：

圖 19：登入目錄服務。

第一次登入時，會要求輸入密碼，以及要求變更密碼，請參考如下圖所示：

圖 20：變更密碼。

設定完成會回到專案建立的畫面，在對話盒中選取「MVC」，右下方會顯示目錄服務的資訊，然後按下「OK」按鈕建立專案，請參考如下圖所示：

圖 21：建立專案。

使用使用者帳號登入

MVC 5範本網站基本上包含了完整的驗證實作部分，也包含Home、About、Contact、Login、Register..等等幾網頁，因此只要執行網站就可以直接進行網站安全性的驗證測試。

從「Solution Explorer」視窗- 選取Views\Home資料夾下的Index.cshtml檔案，按CTRL+F5執行Index 檢視。因為HomeController類別的上方套用Authorize Attribute：

[Authorize]
public class HomeController : Controller

因此當想檢視首頁時，會被導向更入畫面，執行結果請參考如下圖所示，我們此時可以使用一般身份的使用者登入網站：

圖 22：登入目錄服務。

第一次登入時，會要求輸入密碼，以及要求變更與密碼，請參考如下圖所示：

圖 23：變更密碼。

按下「Accept」，請參考如下圖所示：

圖 24：登入目錄服務。

輸入密碼以登入，請參考如下圖所示：

圖 25：輸入密碼。

登入成功，首頁上將會看到歡迎使用者的訊息，請參考如下圖所示：

圖 26：登入成功，顯示首頁。

檢視專案產生的程式碼

最後讓我們檢視專案產生的程式碼，網站Web.Config檔案中的<appSettings>區段記錄了驗證相關資訊：

在Startup.Auth.cs檔案Startup類別中，利用ConfigurationManager類別讀取這些資訊，並設定OWIN驗證的資訊：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Globalization;
using System.Linq;
using System.Web;
using Owin;
using Microsoft.Owin.Security;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.OpenIdConnect;

namespace MyADDemo {
public partial class Startup {
    private static string clientId = ConfigurationManager.AppSettings [ "ida:ClientId" ];
    private static string aadInstance = ConfigurationManager.AppSettings [ "ida:AADInstance" ];
    private static string tenantId = ConfigurationManager.AppSettings [ "ida:TenantId" ];
    private static string postLogoutRedirectUri = ConfigurationManager.AppSettings [ "ida:PostLogoutRedirectUri" ];
    private static string authority = aadInstance + tenantId;

public void ConfigureAuth( IAppBuilder app ) {
app.SetDefaultSignInAsAuthenticationType( CookieAuthenticationDefaults.AuthenticationType );

app.UseCookieAuthentication( new CookieAuthenticationOptions( ) );

      app.UseOpenIdConnectAuthentication(
          new OpenIdConnectAuthenticationOptions {
            ClientId = clientId ,
            Authority = authority ,
            PostLogoutRedirectUri = postLogoutRedirectUri
          } );
    }
}
}

以下則是AccountController.cs登入、登出的程式碼。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.OpenIdConnect;
using Microsoft.Owin.Security;

namespace MyADDemo.Controllers {
public class AccountController : Controller {
    public void SignIn( ) {
      // Send an OpenID Connect sign-in request.
      if ( !Request.IsAuthenticated ) {
        HttpContext.GetOwinContext( ).Authentication.Challenge( new AuthenticationProperties { RedirectUri = "/" } ,
            OpenIdConnectAuthenticationDefaults.AuthenticationType );
      }
    }

public void SignOut( ) {
string callbackUrl = Url.Action( "SignOutCallback" , "Account" , routeValues: null , protocol: Request.Url.Scheme );

      HttpContext.GetOwinContext( ).Authentication.SignOut(
          new AuthenticationProperties { RedirectUri = callbackUrl } ,
          OpenIdConnectAuthenticationDefaults.AuthenticationType , CookieAuthenticationDefaults.AuthenticationType );
    }

    public ActionResult SignOutCallback( ) {
      if ( Request.IsAuthenticated ) {
        // Redirect to home page if the user is authenticated.
        return RedirectToAction( "Index" , "Home" );
      }

return View( );
}
}
}