如何使用电子和角度使用天蓝色登录

分享于2022年07月17日 angular angularjs azure electron msal 问答
【问题标题】:如何使用电子和角度使用天蓝色登录(How to use azure login using electron and angular)
【发布时间】:2022-01-07 02:02:02
【问题描述】:

我正在尝试在我的电子应用程序中实现 azure 身份验证,我已经创建了一个 Angular 应用程序,一切正常,因此当应用程序加载时,它重定向到 azure 登录页面,如果完成身份验证,它将重定向回我正在使用的应用程序msal 角度。

现在我正在将此应用程序转换为电子。 在 electron 中,加载 angular 的 dist 文件夹。 成功登录后,需要重定向到应用程序,但显示无效架构错误,因为重定向 uri 中有 file:// 架构。 也无法将该架构注册到 azure 门户。

那么,我们如何重定向到应用程序。

在 main.js(电子)中

mainWindow.loadURL(url.format({ 
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true,
}));

在 Angular 应用中

redirectUri: '/'

包装库

MSAL Angular (@azure/msal-angular)

  • 您可以使用 openid appauth 模块使用 OpenID(OIDC) 对您的 Azure AD 进行身份验证,并将 RedirectUri 指定为 localhost:8000 或其他。即使下面的文章基于 Okta,您也可以按照类似的方法对您的电子应用程序使用 Azure AD 进行身份验证。 Electron Example

【解决方案1】:

谢谢 Anand Sowmithiran 。发布您的建议作为帮助其他社区成员的答案。

您可以使用 openid appauth 模块使用 OpenID(OIDC) 对 Azure AD 进行身份验证,并将 RedirectUri 指定为 localhost:8000 或其他形式。即使下面的文章基于 Okta,您也可以按照类似的方法对您的电子应用程序使用 Azure AD 进行身份验证。 Electron Example

您可以参考 How to use azure login using electron and angular How to use with electron? Is there any way to login with AzureAD in electron js?