Electron+Angular集成Azure AD：实现应用内非交互式认证

核心修改思路 #

替换当前acquireTokenInteractive配置中唤起外部浏览器的openBrowser函数，改为创建Electron模态子窗口加载认证页面，并通过监听窗口导航事件捕获Azure AD的回调URL，完成认证流程。

完整实现代码 #

改造后的getTokenInteractive方法 #

const { BrowserWindow } = require('electron');
// 若为Angular渲染进程，Electron v14+需通过@electron/remote访问BrowserWindow，或在主进程实现逻辑后通过IPC通信

async getTokenInteractive(tokenRequest) {
    return new Promise(async (resolve, reject) => {
        try {
            // 创建绑定到当前应用的模态认证窗口
            const authWindow = new BrowserWindow({
                width: 450,
                height: 600,
                modal: true,
                parent: BrowserWindow.getFocusedWindow(),
                webPreferences: {
                    nodeIntegration: false,
                    contextIsolation: true,
                    sandbox: true
                },
                title: 'Azure AD 登录'
            });

            // 自定义openBrowser，将认证URL加载到内部窗口
            const openBrowser = async (url) => {
                authWindow.loadURL(url);
            };

            // 监听导航事件，捕获认证回调
            const handleAuthCallback = (url) => {
                if (url.startsWith(tokenRequest.redirectUri)) {
                    event?.preventDefault();
                    // 处理Azure AD回调并返回结果
                    this.clientApplication.handleRedirectPromise(url)
                        .then(authResponse => authResponse ? resolve(authResponse) : reject(new Error('认证无有效响应')))
                        .catch(reject)
                        .finally(() => authWindow.close());
                }
            };

            authWindow.webContents.on('will-navigate', (event, url) => handleAuthCallback(url));
            authWindow.webContents.on('did-get-redirect-request', (event, _, newUrl) => handleAuthCallback(newUrl));

            // 执行交互式认证
            await this.clientApplication.acquireTokenInteractive({
                ...tokenRequest,
                openBrowser,
                successTemplate: '<h1>登录成功！</h1><p>窗口将自动关闭</p>',
                errorTemplate: '<h1>登录失败</h1><p>请查看控制台详情</p>'
            });

            // 用户关闭窗口时触发取消逻辑
            authWindow.on('closed', () => reject(new Error('用户取消认证')));

        } catch (err) {
            reject(err);
        }
    });
}

关键配置要点 #

• Azure应用注册：确保重定向URI设置为http://localhost（或自定义协议如myapp://auth），类型选择「公共客户端/本机(移动&桌面)」。
• 自定义协议注册（可选）：若使用自定义协议作为重定向URI，需在Electron主进程注册：

// 主进程代码
const { app, protocol } = require('electron');

app.whenReady().then(() => {
    protocol.registerHttpProtocol('myapp', (req, callback) => {
        const url = req.url.replace('myapp://', 'http://localhost/');
        callback({ url });
    });
});

• 安全规范：认证窗口必须禁用nodeIntegration，启用contextIsolation和sandbox，避免安全风险。

渲染进程替代方案：使用WebView组件 #

如果在Angular渲染层实现，可使用Electron的webview组件嵌入认证页面：

<!-- Angular组件模板 -->
<webview #authWebview [src]="authUrl" style="width:450px; height:600px" (did-get-redirect-request)="handleAuthCallback($event.newUrl)"></webview>

组件类中监听did-get-redirect-request事件，处理逻辑与窗口方案一致。

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