使用 Azure Active Dirctory 開發 ASP.NET 應用程式

作者 :Rick Anderson

適用于 Azure Active Directory 的 Microsoft ASP.NET 工具可簡化 Azure 上裝載之 Web 應用程式的驗證。 您可以使用 Azure 驗證來驗證來自您組織的Office 365使用者、從內部部署 Active Directory 同步的公司帳戶,或是在您自己的自訂 Azure Active Directory 網域中建立的使用者。 啟用 Windows Azure 驗證可設定您的應用程式,以使用單一 Azure Active Directory 租使用者來驗證使用者。

本教學課程將示範如何建立設定為使用 Azure Active Directory (Azure AD) 登入的 ASP.NET 應用程式。 您也將瞭解如何呼叫 Graph API,以取得目前已登入使用者的相關資訊,以及如何將應用程式部署至 Azure。

必要條件

  1. 適用于 Web 或Visual Studio 2013的 Visual Studio Express2013
  2. Visual Studio 2013 Update 4 - 需要更新 3 或更高版本。
  3. 一個 Azure 帳戶。 如果您還沒有帳戶,請按一下這裡取得免費試用。

將全域管理員新增至 Active Directory

  1. 登入 Azure 管理入口網站

  2. 所有 Azure 帳戶都包含 [預設目錄 ] -- 按一下該目錄,然後按一下頁面頂端的 [ 使用者 ] 索引標籤, (請參閱下圖) 。

  3. 按一下 [新增使用者]。 Azure 管理入口網站的螢幕擷取畫面,其中左側已概述並選取 [預設目錄]、右側概述的 [使用者],以及 [新增使用者] 在頁尾中概述。

  4. 建立具有 全域管理員 角色的新使用者。 按一下頂端功能表中的 [ 使用者 ],然後按一下命令列上的 [ 新增使用者 ] 按鈕。

  5. 在 [ 新增使用者] 對話方塊中,輸入新使用者的名稱,然後按一下向右鍵。

    [新增使用者] 對話方塊的螢幕擷取畫面,其中包含指示「告訴我們此使用者」。[使用者類型] 和 [使用者名稱] 欄位隨即顯示。

  6. 輸入使用者名稱,並將角色設定為 全域管理員。 全域管理員需要替代電子郵件地址才能進行密碼復原。 完成後,按一下向右鍵。

    [新增使用者] 對話方塊中使用者設定檔的螢幕擷取畫面,其中已選取 ROLE 的全域管理員。[替代電子郵件地址] 欄位會反白顯示。

  7. 在對話方塊的下一個頁面上,按一下 [ 建立]。 系統會為新使用者建立暫時密碼,並在對話方塊中顯示。

    [新增使用者] 對話方塊中使用者設定檔的螢幕擷取畫面,其中顯示 [取得暫時密碼指示] 和 [建立] 按鈕,如下所示。

    儲存密碼時,您必須在第一次登入之後變更密碼。 下圖顯示新的系統管理員帳戶。 您必須使用 Azure Active Directory 來登入您的應用程式,而不是此頁面上也顯示 Microsoft 帳戶。

    新系統管理員帳戶的螢幕擷取畫面,其中顯示 [顯示名稱]、[使用者名稱] 和 [SOURCED FROM] 資料行出現在資料表中。

建立 ASP.NET 應用程式

