練習 - 顯示使用者檔案

3 分鐘

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

取得檔案清單

從新增 Microsoft Graph 呼叫至應用程式開始。

在程式碼編輯器中，開啟 graph.js 檔案。

在檔案結尾處，新增一個名為 getFiles() 的新非同步處理函數以擷取檔案的清單。使用 select 函數以擷取每個檔案的 id、name、folder 和 package 屬性。

// Get files in root of user's OneDrive
async function getFiles() {
  ensureScope('files.read');
  try {
    const response = await graphClient
        .api('/me/drive/root/children')
        .select('id,name,folder,package')
        .get();
    return response.value;
  } catch (error) {
    console.error(error);
  }
}

新增 HTML 預留位置以顯示檔案

接下來，新增會顯示檔案清單的 HTML。

在程式碼編輯器中，開啟 index.html 檔案。

使用水平尺規、標籤和未排序清單擴充 content 區塊，如下所示：

<div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <!-- Add for file download -->
  <hr />
  <label>Files in your OneDrive root folder:</label>
  <ul id="downloadLinks"></ul>
</div>

顯示應用程式中的檔案

最後一個步驟是新增少量的程式碼，以呼叫您稍早新增的函數，並顯示檔案清單。

在程式碼編輯器中，開啟 ui.js 檔案。

在檔案結尾處，新增 displayFiles() 函數。

async function displayFiles() {
  const files = await getFiles();
  const ul = document.getElementById('downloadLinks');
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
  for (let file of files) {
    if (!file.folder && !file.package) {
      let a = document.createElement('a');
      a.href = '#';
      a.appendChild(document.createTextNode(file.name));
      let li = document.createElement('li');
      li.appendChild(a);
      ul.appendChild(li);
    }
  }
}

請注意， if 陳述式會略過任何資料夾或套件，只會顯示檔案。目前無法在 API 中篩選這些項目。另請注意，這些檔案會呈現為錨點標籤 (超連結)。在下一個練習中，您可以在選取連結，新增一個功能以下載每個檔案。

在 displayUI() 函數的結尾、在右大括弧之前，新增呼叫至 displayFiles()。

  // beginning of function omitted for brevity
  content.style = "display: block";

  displayFiles();
}

執行您的應用程式

透過使用 Microsoft Graph，您現在已擴充您的應用程式以顯示使用者的部分檔案。請確定使用者的 OneDrive 執行個體之根資料夾中有一些檔案，然後在本機執行此應用程式。

在終端機中執行下列命令來預覽 Web 應用程式：
```
npm start
```
您的瀏覽器應指向 http://localhost:8080。
選取 [使用 Microsoft 帳戶登入] 按鈕以使用您的 Microsoft 365 帳戶登入。
如果您是第一次執行此應用程式，系統會提示您授予應用程式權限以存取電子郵件。若要繼續，請同意要求。
您應該會看到檔案清單。
讓您的 Node.js 伺服器保持運作，因為您將在練習的下一部分使用它。

練習 - 顯示使用者檔案

取得檔案清單

新增 HTML 預留位置以顯示檔案

顯示應用程式中的檔案

執行您的應用程式

意見反應