如何在ASP.Net MVC Web应用中使用Microsoft Graph Toolkit人员选取器？

前置依赖 #

• 已完成Azure AD应用注册，配置Web平台重定向URI与你的MVC项目访问地址完全匹配，开启User.Read、People.Read、Directory.Read.All三类API权限（可根据实际业务需求裁剪权限范围），启用ID令牌、访问令牌下发配置。
• 项目运行环境支持.NET Framework 4.5+ 或 .NET Core 3.1+ 版本，前端页面可正常加载自定义JS资源。

接入配置步骤 #

步骤1：引入MGT资源包 #

将MGT的JS资源引入到要使用人员选取器的视图页或全局布局页，可直接引用官方预编译的包，也可下载到项目静态资源目录本地引用，引入代码如下：

<script src="mgt-loader.js"></script>

步骤2：初始化身份提供程序 #

MGT调用Microsoft Graph接口需要身份验证，在MGT资源引用之后插入MSAL2身份提供程序配置，替换成你自己的Azure AD应用参数即可：

<mgt-msal2-provider 
    client-id="你的Azure AD应用客户端ID"
    authority="你的Azure AD租户对应的认证地址"
    redirect-uri="你在Azure AD中配置的重定向URI">
</mgt-msal2-provider>

单租户应用可直接填写对应租户的认证地址，多租户应用可使用通用租户配置

步骤3：页面使用人员选取器 #

直接在需要展示组件的位置插入mgt-people-picker标签即可完成基础使用：

<mgt-people-picker></mgt-people-picker>

如果需要自定义选取规则、监听选择事件，可扩展属性和事件绑定，示例如下：

<!-- 限制仅能选择用户，最多选3人，选中后触发自定义回调 -->
<mgt-people-picker 
    type="user" 
    max-selected="3"
    selection-changed="onPeopleSelected">
</mgt-people-picker>

<script>
function onPeopleSelected(e) {
    // e.detail返回已选中的人员列表数据
    const selectedUsers = e.detail;
    // 可自行处理选中数据，比如赋值给表单字段提交到后端
}
</script>

常见问题排查 #

• 组件不渲染：检查MGT资源是否加载成功，MSAL提供程序的client-id、redirect-uri参数是否配置正确。
• 搜索无结果：检查Azure AD应用配置的Graph API权限是否已经获得租户管理员同意，权限范围是否包含人员读取权限。
• 登录时报错：检查Azure AD应用的重定向URI是否和当前页面的访问地址完全一致，包括协议、域名、端口、路径后缀。

内容的提问来源于stack exchange，提问作者Ramakrishnan