目錄
介紹
背景
安裝開發環境
先決條件
安裝架構和工具
安裝Azure Active Directory
建立一個新使用者
使用Azure AD進行伺服器端Blazor身份驗證
第一次運作
- 下載下傳ToDo.Blazor.zip - 998.8 KB
介紹
如果您偶然發現了這篇文章，那麼我認為您是Blazor的新手，并希望通過實際示例來解決問題。就像你一樣，我對Blazor也很陌生，這也是我寫這篇系列文章的原因，作為對可能想要跳過Blazor的其他ASP.NET開發人員的參考。
這是ASP.NET Core和Blazor Code Venture系列的第一篇文章。本系列文章的目标是從設定開發工作區，身份驗證，使用CRUD進行資料通路，使用Rest API以及部署之後，從頭開始建構資料驅動的Blazor應用程式。為了覆寫典型安全Web應用程式中的大多數真實場景，我們将建構一個簡單的To-Do Web應用程式，使使用者能夠送出請求，然後通知管理者這些請求，以便他們可以對其進行操作。您可以将此應用視為内部工具，将在您的組織内用于處理使用者遇到的問題。我們将嘗試在應用程式中加入盡可能多的功能，但在本系列中，我們将從身份驗證部分開始。
背景
去年年初，微軟宣布了一個名為Blazor的ASP.NET團隊的新實驗項目。Blazor是一個基于C＃，Razor和HTML的實驗性Web UI架構，它通過WebAssembly在浏覽器中運作，無需JavaScript。是的，你沒聽錯——沒有JavaScript！話雖如此。在2019年4月左右，Blazor正式釋出為預覽版。這意味着Blazor不再具有實驗性，可能會在.NET Core 3.0之後正式釋出。
我個人認為該架構非常有趣。我認為Blazor将會非常受歡迎，因為我認為WebAssembly實際上取代了JavaScript。當然，JavaScript和它的架構仍在那裡，但是當你可以教一個新的程式員C＃，Python等，并讓他們在更高性能的環境中使用更簡單的工具時，為什麼還要教他們javascript呢？
安裝開發環境
讓我們繼續安裝建構Blazor應用程式所需的工具和SDK。如果您已經安裝了下面清單中提到的工具，那麼您可以跳過此步驟，但隻需確定将它們更新為最新版本。
先決條件
- 使用ASP.NET Core Web Development工作負載的Visual Studio 2019預覽版（16.2預覽版2或更高版本）
- .NET Core 3預覽版（dotnet-sdk-3.0.100-preview6-012264-win-x64）
- 最新的Blazor擴充（Microsoft.VisualStudio.BlazorExtension.16.0.19307.2）
安裝架構和工具
安裝.NET Core 3.0 Preview和Blazor位後，将自動安裝以下架構和工具：
- Microsoft Visual Studio Professional 2019預覽版（版本16.2.0預覽版2.0）
- Microsoft .NET Core（版本3.0.0-preview6-27804-01）
- ASP.NET Core Blazor語言服務（版本16.0.19307.2）
- ASP.NET和Web工具2019（版本16.2.159.22830）
- ASP.NET Web架構和工具2019（版本16.2.159.22830）
一旦您成功安裝了上述先決條件，那就讓我們開始冒險吧！
安裝Azure Active Directory
我們需要在這裡安裝的第一個是在Azure中托管的Active Directory，以便我們稍後在我們的應用程式中測試使用者身份驗證。如果您的公司或管理者已經安裝了Azure AD，那麼您可以跳過本節并直接跳到下一步。總之，您需要安裝以啟用Azure AD身份驗證的是以下參數：
- 域名
- 租戶ID
- 客戶ID
現在，如果您想自己探索Azure AD并了解如何在Azure中設定簡單的Active Directory，那麼讓我們繼續。?
通過Azure門戶登入：https://azure.microsoft.com/en-us/
登入後，單擊位于網站右上角的Portal連結，如下圖所示：
圖1：Azure門戶網站
當您在Azure門戶中時，單擊Azure Active Directory連結，如下圖所示：
圖2：Azure門戶網站 - Active Directory頁面
在下一個截圖上，單擊建立目錄連結，如下圖所示：
圖3：Azure門戶網站 - 建立目錄
現在，為您的目錄輸入唯一的組織和域名。在此示例中，我使用了以下值：
圖4：Azure門戶網站 - 建立新目錄
引用：
請記下域名，因為我們将在應用程式中設定身份驗證時使用域名。
如果對提供的值感到滿意，隻需單擊“建立”按鈕為您安裝目錄。通常，安裝大約隻需一分鐘。有時您可能需要等待一段時間，因為可能需要幾分鐘才能完成安裝，具體取決于您的網速。
完成後，應在門戶中顯示通知，如下圖所示：
圖5：Azure門戶網站 - 建立的新目錄
建立一個新使用者
接下來我們将在我們剛剛建立的目錄中建立幾個測試使用者。
現在，單擊“單擊此處管理您的Active Directory”連結或單擊“Azure Active Directory”連結。它應該帶您進入我們剛剛建立的Active Directory域。
單擊User連結，如下圖所示：
圖6：Azure門戶網站 - 建立新使用者
讓我們通過輸入名稱及其電子郵件位址或使用者名來建立一些測試使用者，如下圖所示：
圖7：Azure門戶網站 - 建立新使用者
您可以建立一些或更多使用者，但在本練習中，我将建立兩個使用者：
- 使用者
- 管理者
配置這兩個使用者後，我們将能夠在系列的後半部分使用普通使用者和管理者角色測試應用程式。您可以通過浏覽“所有使用者”連結檢視您建立的所有使用者的清單，如下圖所示：
圖8：Azure門戶網站 - 使用者清單
使用Azure AD進行伺服器端Blazor身份驗證
在本練習中，我們将探讨Azure AD身份驗證。讓我們來看看我們如何使用Blazor做到這一點。
在2019年中期，微軟釋出了ASP.NET Core 3.0 Preview 6，其中炙手可熱的Blazor項目獲得了對處理身份驗證和授權以及其他更新的内置支援。微軟稱：“伺服器端Blazor模闆現在支援使用ASP.NET Core Identity，Azure AD和Azure AD B2C啟用所有标準身份驗證配置的選項。我們還沒有更新Blazor WebAssembly模闆以支援這些選項，但我們計劃在.NET Core 3.0釋出後這樣做。“有關此版本的更多詳細資訊，請參閱：.NET Core 3.0 Preview中的ASP.NET Core和Blazor更新
這對我們.NET開發人員來說隻是意味着現在可以使用您想要的任何配置類型輕松地将身份驗證和授權內建到我們的Blazor應用程式中。是以，不用多說，讓我們在Blazor中嘗試Azure AD身份驗證。
啟動Visual Studio 2019預覽然後建立一個新項目，如下圖所示：
圖9：Visual Studio - 建立新項目
選擇ASP.NET Core Web Application工作負載，如下圖所示，然後單擊Next：
圖10：Visual Studio - 建立新的ASP.NET Core Web App
将項目名稱設定為您想要的任何名稱，然後單擊“建立”。它現在應該會帶您進入以下所示：
圖11：Visual Studio - 配置新項目
從清單中選擇Blazor（伺服器端）模闆，如下圖所示，然後單擊Authentication下的Change連結：
圖12：Visual Studio - 新Blazor（伺服器端）
在下一個螢幕上，選擇工作或學校帳戶，然後提供您從Azure門戶配置的域名：
圖13：Visual Studio - 更改身份驗證
完成身份驗證設定後，單擊“建立”按鈕，讓Visual Studio為您提供必要的檔案。如果成功，您應該能夠看到如下内容：
圖14：Visual Studio - 預設生成的檔案
您将看到添加的“Microsoft.AspNetCore.Authentication.AzureAD.UI”NuGet包作為項目依賴項。此軟體包提供了用于在ASP.NET核心應用程式中輕松內建Azure Active Directory身份驗證的元件。
LoginDisplay.razor頁面也為我們創造并包含以下Blazor标記：
<AuthorizeView>
<Authorized>
Hello, @context.User.Identity.Name!
<a href="AzureAD/Account/SignOut" target="_blank" rel="external nofollow" >Log out</a>
</Authorized>
<NotAuthorized>
<a href="AzureAD/Account/SignIn" target="_blank" rel="external nofollow" >Log in</a>
</NotAuthorized>
</AuthorizeView>
上面的标記使用Blazor AuthorizeView顯示UI的元件，具體取決于使用者是否經過身份驗證并授權檢視頁面。該元件公開了一個類型為AuthenticationState（@context.User.Identity.Name）的上下文變量，您可以使用該變量來通路有關已登入使用者的資訊。
現在在appsettings.json檔案中，您還會發現以下配置生成：
"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"Domain": "theproudmonkey.onmicrosoft.com",
"TenantId": "123XXXXX-12XX-12XX-12XX-123456XXXXXX",
"ClientId": "123XXXXX-12XX-12XX-12XX-123456XXXXXX"
},
上面的JSON配置定義了我們的Azure AD配置。請注意，您必須使用實際值更改TenantId和ClientId的值。此配置将在Startup.cs檔案中的ConfigureServices()方法中調用，該方法在運作時調用：
public void ConfigureServices(IServiceCollection services){
services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
.AddAzureADBearer(options => Configuration.Bind("AzureAd", options));
services.AddControllers();
}
上面的代碼添加了身份驗證服務中間件，使用AzureADDefaults.BearerAuthenticationScheme中間件是Azure AD承載的預設方案。然後它調用AddAzureADBearer()方法并綁定appsettings.json檔案中的“AzureAd”配置。
在背景，Visual Studio會自動在Azure AD App Registration中注冊我們的ASP.NET Core應用程式。您可以通過導航回Azure門戶> Azure Active Directory>應用程式注冊來驗證這一點：
圖15：Azure門戶網站 - 應用程式注冊
第一次運作
要使用Azure Active Directory記錄使用者，應用程式應使用SSL（https）運作。預設情況下，項目配置了SSL，是以我們無需對其進行配置。
現在，為了確定我們的應用程式正在使用Azure AD身份驗證，讓我們對其進行測試。建構應用程式，然後按CTRL + F5鍵運作應用程式。
圖16：運作應用程式 - AD登入
輸入Microsoft AD帳戶，然後單擊“下一步”。它将到下一個截圖，輸入相應的密碼：
圖17：運作應用程式 - AD登入
登入成功後，它會帶您進入Blazor應用程式的預設頁面，如下圖所示：
圖18：運作應用程式 - 成功登入
單擊“登出”連結将生成以下輸出：
圖19：運作應用程式 - 成功登出
就這樣！隻需點選幾下，我們就可以使用Azure AD身份驗證啟動并運作Blazor應用程式。Visual Studio通過在背景連接配接各個部分來完成所有工作，以便在不進行任何編碼的情況下啟用身份驗證。那真好！