使用Azure AD帳戶登入MVC 5網站

by vivid 10. 二月 2016 02:19

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

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目錄,請參考如下圖所示:

clip_image002

圖 1:建立Microsoft Azure AD目錄。

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

clip_image004

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

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

clip_image006

圖 3:「加入目錄」。

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

clip_image008

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

建立目錄服務使用者

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

clip_image010

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

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

clip_image012

圖 6:加入使用者。

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

clip_image014

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

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

clip_image016

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

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

clip_image018

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

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

clip_image020

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

建立使用者帳號

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

clip_image022

圖 11:建立使用者帳號。

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

clip_image024

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

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

clip_image026

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

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

clip_image028

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

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

clip_image030

圖 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」鍵,請參考如下圖所示:

clip_image032

圖 16:建立MVC 5專案。

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

clip_image034

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

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

clip_image036

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

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

clip_image038

圖 19:登入目錄服務。

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

clip_image040

圖 20:變更密碼。

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

clip_image042

圖 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

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

clip_image044

圖 22:登入目錄服務。

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

clip_image046

圖 23:變更密碼。

按下「Accept」,請參考如下圖所示:

clip_image048

圖 24:登入目錄服務。

輸入密碼以登入,請參考如下圖所示:

clip_image050

圖 25:輸入密碼。

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

clip_image052

圖 26:登入成功,顯示首頁。

檢視專案產生的程式碼

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

<appSettings>
  <add key="webpages:Version" value="3.0.0.0" />
  <add key="webpages:Enabled" value="false" />
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  <add key="ida:ClientId" value="6e85491f-e499-4c79-9b09-6cce3df51a16" />
  <add key="ida:AADInstance" value="https://login.microsoftonline.com/" />
  <add key="ida:Domain" value="mvcdemodirectory.onmicrosoft.com" />
  <add key="ida:TenantId" value="3fe65420-9351-4aba-819f-52f1df7901b6" />
  <add key="ida:PostLogoutRedirectUri" value="https://localhost:44300/" />
</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( );
    }
  }
}

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET MVC | C# | WindowsAzure | 許薰尹Vivid Hsu

評論 (49) -

cours de theatre
cours de theatre United States
2017/9/30 下午 04:14:26 #

I cannot thank you enough for the blog.Really looking forward to read more. Great.

回覆

can ho vung tau
can ho vung tau United States
2017/10/7 上午 01:53:50 #

Thanks so much for the article.Much thanks again. Much obliged.

回覆

Osimi sea view
Osimi sea view United States
2017/10/9 下午 07:42:11 #

Hey, thanks for the article.Really looking forward to read more. Keep writing.

回覆

Buy illegal backlinks
Buy illegal backlinks United States
2017/10/12 下午 10:20:31 #

Enjoyed every bit of your article.Really thank you! Cool.

回覆

look at this website
look at this website United States
2017/10/14 下午 05:36:28 #

Looking forward to reading more. Great article post.Much thanks again. Awesome.

回覆

dragon city hack latest version
dragon city hack latest version United States
2017/10/15 下午 05:07:27 #

I appreciate you sharing this blog.Really thank you! Awesome.

回覆

go to the website
go to the website United States
2017/10/17 下午 04:25:45 #

Great, thanks for sharing this post.Thanks Again.

回覆

sletrokor review
sletrokor review United States
2017/10/17 下午 09:57:22 #

I really liked your article post.Really looking forward to read more. Fantastic.

回覆

VigRx Plus Review
VigRx Plus Review United States
2017/10/19 上午 09:00:50 #

Thank you for your article.Much thanks again. Awesome.

回覆

carte grise en ligne
carte grise en ligne United States
2017/10/21 上午 09:05:37 #

Thanks-a-mundo for the blog post.Thanks Again. Want more.

回覆

phenocal review
phenocal review United States
2017/11/1 下午 09:46:26 #

Thanks-a-mundo for the blog article.

回覆

phentaslim
phentaslim United States
2017/11/3 上午 07:42:47 #

Thanks a lot for the blog post.Really looking forward to read more. Really Cool.

回覆

sciatica home remedies
sciatica home remedies United States
2017/11/15 上午 09:20:05 #

Thanks again for the blog article. Cool.

回覆

avocat criminel
avocat criminel United States
2017/11/16 下午 07:53:45 #

Really enjoyed this blog. Awesome.

回覆

swimwear
swimwear United States
2017/11/23 下午 11:25:36 #

