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 问题的主要内容,如果未能解决你的问题,请参考以下文章

vue+electron打包不能网络请求

Electron+Vue – 基础学习: 创建项目

electron-vue:Vue.js 开发 Electron 桌面应用

vue+ts+electron踩坑记录

electron和vue的关系

electron中vue,table渲染大量数据卡顿