下列步驟會針對Web 使用 Visual Studio Express 2013,而且需要Visual Studio 2013 Update 3

  1. 在 Visual Studio 中,按一下 [ 檔案 ],然後按一下 [ 新增專案]。 在 [ 新增專案] 對話方塊中,從左側功能表中選取 Visual C# Web 專案,然後按一下 [ 確定]。 如果您不想要應用程式的功能,您也可以取消核取 [將 Application Insights 新增至專案 ]。

  2. 在 [ 新增 ASP.NET 專案 ] 對話方塊中,選取 [MVC],然後按一下 [ 變更驗證]。

    [新增 S P 點 NET 專案] 對話方塊的螢幕擷取畫面,其中已選取 M V C 範本、已選取 [變更驗證] 按鈕和 [雲端中的主機]。

  3. 在 [ 變更驗證] 對話方塊中,選取 [組織帳戶]。 這些選項可用來自動向 Azure AD 註冊您的應用程式,以及自動設定應用程式以與 Azure AD 整合。 您不需要使用 [ 變更驗證 ] 對話方塊來註冊和設定應用程式,但可讓您更輕鬆地進行。 例如,如果您使用 Visual Studio 2012,您仍然可以在 Azure 管理入口網站中手動註冊應用程式,並更新其設定以與 Azure AD 整合。 在下拉式功能表中,選取 [雲端 - 單一組織和單一登入]、[讀取目錄資料]。 輸入 Azure AD 目錄的網域,例如下列影像中的 () aricka0yahoo.onmicrosoft.com,然後按一下 [ 確定]。 您可以從 Azure 入口網站上 [預設目錄] 的 [網域] 索引標籤取得功能變數名稱, () 下一個影像。

    [變更驗證] 對話方塊的螢幕擷取畫面;組織帳戶、雲端虛線單一組織,以及單一登入,以及概述的讀取目錄資料。

    下圖顯示來自 Azure 入口網站的功能變數名稱。

    Azure 入口網站的螢幕擷取畫面,其中已選取左側的 [預設目錄],右側功能表中醒目提示的 [網域],以及下方顯示的目錄功能變數名稱。

    注意

    您可以選擇性地設定要在 Azure AD 中註冊的應用程式識別碼 URI,方法是按一下 [更多選項]。 應用程式識別碼 URI 是應用程式的唯一識別碼,在 Azure AD 中註冊,並由應用程式用來在與 Azure AD 通訊時識別本身。 如需應用程式識別碼 URI 和其他已註冊應用程式屬性的詳細資訊,請參閱 本主題。 按一下 [應用程式識別碼 URI] 欄位下方的核取方塊,您也可以選擇覆寫 Azure AD 中使用相同應用程式識別碼 URI 的現有註冊。

  4. 按一下 [確定] 之後,會出現登入對話方塊,而且您必須使用全域管理員帳戶登入, (與訂用帳戶相關聯的 Microsoft 帳戶) 。 如果您稍早建立新的系統管理員帳戶,您必須變更密碼,然後使用新的密碼再次登入。

    [登入 Azure Active Directory] 對話方塊的螢幕擷取畫面,其中顯示全域管理員帳戶名稱和密碼的欄位。

  5. 成功驗證之後,[ 新增 ASP.NET 專案 ] 對話方塊會顯示您的驗證選擇 ([組織 ) ],以及新應用程式將在下圖中註冊 (aricka0yahoo.onmicrosoft.com 的目錄) 。 在此資訊下方,選取標示 為雲端中的 [主機] 核取方塊。 如果選取此核取方塊,專案將會布建為 Azure Web 應用程式,並啟用以供稍後輕鬆發佈。 按一下 [確定]。

    [新增 S P 點 NET 專案] 對話方塊的螢幕擷取畫面,其中顯示 M V C 範本、驗證選擇和目錄。雲端中的主機已概述。

  6. [ 設定 Azure 網站] 對話方塊隨即出現,使用自動產生的網站名稱和區域。 另請注意您目前在對話方塊中登入的帳戶。 您想要確定此帳戶是 Azure 訂用帳戶所連結的帳戶,通常是 Microsoft 帳戶。

    注意

    此專案需要資料庫。 您必須選取其中一個現有的資料庫,或建立新的資料庫。 資料庫是必要的,因為專案已經使用本機資料庫檔案來儲存少量的驗證組態資料。 當您將應用程式部署至 Azure 網站時,此資料庫不會封裝在部署中,因此您必須選擇可在雲端存取的資料庫。 按一下 [確定]。

    [設定 Azure 網站] 對話方塊的螢幕擷取畫面,其中顯示自動產生的網站名稱、區域、資料庫伺服器、資料庫使用者名稱和資料庫密碼。

  7. 將會建立專案,而且您的驗證選項和 Web 應用程式選項會自動設定專案。 完成此程式之後,按 ^F5在本機執行專案。 您必須使用組織帳戶登入。 提供您稍早建立之帳戶的使用者名稱和密碼,然後按一下 [ 登入]。

    [登入] 對話方塊的螢幕擷取畫面,其中顯示組織帳戶使用者名稱和密碼的欄位。

  8. 成功登入之後,ASP.NET 網站會顯示您已透過在頁面右上角顯示使用者名稱來進行驗證。

    S P 點 NET 網站的螢幕擷取畫面,其中您在網址列中醒目提示,並在右上方醒目提示使用者名稱。

    如果您收到錯誤:值不可為 Null 或空白。 參數名稱:linkText 伺服器錯誤的螢幕擷取畫面。錯誤訊息已反白顯示,讀取、值不可為 Null 或空白。參數名稱冒號連結文字。

    請參閱教學課程結尾的 錯一節。

圖形 API 的基本概念

