如何在React开发的Outlook Add-in中避免MSAL账号选择弹窗

我用React开发Outlook Add-in，集成了MSAL进行身份认证，但登录时总会弹出账号选择弹窗。因为插件运行在Outlook内部，希望实现无需手动选择账号的无缝认证，该怎么调整代码？

原代码如下：

import { PublicClientApplication } from '@azure/msal-browser';
public async getGraphToken(mode: string): Promise<string> {
        return new Promise(async (resolve, reject) => {
            try {
                // Initialize MSAL PublicClientApplication
                pca = new PublicClientApplication({
                    auth: {
                        clientId: Constants.AppRegistrationClientId,
                        authority: `https://login.microsoftonline.com/${Constants.TenantId}/oauth2/v2.0/authorize`,
                        redirectUri: `${window.location.origin}/login/login.html`
                    },
                    cache: {
                        cacheLocation: 'localStorage'
                    }
                });
                await pca.initialize();
               
                 const accounts = pca.getAllAccounts();
                if (accounts.length === 0) {
                    throw new Error("No account found. Please sign in.");
                }
                const account = accounts[0];
                let request;
                if (mode === "graph") {
                    request = {
                        scopes: ['user.read', 'Mail.Send', 'Sites.ReadWrite.All'],
                        account: account
                    };
                }
                else if (mode === "sp") {
                    request = {
                        scopes: [`${Constants.TenantUrl}/.default`],
                        account: account
                    }
                }
                else if (mode === "functionApp") {
                    request = {
                        scopes: Constants.FunctionAppScopes,
                        account: account
                    };
                }
                const response = await pca.acquireTokenSilent(request);
                resolve(response.accessToken);

            } catch (error) {
                console.error("Error acquiring token silently", error);
                try {
                    const interactiveResponse = await pca.acquireTokenPopup({
                        scopes: ['user.read', 'Sites.Read.All'],
                    });
                    resolve(interactiveResponse.accessToken);
                } catch (interactiveError) {
                    reject(interactiveError);
                }
            }
        });
    }

解决方案 #

要实现无缝认证，核心是利用Outlook提供的当前用户上下文，让MSAL自动匹配对应账号，跳过选择弹窗，具体调整如下：

• 提前获取Outlook当前用户邮箱
  借助Office.js的Office.context.mailbox.userProfile.emailAddress获取当前登录Outlook的用户邮箱，这个值可以直接作为MSAL的账号匹配依据，避免用户手动选择。

• 优化MSAL初始化逻辑
  不要在每次调用getGraphToken时重新初始化PublicClientApplication，全局初始化一次即可，保证缓存的账号信息能被复用。

• 在交互式请求中指定loginHint和domainHint
  调用acquireTokenPopup时添加这两个参数，MSAL会自动匹配对应账号，跳过账号选择步骤。loginHint填获取到的用户邮箱，domainHint根据租户类型设置：企业账号填organizations，个人微软账号填consumers。

• 精准匹配缓存账号
  不要直接取accounts[0]，而是用用户邮箱去匹配缓存中的账号，确保使用的是Outlook当前登录的账号。

修改后的代码示例 #

import { PublicClientApplication, AccountInfo } from '@azure/msal-browser';

// 全局初始化MSAL，避免重复创建
let pca: PublicClientApplication | null = null;

// 提前初始化Office.js并获取用户邮箱
async function getCurrentUserEmail(): Promise<string> {
    return new Promise((resolve, reject) => {
        Office.initialize = () => {
            try {
                const email = Office.context.mailbox.userProfile.emailAddress;
                resolve(email);
            } catch (err) {
                reject(err);
            }
        };
    });
}

public async getGraphToken(mode: string): Promise<string> {
    try {
        // 全局初始化MSAL
        if (!pca) {
            pca = new PublicClientApplication({
                auth: {
                    clientId: Constants.AppRegistrationClientId,
                    authority: `https://login.microsoftonline.com/${Constants.TenantId}/oauth2/v2.0/authorize`,
                    redirectUri: `${window.location.origin}/login/login.html`
                },
                cache: {
                    cacheLocation: 'localStorage'
                }
            });
            await pca.initialize();
        }

        const userEmail = await getCurrentUserEmail();
        let targetAccount: AccountInfo | undefined;

        // 匹配缓存中对应用户邮箱的账号
        const accounts = pca.getAllAccounts();
        if (accounts.length > 0) {
            targetAccount = accounts.find(account => 
                account.username.toLowerCase() === userEmail.toLowerCase()
            );
        }

        let request;
        switch(mode) {
            case "graph":
                request = {
                    scopes: ['user.read', 'Mail.Send', 'Sites.ReadWrite.All'],
                    account: targetAccount
                };
                break;
            case "sp":
                request = {
                    scopes: [`${Constants.TenantUrl}/.default`],
                    account: targetAccount
                };
                break;
            case "functionApp":
                request = {
                    scopes: Constants.FunctionAppScopes,
                    account: targetAccount
                };
                break;
            default:
                throw new Error("Invalid mode specified");
        }

        // 尝试静默获取令牌
        const response = await pca.acquireTokenSilent(request);
        return response.accessToken;

    } catch (silentError) {
        console.error("Silent token acquisition failed", silentError);
        try {
            const userEmail = await getCurrentUserEmail();
            // 交互式请求时指定loginHint和domainHint，跳过账号选择
            const interactiveResponse = await pca!.acquireTokenPopup({
                scopes: ['user.read', 'Sites.Read.All'],
                loginHint: userEmail,
                domainHint: Constants.TenantId === "common" ? "consumers" : "organizations"
            });
            return interactiveResponse.accessToken;
        } catch (interactiveError) {
            throw interactiveError;
        }
    }
}

额外注意事项 #

• 确保你的应用注册已配置正确的重定向URI，且在Outlook插件的清单文件中声明了对应的权限。
• 若用户首次使用插件，仍会弹出权限授权弹窗，但不会出现账号选择步骤；后续请求会自动静默完成。

内容的提问来源于stack exchange，提问作者Alien 'D' mars