Electron + Vue + msal-nodejs + Azure Ad:重定向 URL 问题
Posted
技术标签:
【中文标题】Electron + Vue + msal-nodejs + Azure Ad:重定向 URL 问题【英文标题】:Electron + Vue + msal-nodejs + Azure Ad: redirect URL issue 【发布时间】:2021-11-22 04:05:03 【问题描述】:我正在使用 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')
我有空白页
有什么想法吗?
谢谢
【问题讨论】:
【参考方案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 一起使用。因此,我刚刚将最后一个方法包装在基于环境的条件中,现在一切都按预期工作。
我希望这一切对某人有用。
【讨论】:
【参考方案2】:我遇到了类似的问题,您的解决方案帮助了我,谢谢!请问您是如何处理注销重定向的?
您是否也尝试过onBeforeRequest
来处理重定向,而不是节点服务器?
在 auth0 博客中用作示例:https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/
【讨论】:
请使用评论选项来评论类似的消息并与任何特定的人讨论一些事情 嗨,很遗憾,我无法再访问该项目,也无法为您仔细检查,但是,据我所知,注销不需要任何特殊操作,只需重定向到页面如果我没记错的话,你想在调用 log out 方法之后。我希望我是对的,它对你有用。 不用担心,感谢@Ale 的回复! @mrvol 我希望可以,但我犹豫着要不要写答案。但堆栈溢出需要 50 声望才能使用评论选项,除非这是我自己的答案以上是关于Electron + Vue + msal-nodejs + Azure Ad:重定向 URL 问题的主要内容,如果未能解决你的问题,请参考以下文章