練習 - 在 Web 應用程式中使用 Microsoft Graph 來擷取使用者設定檔相片

  • 10 分鐘

您已了解使用 Microsoft Graph 存取使用者個人檔案所需的所有概念。 現在，該建一個客戶應用程式，可用以擷取和顯示已登入的銷售人員相片。

若要成功完成此單元，您需要一個使用者帳戶 (例如，來自您的 Microsoft 365 開發人員租用戶)，以及可在應用程式中使用的個人檔案相片。

設定應用程式

在此練習中，您將存取 GitHub 存放庫、將 Microsoft Entra 識別元新增至應用程式，以及新增程式代碼以使用 Microsoft Graph 存取相片。 如果您尚未建立 Microsoft Entra 應用程式註冊，請先完成必要條件模組，再繼續進行。

  1. 若要取得此練習中使用的初始應用程式碼，請選擇下列其中一個選項：

    如果您使用 Git，請使用 git clone 命令複製該專案:

    git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git

    如果您未使用 Git，請在網頁瀏覽器中前往 https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart。 選取 [程式碼] 按鈕，然後選取 [下載 ZIP]。 將 zip 檔案解壓縮到您的電腦。

  2. 在程式碼編輯器中開啟該資料夾。

  3. 應用程式會包含以下檔案：

    • index.html：定義使用者存取網站時，使用者看到的介面。 此介面會載入 Microsoft 驗證程式庫 (MSAL) 指令碼和自訂應用程式指令碼、提供使用者登入的方式，以及顯示在使用者登入後的名稱。
    • auth.js：定義 MSAL 組態，將應用程式與 Microsoft Entra ID 建立關聯、將使用者登入應用程式，以及處理擷取 Microsoft Graph 可以使用的存取令牌。
    • graph.js：呼叫 Microsoft 365 以存取登入的 /me 設定檔。 其依賴 auth.js 來擷取在 Microsoft Graph API 呼叫所用的存取權杖。
    • ui.js：處理在 index.html中定義的使用者介面元素。

  4. 開啟 auth.js 檔案，並尋找常數 msalConfig：

    const msalConfig = {
  auth: { .. }
}

  5. 將 屬性的clientId值取代為您稍早註冊的 microsoft Entra 應用程式 (spa-aad-app) 複製的 Application (client) 標識符值。 您可以從 Microsoft Entra 應用程式的概觀頁面取得此值， (spa-aad-app) 。

  6. 在相同的 auth.js 檔案中 msalConfig.auth.authority ，尋找 屬性。 <your directory ID here>將 值取代為您稍早註冊之 Microsoft Entra 應用程式 (spa-aad-app) 的目錄 (租使用者) 標識符值。 您可以從 Microsoft Entra 應用程式的概觀頁面取得此值， (spa-aad-app) 。

    常 msalConfig 數看起來應該類似下列程序代碼，其中包含來自 Microsoft Entra 租使用者和已註冊應用程式的唯一標識碼：

    const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};

  7. 開啟 [index.html] 檔案。 找到該行 <h4>Welcome <span id="userName"></span></h4>，並在其後緊接著新增下列程式碼:

    <div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

  8. 在相同的 index.html 檔案中，尋找 <head> 標籤。 新增下列程式碼，以命名您在前一個步驟中新增的影像元素：

    <style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>

  9. 儲存 index.html 檔案。

  10. 開啟 graph.js 檔案。 將名為 getUserPhoto() 的新函數新增到檔案中，如下列程式碼所示。 此函數會使用 /me/photo/$value [Microsoft Graph API 端點] 取得已登入的使用者相片。

    async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}

  11. 儲存 graph.js 檔案。

  12. 開啟 ui.js 檔案，然後新增名為 displayProfilePhoto() 的新函數，如下列程式碼所示。 此函數會顯示在先前建立之影像元素中，從 Microsoft Graph 收到的影像回應。

    async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

  13. 開啟 ui.js 檔案，並新增下列程式碼至現有的 displayUI() 函數結尾。 此程式碼會顯示一個按鈕，讓已登入的使用者可以選取按鈕以檢視其個人檔案相片。 如果使用者尚未登入，按鈕將會保持隱藏狀態。

    var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";

現在，您已新增額外的函數和程式碼片段，以取得已登入的使用者相片，下一個步驟就是執行此應用程式。

執行您的應用程式

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

  1. 在終端機中執行下列命令來預覽 Web 應用程式：

    npm start

  2. 您的瀏覽器應指向 http://localhost:8080。

  3. 選取 [使用 Microsoft 帳戶登入] 按鈕以使用您的 Microsoft 365 帳戶登入。 請確定您用來登入的帳戶有配置檔相片。

    登入按鈕的螢幕擷取畫面。

  4. 在您註冊 Microsoft Entra 應用程式的相同 Microsoft 365 開發人員租使用者中使用帳戶登入。

  5. 成功登入之後，請確認出現歡迎訊息和顯示個人檔案相片的按鈕。

    顯示個人檔案相片按鈕的螢幕擷取畫面。

  6. 選取 顯示個人檔案相片 按鈕。 出現已登入的使用者個人檔案相片。 如果配置檔沒有與其相關聯的相片，則不會顯示任何相片。

    個人檔案相片的螢幕擷取畫面。