圖形 API 是程式設計介面,可用來在 Azure AD 目錄中的物件上執行 CRUD 和其他作業。 如果您在 Visual Studio 2013 中建立新專案時選取 [組織帳戶] 選項進行驗證,則您的應用程式已設定為呼叫圖形 API。 本節簡短說明圖形 API 的運作方式。

  1. 在執行中的應用程式中,按一下頁面右上方登入使用者的名稱。 這會帶您前往 [使用者設定檔] 頁面,這是主控制器上的動作。 您會注意到資料表包含您稍早建立之系統管理員帳戶的使用者資訊。 此資訊會儲存在您的目錄中,而且會在頁面載入時呼叫圖形 API 來擷取此資訊。

    [使用者設定檔] 頁面的螢幕擷取畫面,其中包含系統管理員帳戶的 [顯示名稱]、[名字] 和 [姓氏]。

  2. Go back至 Visual Studio 並展開Controllers資料夾,然後開啟HomeController.cs檔案。 您會看到 UserProfile () 動作,其中包含用來擷取權杖的程式碼,然後呼叫圖形 API。 下列程式碼重複:

    [Authorize]
    public async Task UserProfile()
    {
        string tenantId = ClaimsPrincipal.Current.FindFirst(TenantIdClaimType).Value;
    
        // Get a token for calling the Azure Active Directory Graph
        AuthenticationContext authContext = new AuthenticationContext(String.Format(CultureInfo.InvariantCulture, LoginUrl, tenantId));
        ClientCredential credential = new ClientCredential(AppPrincipalId, AppKey);
        AuthenticationResult assertionCredential = authContext.AcquireToken(GraphUrl, credential);
        string authHeader = assertionCredential.CreateAuthorizationHeader();
        string requestUrl = String.Format(
            CultureInfo.InvariantCulture,
            GraphUserUrl,
            HttpUtility.UrlEncode(tenantId),
            HttpUtility.UrlEncode(User.Identity.Name));
    
        HttpClient client = new HttpClient();
        HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
        request.Headers.TryAddWithoutValidation("Authorization", authHeader);
        HttpResponseMessage response = await client.SendAsync(request);
        string responseString = await response.Content.ReadAsStringAsync();
        UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);
    
        return View(profile);
    }
    

    若要呼叫圖形 API,您必須先擷取權杖。 擷取權杖時,必須在授權標頭中附加其字串值,以取得圖形 API 的所有後續要求。 上述大部分程式碼會處理向 Azure AD 驗證以取得權杖的詳細資料,並使用權杖來呼叫圖形 API,然後轉換回應,使其可在檢視中呈現。

    討論的最相關部分是下列醒目提示行: UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString); 。 這一行代表使用者的名稱,該名稱已從 JSON 回應還原序列化,而且會顯示在檢視中。

    您可以使用 HttpClient 呼叫圖形 API,並自行處理原始資料,但更簡單的方式是使用 可透過 NuGet 取得的 Graph 用戶端程式庫。 用戶端程式庫會為您處理原始 HTTP 要求和傳回資料的轉換,並讓您更輕鬆地在 .NET 環境中使用圖形 API。 請參閱GitHub上的相關圖形 API 程式碼範例。

將應用程式部署至 Azure

下列步驟將示範如何將應用程式部署至 Azure。 在先前的步驟中,您已將新專案與 Azure 上的 Web 應用程式連線,因此只要幾個步驟即可發佈。

  1. 在 Visual Studio 中,以滑鼠右鍵按一下專案,然後選取 [ 發佈]。 [ 發佈 Web ] 對話方塊隨即出現,並已設定每個設定。 按一下 [ 下一步] 按鈕以移至 [ 設定 ] 頁面。 系統可能會提示您進行驗證;請確定您使用 Azure 訂用帳戶進行驗證 (通常是 Microsoft 帳戶) ,而不是您稍早建立的組織帳戶。

    [發佈 Web] 對話方塊的螢幕擷取畫面,其中已醒目提示 [連線],且已正確設定每個設定。

  2. 核取 [ 啟用組織驗證] 選項。 在 [ 網域 ] 欄位中,輸入目錄的網域。 從 [存取層級] 下拉式清單中,選取[單一登入讀取目錄資料]。 您會發現先前使用的資料庫已在 [ 資料庫 ] 區段中填入。 按一下 [發佈]。

    [發佈 Web] 對話方塊的螢幕擷取畫面。檔案發佈選項概述,包括 [啟用組織驗證]、[網域] 欄位和 [存取層級]。

  3. Visual Studio 將會開始部署您的網站,然後會出現新的瀏覽器視窗。 系統可能會提示您再次向目錄進行驗證。 經過驗證之後,系統會將您重新導向至 Azure 上新發佈的網站。

    S P dot NET 網站的螢幕擷取畫面,其中您位於網址列中顯示的 Azure 上新發佈的網站。

偵錯應用程式

如果您收到下列錯誤:值不能是 Null 或空白。 參數名稱:linkText

可能產生的錯誤螢幕擷取畫面。錯誤訊息已反白顯示,讀取、值不可為 Null 或空白。參數名稱冒號連結文字。

以下列專案取代 Views\Shared\_LoginPartial.cshtml 檔案中的程式碼:

@{
   var user = "Null User";
   if (!String.IsNullOrEmpty(User.Identity.Name))
   {
      user = User.Identity.Name;
   }

}

@if (Request.IsAuthenticated)
{
    <text>
         <ul class="nav navbar-nav navbar-right">
            <li>
                @*@Html.ActionLink(User.Identity.Name, "UserProfile", "Home", routeValues: null, htmlAttributes: null)*@
               @Html.ActionLink(user, "UserProfile", "Home", routeValues: null, htmlAttributes: null)
            </li>
            <li>
                @Html.ActionLink("Sign out", "SignOut", "Account")
            </li>
        </ul>
    </text>
}
else
{
     <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Sign in", "Index", "Home", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

執行應用程式之後,如果登入的使用者顯示「Null 使用者」、登出,並使用您稍早建立的 Active Directory 帳戶重新登入。

遵循的絕佳教學課程是 Rick Rainey 的 深入探討:使用 Azure AD 進行 Azure 網站和組織驗證

相關資訊