Share via

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：使用函数和 Microsoft Graph 分配自定义角色

  • 项目

本文演示如何使用函数查询 Microsoft Graph 并根据用户的 Active Directory 组成员身份向用户分配自定义角色。

在本教程中，学习：

  • 部署静态 Web 应用。
  • 创建 Microsoft Entra 应用注册。
  • 使用 Microsoft Entra ID 设置自定义身份验证。
  • 配置一个无服务器函数，该函数查询用户的 Active Directory 组成员身份并返回自定义角色的列表。

注意

本教程要求使用函数来分配角色。 基于函数的角色管理目前为预览版。 完成本教程所需的权限级别为“User.Read.All”。

应用的 API 中有一个名为 GetRoles 的函数。 此函数使用用户的访问令牌从 Microsoft Graph 查询 Active Directory。 如果用户是应用中定义的任何组的成员，则相应的自定义角色将映射到该用户。

先决条件

要求 注释
有效的 Azure 帐户 如果没有帐户，可以免费创建一个帐户。
Microsoft Entra 权限 必须具有足够的权限才能创建 Microsoft Entra 应用程序。

创建 GitHub 存储库

  1. 基于角色函数模板生成存储库。 转到以下位置来创建新存储库。

    https://github.com/staticwebdev/roles-function/generate

  2. 将存储库命名为“my-custom-roles-app”。

  3. 选择“从模板创建存储库”。

将静态 Web 应用部署到 Azure

  1. 在新的浏览器窗口中，打开 Azure 门户。

  2. 从左上角选择“创建资源”。

  3. 在搜索框中，键入“静态 Web 应用”。

  4. 选择“静态 Web 应用”。

  5. 选择“创建”。

  6. 为静态 Web 应用配置以下信息：

    设置 值 说明
    订阅 选择 Azure 订阅。
    资源组 创建名为 my-custom-roles-app-group 的新资源组。
    名称 my-custom-roles-app
    计划类型 标准 使用函数自定义身份验证和分配角色需要标准计划。
    API 区域 选择离你最近的区域。

  7. 在“部署详细信息”部分中：

    设置 值
    Source 选择“GitHub”。
    组织 选择在其中生成存储库的组织。
    存储库 选择 my-custom-roles-app。
    分支 选择“主要”。

  8. 在“生成详细信息”部分中，添加此应用的配置详细信息。

    设置 值 说明
    生成预设 选择“自定义”。
    应用位置 输入 /frontend。 此文件夹包含前端应用程序。
    API 位置 /api 存储库中包含 Azure Functions 的文件夹。
    输出位置 留空。 此应用没有生成输出。

  9. 选择“查看 + 创建”。

  10. 选择“创建”以启动第一个部署。

  11. 完成此过程后，选择“转到资源”以打开新的静态 Web 应用。

  12. 在概述部分中，找到应用程序的“URL”。 将此值复制到文本编辑器中，以便在后续步骤中用于设置 Active Directory 身份验证。

创建 Microsoft Entra 应用程序

  1. 在 Azure 门户中，搜索并选择“Microsoft Entra ID”。

  2. 从“管理”菜单中选择“应用注册”。

  3. 选择“新建注册”，以打开“注册应用程序”窗口。 输入以下值：

    设置 值 说明
    名称 输入“MyStaticWebApp”。
    支持的帐户类型 选择“仅此组织目录中的帐户”。
    重定向 URI 选择“Web”并输入静态 Web 应用的 Microsoft Entra 身份验证回调 URL。 将 <YOUR_SITE_URL>/.auth/login/aad/callback 中的 <YOUR_SITE_URL> 替换为静态 Web 应用的 URL。 此 URL 是在前面步骤中复制到文本编辑器的 URL。

    Create an app registration

  4. 选择“注册”。

  5. 在应用注册创建后，将“基本信息”部分中的“应用程序(客户端) ID”和“目录(租户) ID”复制到文本编辑器中 。

    在静态 Web 应用中需要这些值来配置 Active Directory 身份验证。

启用 ID 令牌

  1. 在应用注册设置中，选择“管理”下的“身份验证”。

  2. 在“隐式授权和混合流”部分，选择“ID 令牌(用于隐式流和混合流)”。

    静态 Web 应用运行时需要此配置来对用户进行身份验证。

  3. 选择“保存”。

创建客户端机密

  1. 在应用注册设置中，选择“管理”下的“证书和机密”。

  2. 在“客户端密码”部分中，选择“新建客户端密码” 。

  3. 对于“说明”字段，请输入 MyStaticWebApp。

  4. 对于“有效期”字段，请保留默认值“6 个月”。

    注意

    必须在到期日期前通过生成新密码并使用它的值更新应用，来轮换密码。

  5. 选择“添加”。

  6. 将创建的客户端密码的值复制到文本编辑器。

    在静态 Web 应用中需要此值来配置 Active Directory 身份验证。

    Create a client secret

