教學課程：以應用程式身分，從安全的 JavaScrip 應用程式中存取 Microsoft Graph

了解如何從在 Azure App Service 上執行的 Web 應用程式存取 Microsoft Graph。

您想要呼叫 Web 應用程式的 Microsoft Graph。 讓 Web 應用程式存取資料的安全方式，是使用系統指派的受控識別。 來自 Microsoft Entra ID 的受控識別可讓 App Service 透過角色型存取控制 (RBAC) 存取資源，而不需要應用程式認證。 將受控識別指派給您的 Web 應用程式後，Azure 會負責建立和散發憑證。 您不需要擔心管理祕密或應用程式認證。

在本教學課程中，您會了解如何：

• 在 Web 應用程式上建立系統指派的受控識別。
• 將 Microsoft Graph API 權限新增至受控識別。
• 使用受控識別從 Web 應用程式呼叫 Microsoft Graph。

如果您沒有 Azure 帳戶，請在開始之前建立 免費帳戶 。

必要條件

• 在 Azure App Service 上執行且已啟用 App Service 驗證/授權模組的 Web 應用程式。

啟用應用程式上的受控識別

如果您透過 Visual Studio 建立並發佈 Web 應用程式，則系統會為您的應用程式啟用受控識別。

1. 在應用程式服務中，選取左側窗格中的 [身分識別]，然後選取 [系統指派]。

2. 確定狀態設為開啟。 若未設定為開啟，請依序選取 [儲存] 和 [是] 以啟用系統指派的受控識別。 啟用受控識別時，狀態會設定為「開啟」，且物件識別碼可供使用。

3. 請記下 [物件識別碼] 值，您會在下一個步驟用到。

授與 Microsoft Graph 連線

存取 Microsoft Graph 時，受控識別必須具有要執行之作業的適當權限。 目前沒有任何選項可透過 Microsoft Entra 系統管理中心指派這類權限。

1. 執行下列指令碼，將要求的 Microsoft Graph API 權限新增至受控識別服務主體物件。

   PowerShell

   # Install the module.
   # Install-Module Microsoft.Graph -Scope CurrentUser
   
   # The tenant ID
   $TenantId = "aaaabbbb-0000-cccc-1111-dddd2222eeee"
   
   # The name of your web app, which has a managed identity.
   $webAppName = "SecureWebApp-20201106120003" 
   $resourceGroupName = "SecureWebApp-20201106120003ResourceGroup"
   
   # The name of the app role that the managed identity should be assigned to.
   $appRoleName = "User.Read.All"
   
   # Get the web app's managed identity's object ID.
   Connect-AzAccount -Tenant $TenantId
   $managedIdentityObjectId = (Get-AzWebApp -ResourceGroupName $resourceGroupName -Name $webAppName).identity.principalid
   
   Connect-MgGraph -TenantId $TenantId -Scopes 'Application.Read.All','AppRoleAssignment.ReadWrite.All'
   
   # Get Microsoft Graph app's service principal and app role.
   $serverApplicationName = "Microsoft Graph"
   $serverServicePrincipal = (Get-MgServicePrincipal -Filter "DisplayName eq '$serverApplicationName'")
   $serverServicePrincipalObjectId = $serverServicePrincipal.Id
   
   $appRoleId = ($serverServicePrincipal.AppRoles | Where-Object {$_.Value -eq $appRoleName }).Id
   
   # Assign the managed identity access to the app role.
   New-MgServicePrincipalAppRoleAssignment `
       -ServicePrincipalId $managedIdentityObjectId `
       -PrincipalId $managedIdentityObjectId `
       -ResourceId $serverServicePrincipalObjectId `
       -AppRoleId $appRoleId
   

   Azure CLI

   az login
   
   webAppName="SecureWebApp-20201106120003"
   
   spId=$(az resource list -n $webAppName --query [*].identity.principalId --out tsv)
   
   graphResourceId=$(az ad sp list --display-name "Microsoft Graph" --query [0].id --out tsv)
   
   appRoleId=$(az ad sp list --display-name "Microsoft Graph" --query "[0].appRoles[?value=='User.Read.All' && contains(allowedMemberTypes, 'Application')].id" --output tsv)
   
   uri=https://graph.microsoft.com/v1.0/servicePrincipals/$spId/appRoleAssignments
   
   body="{'principalId':'$spId','resourceId':'$graphResourceId','appRoleId':'$appRoleId'}"
   
   az rest --method post --uri $uri --body $body --headers "Content-Type=application/json"
   

