如何在MS Graph Toolkit中用自定义提供器实现无用户登录的应用认证？

核心实现思路 #

通过自定义MS Graph Toolkit提供器，使用客户端凭据流获取应用级令牌，无需用户登录即可调用Microsoft Graph的用户搜索接口。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>应用级认证用户搜索</title>
    <!-- 引入MS Graph Toolkit脚本 -->
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <!-- MS Graph Toolkit搜索组件，指定搜索用户 -->
    <mgt-search entity-types="user" search-query="John"></mgt-search>

    <script>
        // 替换为你的Azure AD应用信息
        const tenantId = "你的租户ID";
        const clientId = "你的客户端ID";
        const clientSecret = "你的客户端密钥";

        // 实现自定义提供器
        class CustomAppProvider extends window.MicrosoftGraphToolkit.Provider {
            constructor() {
                super();
                this.token = null;
                this.tokenExpiry = 0;
            }

            // 核心方法：获取应用级访问令牌
            async getAccessToken(scopes) {
                // 检查令牌是否过期
                if (this.token && Date.now() < this.tokenExpiry) {
                    return this.token;
                }

                // 使用客户端凭据流请求新令牌
                const tokenEndpoint = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;
                const formData = new URLSearchParams();
                formData.append('grant_type', 'client_credentials');
                formData.append('client_id', clientId);
                formData.append('client_secret', clientSecret);
                formData.append('scope', 'https://graph.microsoft.com/.default');

                try {
                    const response = await fetch(tokenEndpoint, {
                        method: 'POST',
                        body: formData,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    });

                    const data = await response.json();
                    if (data.access_token) {
                        this.token = data.access_token;
                        // 设置过期时间（提前5分钟刷新）
                        this.tokenExpiry = Date.now() + (data.expires_in - 300) * 1000;
                        return this.token;
                    } else {
                        throw new Error('获取令牌失败: ' + data.error_description);
                    }
                } catch (error) {
                    console.error('令牌请求出错:', error);
                    throw error;
                }
            }

            // 应用级认证无需登录，直接返回已登录状态
            get isLoggedIn() {
                return true;
            }

            // 无需实现登录/登出方法
            login() { return Promise.resolve(); }
            logout() { return Promise.resolve(); }
        }

        // 初始化并设置自定义提供器
        const provider = new CustomAppProvider();
        window.MicrosoftGraphToolkit.Providers.globalProvider = provider;
    </script>
</body>
</html>

关键说明 #

• 自定义提供器：继承Provider类，核心实现getAccessToken方法，通过客户端凭据流获取应用级令牌，同时加入简单的令牌过期检查逻辑
• 令牌请求：调用Azure AD的令牌端点，使用client_credentials授权类型，请求https://graph.microsoft.com/.default范围（包含已配置的所有应用权限）
• 搜索组件配置：mgt-search的entity-types="user"指定只搜索用户，search-query可设置默认搜索关键词，用户也可在组件输入框中修改搜索词

注意事项 #

• 生产环境中建议使用证书凭据替代客户端密钥，提升安全性
• 需确保Azure AD应用已获得User.Read.All应用权限并完成管理员同意
• 示例中的令牌缓存逻辑仅作演示，生产环境建议使用更可靠的缓存方案（如localStorage或专用缓存库）

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