Electron + Vue + msal-nodejs + Azure Ad：重定向 URL 问题

Question

我正在使用 Electron 和 Vue 作为框架构建一个桌面应用程序。

我还需要使用 Azure AD 对用户进行身份验证，并且我使用 msal-node.js 作为库来执行此操作。

我能够在 azure 中通过服务器进行身份验证并获取用户信息，但我无法弄清楚如何设置重定向 URL。

首先我不得不说 dev 和 prod 之间的行为发生了巨大的变化，我将解释这两种情况，在这两种情况下，我将使用或不使用历史模式

DEV - 使用 createWebHistory

返回 Azure 中的 Url 和 .env 文件：http://localhost:8080/

这是我在正常导航期间从 devTools 获得的（未经过身份验证）

这是我在认证后得到的（调用API成功）：

应用中的空白页面。

DEV - 使用 createWebHashHistory

返回 Azure 中的 Url 和 .env 文件：http://localhost:8080/#/

认证后（失败）：

应用中的空白页面。

产品

在 prod 中我必须使用 createWebHasHistory 否则我从一开始就有空白页。

我在生产中遇到的第一个问题是 url 本身。 当我创建窗口时，我调用以下 url：

await win.loadURL('app://./index.html')

在 azure 中，我不能使用相同的 url，因为它不是有效的 url。

如果我只使用：

await win.loadURL('app://index.html')

我有空白页

有什么想法吗？

谢谢

Answer 1

我发现的解决方案非常简单。可能它不是最“优雅”的，但它确实有效，至少对于产品而言。在开发中，我仍然遇到上面描述的同样奇怪的问题。

基本上，我在应用程序本身内启动了一个节点服务器（例如 localhost:3031），然后我用它（localhost:3031/redirect）捕获重定向 url 并从中提供内部 url：

expressApp.get('/redirect', async (req, res) => {
  await win.loadURL('app://./index.html#about')
})

正如我所说，它有效，我没有发现任何安全问题，但是，如果您有任何其他想法或建议，请告诉我。

谢谢

更新

我也发现了 Dev 的问题。为了进行身份验证，我使用了微软在其documentation 中建议的内容。

如果你查看文件AuthProvider.js，有这部分代码，在开头：

const CUSTOM_FILE_PROTOCOL_NAME = process.env.REDIRECT_URI.split(':')[0];

在下面，在“getTokenIteractive”方法中，还有一段代码应用了新协议：

protocol.registerFileProtocol(CUSTOM_FILE_PROTOCOL_NAME, (req, callback) => {
    const requestUrl = new URL(req.url)
    callback(path.normalize(`${__dirname}/${requestUrl.path}`))
  })

在 Dev 中，我的 REDIRECT_URI 是“http://localhost:3031/redirect”，但应用协议必须是“app”（或您选择的任何内容）才能与 Vue 一起使用。因此，我刚刚将最后一个方法包装在基于环境的条件中，现在一切都按预期工作。

我希望这一切对某人有用。

Answer 2

我遇到了类似的问题，您的解决方案帮助了我，谢谢！请问您是如何处理注销重定向的？

您是否也尝试过onBeforeRequest 来处理重定向，而不是节点服务器？

在 auth0 博客中用作示例：https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/