2. 執行指令碼之後，您可以在 Microsoft Entra 系統管理中心中驗證要求的 API 權限是否已指派給受控識別。

3. 前往 [應用程式]，然後選取 [企業應用程式]。 此窗格會顯示您租用戶中的所有服務主體。 在 [應用程式型別]==[受控識別] 部分新增篩選，然後選取該受控識別的服務主體。

   如果您遵循本教學課程，則會有兩個具有相同顯示名稱 (例如 SecureWebApp2020094113531) 的服務主體。 具有「首頁 URL」的服務主體代表您租用戶中的 Web 應用程式。 出現在 [受控識別] 中的服務主體不應具有列出的 [首頁 URL]，而且 [物件識別碼] 應該符合上一個步驟中受控識別的物件識別碼值。

4. 在選取受控識別的服務主體。

   

5. 在 [概觀] 中選取 [權限]，您便會看到 Microsoft Graph 的新增權限。

   

使用 Node.js 呼叫 Microsoft Graph

您的應用程式現已具有必要的權限，且會將 Microsoft Graph 的用戶端識別碼新增至登入參數。

來自 DefaultAzureCredential 套件的 類別是用來取得程式碼的權杖認證，以授權 Azure 儲存體的要求。 建立 DefaultAzureCredential 類別的執行個體，此執行個體會使用受控識別擷取權杖，並將其附加至服務用戶端。 下列程式碼範例會取得已驗證的權杖認證，並用來建立服務用戶端物件，以取得群組中的使用者。

注意

Web 應用程式中的基本驗證/授權不需要 @azure/identity 套件，也不需使用 Microsoft Graph 驗證要求。 您可以只啟用 App Service 驗證/授權模組，安全地呼叫下游 API。

不過，App Service 的驗證/授權是針對更基本的驗證案例所設計。 針對更複雜的案例 (例如處理自訂宣告)，您需要 @azure/identity 套件。 一開始還有更多的安裝和設定工作，但是 @azure/identity 套件可以與 App Service 驗證/授權模組一起執行。 之後，當 Web 應用程式需要處理更複雜的案例時，您可以停用 App Service 驗證/授權模組，而 @azure/identity 會是您應用程式的一部分。

安裝用戶端程式庫套件

使用 npm 在您的專案中安裝 @azure/identity (英文) 和 @microsoft/microsoft-graph-client (英文) 套件。

npm install @azure/identity @microsoft/microsoft-graph-client

設定驗證資訊

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
}

代表應用程式呼叫 Microsoft Graph

下列程式碼呈現如何以應用程式的身分呼叫 Microsoft Graph 控制器 (英文)，並取得一些使用者資訊。

// graphController.js

const graphHelper = require('../utils/graphHelper');
const { DefaultAzureCredential } = require("@azure/identity");

exports.getUsersPage = async(req, res, next) => {

    const defaultAzureCredential = new DefaultAzureCredential();
    
    try {
        // get app's access token scoped to Microsoft Graph
        const tokenResponse = await defaultAzureCredential.getToken("https://graph.microsoft.com/.default");

        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(tokenResponse.token);

        // return profiles of users in Graph
        const users = await graphClient
            .api('/users')
            .get();

        res.render('users', { user: req.session.user, users: users });   
    } catch (error) {
        next(error);
    }
}

先前的程式碼依賴下列 getAuthenticatedClient (英文) 函式來傳回 Microsoft Graph 用戶端。

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

清除資源

如果您已完成本教學課程，且不再需要 Web 應用程式或相關聯的資源，請清除您建立的資源。

刪除資源群組

在 Azure 入口網站中，從入口網站功能表選取 [資源群組]，然後選取包含您應用程式服務和應用程式服務方案的資源群組。

選取 [刪除資源群組] 來刪除群組及所有資源。

此命令可能需要幾分鐘的時間來執行。

下一步

在本教學課程中，您已了解如何：

• 在 Web 應用程式上建立系統指派的受控識別。
• 將 Microsoft Graph API 權限新增至受控識別。
• 使用受控識別從 Web 應用程式呼叫 Microsoft Graph。

瞭解如何將 .NET Core 應用程式 或 Node.js應用程式 連線至資料庫。