问题标签 [msal-react]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
348 浏览

reactjs - 防止 msal-react 多次加载组件

我对实现的了解并不太远,并且它非常熊骨而不是重构(也不是很好的编码实践)。

这是一个管理门户,它使用公司的 Azure Active Directory 来验证用户,而不是用户名/密码等。流程是这样的:

  1. 用户导航到/admin
  2. useEffect()开始检查用户是否isAuthenticated
  3. 如果没有,它们会自动重定向到登录。
  4. 一旦他们登录或被验证为已经是isAuthenticated,他们现在就可以访问属于<AuthenticatedTemplate>.

当前唯一的子组件是<Token>,出于测试目的,它只是打印出从 API 返回的 JWT 令牌。基本上这里发生的是:

  1. , accessToken,也会自动发送到我idTokenoidAPI 以在服务器端进行验证。
  2. 当它们被验证时,将根据数据库检查用户......如果它们存在,发送一个 JWT......如果不存在,添加它们并发送一个 JWT。
  3. JWT 被保存sessionStorage并随后用于客户端-API 通信。

我在 API 中遇到的问题是被查询四次或更多次:

在此处输入图像描述

这是我到目前为止所拥有的:

关于如何限制这一点的建议?

0 投票
1 回答
1438 浏览

node.js - 如何使用 Axios 通过 Node js API 获取 Azure 访问令牌

我在 Nodejs 中有一个使用 Axios 进行 API 调用的后端。我需要实现 Azure 身份验证以获取令牌,因此我遵循以下示例:

https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-nodejs-webapp-msal?WT.mc_id=Portal-Microsoft_AAD_RegisteredApps

该示例使用 express 并重定向到首先获取和授权,然后是令牌,我一直在尝试使用 Axios 查找示例但我找不到。

这就是我到目前为止所拥有的,这个想法是使用结果来获取令牌,任何指导都非常感谢。

0 投票
1 回答
1457 浏览

msal - 在 REACT PWA 中使用 loginPopup MSAL JS 的间歇性问题

早上好,我正在使用 MSAL JS 对使用 REACT 开发的 PWA 应用程序中的用户进行身份验证。有时登录效果很好,将用户重定向到应用程序的主页。其他时候登录弹出窗口打开,用户插入他们的登录,但登录过程失败并出现以下错误:

这是 MSAL 的配置:

这是实现的登录方法:

登录错误后,使用浏览器数据清理刷新页面允许用户正确登录。我不明白是什么导致了这个问题,任何人都可以帮助我吗?谢谢。

0 投票
1 回答
994 浏览

reactjs - 使用 loginPopup 时 Microsoft Authentication React “hash_empty_error”

我无法理解在尝试使用 Micrsoft Authentication library for React (PWA) 对用户进行身份验证时遇到的错误。我需要帮助了解为什么尝试使用 loginPopup 方法登录用户时失败。

在某些情况下,身份验证按预期工作,但在某些情况下它不起作用。任何形式的建议和/或帮助将不胜感激。

以下是我配置 microsoft 身份验证库的方式:

这是我调用 loginPopup 方法的块,它应该返回一个在此函数完成时履行的承诺,或者如果引发错误则被拒绝。

以下是我尝试使用 Login Popup 方法登录时遇到的错误:

以下是我在 package.json 依赖树中定义的确切包:

使调试变得困难的原因是它不可重复,我发现很难理解为什么这个错误会在随机时间出现。有时承诺会实现,但有时却没有。换句话说,它有效而无效。

关于如何调试或解决此问题的帮助和/或建议将非常有价值并受到高度赞赏。预先感谢您的帮助。

免责声明:我已阅读文档、Microsoft Msal 示例应用程序,我还阅读了大量教程,但仍无法使其完全发挥作用。

0 投票
1 回答
123 浏览

azure - 对于前端的 React 应用程序和后端的 Express 应用程序,这是否是使用 Azure AD 对用户进行身份验证和授权的正确流程?

  1. 我在前端有 React 应用程序,我已在 Azure AD 中将其注册为 REACT_AZURE,并使用 @azure/msal-react npm 包对用户进行身份验证。

  2. 为了保护我的 Express 路由,我在 Azure AD 中将另一个应用程序注册为 API_AZURE,并在“公开 API”部分添加了范围“access_as_user”。

  3. 在“API 权限”部分的 REACT_AZURE 应用程序中,我添加了“access_as_user”的权限。现在我可以获取“access_as_user”范围的访问令牌并对我的快速服务器进行 API 调用。

  4. 在我的受保护路线中,我使用 passport-azure-ad BearerStrategy 来验证访问令牌,如果它有效,我有权获取资源。

