时间戳

首页 > 解决方案 > Electron + Vue + msal-nodejs + Azure Ad：重定向 URL 问题

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

问题描述

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

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

我能够在 azure 中对服务器进行身份验证并获取用户信息，但我无法弄清楚如何设置重定向 URL。

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

DEV - 使用 createWebHistory

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

这是我在正常导航期间从 devTools 得到的（未经过身份验证）

在此处输入图像描述

这就是我在身份验证后得到的（对 API 的调用成功）：

在此处输入图像描述

在此处输入图像描述

应用程序中的空白页面。

开发 - 使用 createWebHashHistory

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

认证后（失败）：

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

应用程序中的空白页面。

产品

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

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

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

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

如果我只使用：

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

我有空白页

在此处输入图像描述

任何想法？

谢谢

标签： node.jsazurevue.jsactive-directoryelectron

解决方案

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

基本上我在应用程序本身内启动一个节点服务器（例如 localhost:3031），然后我用它（localhost:3031/redirect）捕获重定向 url 并从中提供内部 url：

expressApp.get('/redirect', async (req, res) => {
  await win.loadURL('app://./index.html#about')
})

正如我所说，它有效，我没有看到任何安全问题，但是，如果您有任何其他想法或建议，请告诉我。

谢谢

更新

我也发现了 Dev 的问题。为了进行身份验证，我正在使用 Microsoft 在其文档中建议的内容。

如果您查看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 一起使用。因此，我刚刚将最后一种方法包装在基于环境的条件中，现在一切都按预期工作。

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

推荐阅读