Say, you got a nice article post.Much thanks again. Cool.

回覆

Auckland Seo Company
Auckland Seo Company United States
2017/11/25 下午 08:20:33 #

I appreciate you sharing this blog. Fantastic.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 07:30:28 #

This is one awesome article.Really thank you! Cool.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/27 上午 01:39:42 #

I value the article.Thanks Again. Much obliged.

回覆

cash for cars
cash for cars United States
2017/11/29 下午 06:02:24 #

Enjoyed every bit of your article.Really looking forward to read more. Great.

回覆

New City thu thiem
New City thu thiem United States
2017/11/30 上午 12:40:30 #

Thanks again for the article.Really thank you! Fantastic.

回覆

aged corporations
aged corporations United States
2017/12/1 上午 02:26:57 #

Im grateful for the blog post.Really thank you! Will read on...

回覆

porno
porno United States
2017/12/1 下午 06:09:34 #

wow, awesome article.Much thanks again. Much obliged.

回覆

Build Business Credit
Build Business Credit United States
2017/12/3 上午 06:23:02 #

Appreciate you sharing, great blog post.Really thank you! Really Cool.

回覆

mobil porn
mobil porn United States
2017/12/5 上午 11:12:02 #

This is one awesome post.Much thanks again. Really Great.

回覆

Im thankful for the blog post. Really Cool.

回覆

michel lawyer
michel lawyer United States
2017/12/10 下午 08:46:18 #

I value the article.Really thank you! Will read on...

回覆

Georgeanna Barben
Georgeanna Barben United States
2017/12/14 上午 10:53:07 #

Im grateful for the post.Much thanks again.

回覆

important site
important site United States
2017/12/14 下午 05:46:42 #

Great, thanks for sharing this article post.Really thank you! Really Cool.

回覆

Christmas
Christmas United States
2017/12/15 上午 12:20:46 #

Im obliged for the post.Really thank you! Much obliged.

回覆

canon driver software
canon driver software United States
2017/12/16 下午 07:26:40 #

Major thanks for the article.Much thanks again.

回覆

Im grateful for the article post.Thanks Again. Great.

回覆

Muchos Gracias for your blog post.Really looking forward to read more. Great.

回覆

Strategic
Strategic United States
2017/12/17 下午 07:03:59 #

Im obliged for the post.Thanks Again.

回覆

why not find out more
why not find out more United States
2017/12/18 上午 02:11:48 #

wow, awesome blog article.Thanks Again. Will read on...

回覆

earn money from home
earn money from home United States
2017/12/20 下午 08:23:25 #

I value the blog.Thanks Again.

回覆

driver canon
driver canon United States
2017/12/23 上午 05:23:09 #

Very neat blog post. Fantastic.

回覆

Darwin Horan
Darwin Horan United States
2017/12/23 下午 03:51:26 #

Im obliged for the article. Cool.

回覆

hp driver
hp driver United States
2017/12/25 下午 05:25:16 #

Thanks so much for the blog post. Great.

回覆

&#216;&#177;&#218;&#175; &#216;&#174;&#217;ˆ&#216;&#167;&#216;&#168;
رگ خواب United States
2017/12/26 上午 12:10:32 #

Im thankful for the blog post.Really looking forward to read more. Great.

回覆

Awesome blog post.Really looking forward to read more. Great.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 02:46:49 #

Im grateful for the blog article.Really looking forward to read more. Awesome.

回覆

canon drivers
canon drivers United States
2017/12/27 下午 03:21:26 #

Great, thanks for sharing this post.Much thanks again. Much obliged.

回覆

hp drivers
hp drivers United States
2018/1/2 上午 06:06:37 #

Very informative article post.Thanks Again. Keep writing.

回覆

Visit Website
Visit Website United States
2018/1/2 下午 02:03:59 #

Im thankful for the article post.Really looking forward to read more. Cool.

回覆

real money online pokies
real money online pokies United States
2018/1/4 下午 03:55:20 #

I appreciate you sharing this blog article.Really thank you! Will read on...

回覆

hp driver
hp driver United States
2018/1/5 下午 05:15:07 #

Hey, thanks for the blog post. Awesome.

回覆

FBA
FBA United States
2018/1/6 上午 09:20:35 #

Hey, thanks for the blog.Really looking forward to read more. Great.

回覆

web hosting
web hosting United States
2018/1/10 上午 06:45:59 #

Muchos Gracias for your post.Thanks Again. Great.

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List