这是正确的流程吗?我是否必须向 Azure AD 注册两个应用程序?如果没有,我该怎么做?

0 投票
1 回答
314 浏览

azure - Azure B2C 会话导致意外流量

有人可以帮助我理解 Azure AD B2C 的这种行为,并揭示我在 SSO 会话中不理解的内容。

我有一个相当复杂的登录自定义策略,其中包括自定义注册和嵌入式重置密码的子旅程,遵循嵌入式密码重置示例。我有一个声明signinOption,它被设置为SignUpForgotPassword取决于CombinedSignInAndSignUp编排步骤中的声明提供者选择。然后我检查 的值signinOption以决定是否启动每个子旅程。这一切都是第一次完美地工作。

我的问题是在使用 MSAL 和 React 时出现的,但我还没有确定如何可靠地重现它。似乎 MSAL 正在发送 cookie,而 B2C 正在检测现有会话,因此它跳过了登录屏幕,让我进入了其中一个子旅程(SignUp 或 ForgotPassword)。关闭浏览器并不能解决它。每次我启动我的网络应用程序时,它都会启动登录自定义策略,然后我就进入了错误的屏幕。我修复状态的唯一方法是清除我的 B2C 租户域的 cookie。

我有一个用户旅程日志,希望有人可以帮助我分析以找出问题所在。在这种情况下,流程直接进入忘记密码之旅。我可以看到它执行了ForgotPasswordExchange我的signinOption声明,这就是触发子旅程的原因。我的问题是为什么ForgotPasswordExchange当用户没有在登录屏幕上单击忘记密码时它会执行,因为登录屏幕被完全跳过了。

它是否以某种方式从会话中记住了它?

一些代码可以让我了解我的设置,这是关键部分。

覆盖忘记的密码和注册链接:

我的编排步骤:

和用户旅程日志:

0 投票
0 回答
10 浏览

javascript - 反应本机 msal 尝试调用接口方法 ReadableMap.getArray(java.lang.String)

我正在尝试在我的反应本机应用程序中使用 microsoft 实现登录

我正在使用库“react-native-msal”。

在 IOS 上工作正常

但是在android上我遇到了这个错误:

[错误:尝试在空对象引用上调用接口方法'com.facebook.react.bridge.ReadableArray com.facebook.react.bridge.ReadableMap.getArray(java.lang.String)']

错误发生在这里:

0 投票
1 回答
1312 浏览

reactjs - 如何通过反应获取天蓝色广告刷新令牌

我正在使用 React、msal-react 和 msal-browser 做一个项目。

我可以使用 msal-react 库提供的功能获取访问令牌,但我无法手动获取刷新令牌。

从网络上可以看到,当用户通过重定向登录时执行了一个令牌请求,并且显然返回了令牌和刷新令牌。但是,刷新令牌受到很好的保护,无法在 cookie、会话存储或实例下找到。

前端是否有可能获得天蓝色广告的刷新令牌?

抱歉,由于安全要求,我无法发布我的代码

0 投票
0 回答
431 浏览

express - 带有 msal 节点的 Azure AD:如何获取用户配置文件?

@azure/msal-node 我有一个使用库进行用户登录的 nodejs/expressjs 应用程序。为此,我遵循了官方的 Microsoft 文档

用户登录就像一个魅力。

但现在我必须访问用户的个人资料,最重要的是用户名。我尝试了很多解决方案,但没有任何效果。

例如,在 中,我按照这里 的建议进行了server.js尝试。但这不起作用,在我在这里链接的线程中,有人说它只适用于版本“^0.2.4”。试过这个,但 npm 找不到这个版本。this.app.getUser();this.app.getAccount();

正如这个答案中所建议的,我还在 Azure AD 中为我的应用程序设置了family_namegeneral_name,但我不知道如何从令牌中获取信息。因为在 Chrome 开发者工具中,没有发送包含这些信息的 Token。

这是我到目前为止所拥有的:

由于我使用express.jsReact 作为前端:我应该更好地使用msal-react吗?我想避免这种情况,因为这不是微软官方支持的。

0 投票
1 回答
251 浏览

react-native - 在 Metro-config 中查找模块黑名单时出现 React Native 问题

我正在尝试使用这个。我克隆了代码,运行npm install然后运行react-native run-android​​. 结果我得到了一个错误Cannot find module 'metro-config/src/defaults/blacklist'。我查了一下,找到了一个答案,建议blacklist.js由于正则表达式错误而更改文件的内容。但是,我查看了答案中建议的路径,metro-config/src/defaults/blacklist但它不包含任何blacklist.js文件。我还查看了其他路径,但仍然没有找到任何名称blacklist.js。如何解决此问题并使库正常工作?

节点版本:v14.17.0

反应原生版本:0.64.2