我正在使用 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')
我有空白页
有什么想法吗?
谢谢
最佳答案
我发现解决方案非常简单。可能它不是最“优雅”的,但它有效,至少对于产品而言。在开发中我仍然遇到上面描述的同样奇怪的问题。
基本上,我在应用程序本身内启动一个 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 在基于环境的条件中,现在一切都按预期工作。
我希望这一切对某人有用。
关于node.js - Electron + Vue + msal-nodejs + Azure 广告 : redirect URL issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69390097/