配置 Active Directory 身份验证

  1. 在浏览器中，打开 GitHub 存储库，其中包含你部署的静态 Web 应用。

    转到应用的位于“frontend/staticwebapp.config.json”的配置文件。 该文件包含以下部分：

    "auth": {
  "rolesSource": "/api/GetRoles",
  "identityProviders": {
    "azureActiveDirectory": {
      "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
      "registration": {
        "openIdIssuer": "https://login.microsoftonline.com/<YOUR_AAD_TENANT_ID>",
        "clientIdSettingName": "AAD_CLIENT_ID",
        "clientSecretSettingName": "AAD_CLIENT_SECRET"
      },
      "login": {
        "loginParameters": [
          "resource=https://graph.microsoft.com"
        ]
      }
    }
  }
},

    此配置由以下设置组成：

    属性 说明
    rolesSource 登录进程从中获取可用角色列表的 URL。 对于示例应用程序，URL 为 /api/GetRoles。
    userDetailsClaim 用于验证登录请求的架构的 URL。
    openIdIssuer Microsoft Entra 登录路由，随租户 ID 一起追加。
    clientIdSettingName 你的 Microsoft Entra 客户端 ID。
    clientSecretSettingName Microsoft Entra 客户端机密值。
    loginParameters 若要获取 Microsoft Graph 的访问令牌，loginParameters 字段必须配置为 resource=https://graph.microsoft.com。

  2. 选择“编辑”来更新文件。

  3. 通过将 <YOUR_AAD_TENANT_ID> 替换为 Microsoft Entra ID 的目录（租户）ID 来更新 https://login.microsoftonline.com/<YOUR_AAD_TENANT_ID> 的 openIdIssuer 值。

  4. 选择“提交更改...”。

  5. 输入提交消息，然后选择“提交更改”。

    提交这些更改会启动 GitHub Actions 运行以更新静态 Web 应用。

  6. 在 Azure 门户中转到“Azure Static Web App 资源”。

  7. 在菜单栏中选择“配置”。

  8. 在“应用程序设置”部分，添加以下设置：

    名称 值
    AAD_CLIENT_ID Active Directory 应用程序（客户端）ID。
    AAD_CLIENT_SECRET Active Directory 应用程序客户端密码值。

  9. 选择“保存”。

创建角色

  1. 在 Azure 门户中打开 Active Directory 应用注册。

  2. 在“管理”下，选择“应用角色”。

  3. 选择“创建应用角色”并输入以下值：

    设置 “值”
    显示名称 输入 admin。
    允许的成员类型 选择“用户/组”。
    值 输入 admin。
    说明 输入 Administrator。

  4. 选中“是否要启用此应用角色?”框

  5. 选择“应用”。

  6. 现在，对名为“读取者”的角色重复相同的过程。

  7. 复制每个角色的 ID 值，并将其粘贴到文本编辑器中。

验证自定义角色

该示例应用程序包含一个 API 函数 (api/GetRoles/index.js)，该函数可查询 Microsoft Graph 来确定用户是否位于预定义的组中。

该函数基于用户的组成员身份为用户分配自定义角色。 应用程序配置为根据这些自定义角色限制某些路由。

  1. 在 GitHub 存储库中，转到位于“api/GetRoles/index.js”的“GetRoles”函数。

    在顶部附近有一个将自定义用户角色映射到 Microsoft Entra 组的 roleGroupMappings 对象。

  2. 选择编辑。

  3. 用 Microsoft Entra 租户中的组 ID 更新对象。

    例如，如果你有 ID 为 6b0b2fff-53e9-4cff-914f-dd97a13bfbd6 和 b6059db5-9cef-4b27-9434-bb793aa31805 的组，则可将对象更新为：

    const roleGroupMappings = {
  'admin': '6b0b2fff-53e9-4cff-914f-dd97a13bfbd6',
  'reader': 'b6059db5-9cef-4b27-9434-bb793aa31805'
};

    每当用户成功使用 Microsoft Entra ID 进行身份验证时，就会调用“GetRoles”函数。 该函数使用用户的访问令牌在 Microsoft Graph 中查询其 Active Directory 组成员身份。 如果用户是在 roleGroupMappings 对象中定义的任何组的成员，则将返回相应的自定义角色。

    在上面的示例中，如果用户是 ID 为 b6059db5-9cef-4b27-9434-bb793aa31805 的 Active Directory 组的成员，则将为其授予 reader 角色。

  4. 选择“提交更改...”。

  5. 添加提交消息，然后选择“提交更改”。

    执行这些更改会启动生成以更新静态 Web 应用。

  6. 部署完成后，可通过导航到应用的 URL 来验证更改。

  7. 使用 Microsoft Entra ID 登录到静态 Web 应用。

  8. 登录时，示例应用会根据标识的 Active Directory 组成员身份显示所分配的角色的列表。

    根据这些角色，允许或禁止访问应用中的某些路由。

注意

针对 Microsoft Graph 的某些查询会返回多页数据。 需要多个查询请求时，Microsoft Graph 会在响应中返回一个 @odata.nextLink 属性，其中包含下一页结果的 URL。 有关详细信息，请参阅在应用中对 Microsoft Graph 数据进行分页

清理资源

通过删除资源组来清理你部署的资源。

  1. 在 Azure 门户上的左侧菜单中选择“资源组” 。

  2. 在“按名称筛选”字段中输入资源组名称。

  3. 选择在本教程中使用的资源组名称。

  4. 在顶部菜单中选择“删除资源组”。

后续步骤

身份验证和授权