node.js - Electron + Vue + msal-nodejs + Azure 广告 : redirect URL issue

Question

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

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

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

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

DEV - 使用 createWebHistory

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

这是我在正常导航期间从 devTools 获得的内容(未经身份验证)

这是我在身份验证后得到的结果(调用 API 成功):

应用程序中的空白页。

DEV - 使用 createWebHashHistory

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

身份验证后(失败):

应用程序中的空白页。

产品

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

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

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

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

如果我只使用:

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

我有空白页

有什么想法吗？

谢谢

Answer 1

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

基本上，我在应用程序本身内启动一个 Node 服务器(例如 localhost:3031)，然后我用它捕获重定向 url(localhost:3031/redirect)并从中提供内部 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)的另一段代码:

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”，但应用程序协议(protocol)必须是“app”(或您选择的任何协议(protocol))才能与 Vue 配合使用。因此，我刚刚将最后一个方法 package 在基于环境的条件中，现在一切都按预期工作。

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