練習 - 顯示使用者檔案

10 分鐘

在此練習中，您將延伸應用程式以顯示使用者商務用 OneDrive 根資料夾中的檔案清單。

取得檔案清單

首先向應用程式中新增 Microsoft Graph 呼叫。

在編輯器中開啟 Startup.cs, 並花一些時間探索 ConfigureServices() 中所定義的 Microsoft Identity、Microsoft Graph, 和 ASP.NET Core 中介軟體。
在 ConfigureServices() 方法中尋找下列程式碼。這段程式碼會對名為 GraphProfileClient 及 GraphFilesClient 的自訂物件啟用相依性插入。物件的範圍是 HTTP 要求, 這表示它們會針對伺服器的每個要求建立一次。
```
services.AddScoped<GraphProfileClient>();
services.AddScoped<GraphFilesClient>();
```
開啟 Graph/GraphFilesClient.cs，並花一些時間探索現有的程式碼。注意下列功能:
- 此類別中包括名為 _logger 及 _graphServiceClient 的兩個 readonly 欄位。插入到建構函式中的物件將會指派至這些欄位。
- 此類別中包括 GetFiles()、 DownloadFile()、UploadFile() 和 UploadLargeFile() 方法。
移除建構函式中的現有程式碼。

修改建構函式以插入 ILogger<GraphFilesClient> 及 GraphServiceClient, 並指派參數值至相關聯的欄位:

public GraphFilesClient(
  ILogger<GraphFilesClient> logger,
  GraphServiceClient graphServiceClient)
{
  _logger = logger;
  _graphServiceClient = graphServiceClient;
}

找出 GetFiles() 方法。在 try 區塊中，用下列程式碼取代現有程式碼，以使用 _graphServiceClient 從使用者帳戶擷取檔案。

return await _graphServiceClient.Me.Drive.Root.Children
            .Request()
            .Select(file => new
            {
                file.Id,
                file.Name,
                file.Folder,
                file.Package
            })
            .GetAsync();

尋找 DownloadFile() 方法並用以下程式碼取代 try 區塊中的現有程式碼，以依檔案識別碼擷取檔案。
```
return await _graphServiceClient
    .Me.Drive.Items[fileId].Content
    .Request()
    .GetAsync();
```
在繼續之前, 請先儲存 GraphFilesClient.cs 檔案。
開啟 Pages/Files.cshtml.cs, 花一些時間探索現有的程式碼。注意下列功能:
- 此 FilesModel 類別包含數個欄位及屬性, 例如 _logger、_graphFilesClient、UploadedFile 和 Files。
- GraphFilesClient 會插入建構函式並指派至 _graphFilesClient 欄位。
- 已定義 OnGetAsync()、OnPostAsync() 和 OnGetDownloadFile() 方法。
找出現有的 OnGetAsync() 方法, 並將其取代為下列程式碼：
```
Files = await _graphFilesClient.GetFiles();
```
這段程式碼使用 GraphFilesClient 執行個體擷取使用者檔案並將其指派給 Files 屬性。
尋找 OnGetDownloadFile() 方法並用以下程式碼取代該方法中的現有程式碼：
```
var stream = await _graphFilesClient.DownloadFile(id);
return File(stream, MediaTypeNames.Application.Octet, name);
```
這段程式碼會執行下列工作:
- 它呼叫接受檔案識別碼作為參數的 _graphFilesClient.DownloadFile 方法。
- 傳回檔案資料流後，OnGetDownloadFile() 從 Razor 頁面傳回新 File 物件。此步驟允許在使用者瀏覽器中下載檔案。
在繼續之前, 請先儲存 Files.cshtml.cs 檔。

在應用程式中顯示和下載檔案

下一步是在網頁中顯示使用者的檔案並允許下載。

在編輯器中開啟 Files.cshtml 檔案。
請花一點時間來查看 HTML 及 Razor 程式碼, 並請注意, 它會處理下列任務:
- 確保使用者已經過驗證。
- 檢查 Model.Files 屬性, 以查看是否有任何檔案可以重複查看並顯示在頁面中。
在檔案中尋找 @* Add foreach here *@ 註解並且以下列程式碼取代:
```
@foreach(var file in Model.Files)
{
```
尋找 @* Add foreach closing bracket here *@ 註解並將它取代為上一個步驟中所加入之語句 foreach 的右括弧。
在 foreach 迴圈中新增下列程式碼：
```
if (file.Folder == null && file.Package == null) {
    <li>
        <a asp-page-handler="DownloadFile"
            asp-route-name="@file.Name"
            asp-route-id="@file.Id">@file.Name</a>
    </li>
}
```
這段程式碼會執行下列工作:
- 檢查檔案物件是否非資料夾或套件。
- 使用 Razor 語法來建立超連結。當使用者選取連結時，檔案名稱和檔案識別碼將傳遞給您先前修改的 FilesModel 的 DownloadFile 方法。
在繼續之前, 請先儲存 Files.cshtml 檔。

執行應用程式

在執行應用程式之前，請確保用於登入的帳戶在 OneDrive 中有一些檔案。請務必執行您的應用程式, 然後再試一次！

請根據您的程式碼編輯器執行下列步驟:
- Visual Studio
  
  按 F5 以組建及執行專案。
- Visual Studio Code 或另一個程式碼編輯器
  
  在 [ 開始 ] 資料夾中開啟終端視窗, 並執行下列命令:
```
dotnet run
```
開啟瀏覽器並前往 https://localhost:5001。
使用您稍早註冊 Microsoft Entra Application 時所使用的 Microsoft 365 開發人員租使用者登入。
選取標頭中的 [檔案] 連結, 以查看使用者的 OneDrive 檔案。

注意事項

若您沒有看到任何檔案，請確保使用者在 OneDrive 中有檔案。
在清單中選取檔案以將其下載至您的電腦。
關閉瀏覽器, 然後在終端機視窗中按 CTRL+C 以停止伺服器之後再繼續。

注意事項

如果您已在 Visual Studio 中開啟專案, 可以關閉瀏覽器或選取 Visual Studio 中的 SHIFT+F5，以停止伺服器。關閉 Visual Studio 建立的終端視窗 (如果它仍為開啟)。

您已經成功示範如何使用 Microsoft Graph 和 ASP.NET Core 為登入使用者存取、顯示和下載檔案！

繼續

練習 - 顯示使用者檔案

取得檔案清單

在應用程式中顯示和下載檔案

執行應用程式

意見反應