MSGraphMailbag - Blazor web 程式集和 Microsoft Graph、Azure Functions 的三層架構

本篇文章演示將 ASP.Net Core Blazor Web 程式集作為前端、Microsoft Azure Functions 作為中間業務邏輯層、Microsoft Graph 作為資料層的三層架構，即如何使用 Microsoft Graph 在 Blazor Web 程式集上展示 Microsoft 365 的資料和服務進而進行互動，

概述

本篇文章介紹的完整代碼倉庫地址
https://github.com/fabianwilliams/blazorwithgraphonazurefunct

演示分為3個主要步驟：

1. 前提仍然是需要在應用程式注冊中注冊一個應用用來訪問 Microsoft 365 的資料，
   =>舊文章傳送門<=
2. 在 Visual Studio 中創建一個通過 Microsoft Graph 訪問 Microsoft 365 資料的 Azure Function，
   快速入門：使用 Visual Studio 在 Azure 中創建第一個函式
3. 創建一個 Blazor Web 程式集應用來展示資料，
   Blazor 快速入門

應用程式注冊

演示要實作的功能為從 Microsoft 365 租戶回傳用戶串列和回傳第一個用戶，

要實作它們我們需要呼叫 Microsoft Graph 的獲取用戶串列終結點，

具體創建程序請參考上面的傳送門作為參考，

創建一個 Azure Function

這個部分的主要步驟有：

1. 安裝恰當的 Microsoft Graph SDK，比如.NET SDK，具體要看使用的是什么語言，還可以是Java、JavaScript、PHP、Ruby、PowerShell等，
2. 選擇合適的身份驗證提供程式，
3. 創建 Graph Client，
4. 通過 Graph Client 請求相應的資料，
5. 處理回傳的結果

接下來我們創建 Azure Function，

首先創建一個靜態方法用于回傳 Graph Client

private static GraphServiceClient GetAuthenticatedGrahClient()
{
    //The below comment block is how you should go about securing your configurable keys etc. as it will allow you to 
    // send them to Azure API settings upon publish as well as set them up for KeyValult.
    var clientId = Environment.GetEnvironmentVariable("AzureADAppClientId", EnvironmentVariableTarget.Process);
    var tenantID = Environment.GetEnvironmentVariable("AzureADAppTenantId", EnvironmentVariableTarget.Process);
    var clientSecret = Environment.GetEnvironmentVariable("AzureADAppClientSecret", EnvironmentVariableTarget.Process);

    // Build a client application.
    IConfidentialClientApplication confidentialClientApplication = ConfidentialClientApplicationBuilder
        .Create(clientId)
        .WithTenantId(tenantID)
        .WithClientSecret(clientSecret)
        .Build();
    ClientCredentialProvider authenticationProvider = new ClientCredentialProvider(confidentialClientApplication);
    GraphServiceClient graphClient = new GraphServiceClient(authenticationProvider);

    return graphClient;
}

下面的代碼片段展示獲取用戶的 Azure Function

[FunctionName("GetAllUsers")]
public static async Task<IActionResult> GetAllUsersFromGraph(
    [HttpTrigger(AuthorizationLevel.Function, "get", Route = null)] HttpRequest req,
    ILogger log)
{
    List<FabsterUser> ful = new List<FabsterUser>();

    GraphServiceClient graphClient = GetAuthenticatedGrahClient();
    List<QueryOption> options = new List<QueryOption>
    {
        new QueryOption("$select", "displayName,givenName,mail")
    };

    var graphResult = graphClient.Users.Request(options).GetAsync().Result;

    List<User> usersList = graphResult.CurrentPage.ToList();

    foreach (User u in usersList)
    {
        log.LogInformation("Showing: " + u.GivenName + " - " + u.Mail);
    }

    log.LogInformation("Graph SDK Result for All Users");

    string responseMessage = string.IsNullOrEmpty(graphResult.ToString())
        ? "Call to Microsoft Graph on Fabster Tenanat App executed successfully."
        : $"{graphResult}";

    return new OkObjectResult(usersList);
}

關于如何將 Azure Function 發布到 Azure，參考這里，

發布之后我們就可以測驗它了，可以用瀏覽器或者PostMan，如下圖，

創建 Blazor Web 應用程式

創建好專案后，添加兩個 RazorComponents 頁面 GetTopUser 和 GetAllUsers 并修改 Shared\NavMenu.razor 頁面，向其中添加兩個導航元素

GetAllUsers.razor的代碼如下

@page "/getallusers"
@inject HttpClient Http

<h1>Get All My Users in my Graph via FabsContoso Tenant</h1>

<p>This component demonstrates fetching data using Microsoft Graph via an Azure Function</p>

@if (message == null)
{
    <p><em>Loading all graph users...</em></p>
}
else
{
    <p>@message </p>
}

@functions {
    string message;

    protected override async Task OnInitializedAsync()
    {
        //no Try Catch because we are Cowboys :-)
        //message = await Http.GetStringAsync("http://localhost:7071/api/GetUserFromMSGraphOne");
        message = await Http.GetStringAsync("https://fabsgraphmailbagalpha.azurewebsites.net/api/GetAllUsers?code=REDACTED");
    }
}

執行效果如下圖

本篇完