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

Question

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

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

我可以在 azure 中通过服务器进行身份验证并获取用户信息，但我不知道如何设置重定向 URL。

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

DEV - 使用 createWebHistory

Return Url 在 Azure 和 .env 文件中：http://localhost:8080/

这是我在正常导航（未验证）期间从 devTools 获得的内容

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

应用程序中的空白页。

DEV - 使用 createWebHashHistory

Return Url 在 Azure 和 .env 文件中：http://localhost:8080/#/

认证后（失败）：

应用程序中的空白页。

产品

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

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

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

天蓝色我不能使用相同的 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 的问题。为了进行身份验证，我使用了 Microsoft 在其 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/

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

Electron + Vue + msal-nodejs + Azure Ad: redirect URL issue

active-directory

azure

node.js

vue.js

electron