问题标签 [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.
reactjs - 防止 msal-react 多次加载组件
我对实现的了解并不太远,并且它非常熊骨而不是重构(也不是很好的编码实践)。
这是一个管理门户,它使用公司的 Azure Active Directory 来验证用户,而不是用户名/密码等。流程是这样的:
- 用户导航到
/admin
。 useEffect()
开始检查用户是否isAuthenticated
。- 如果没有,它们会自动重定向到登录。
- 一旦他们登录或被验证为已经是
isAuthenticated
,他们现在就可以访问属于<AuthenticatedTemplate>
.
当前唯一的子组件是<Token>
,出于测试目的,它只是打印出从 API 返回的 JWT 令牌。基本上这里发生的是:
- ,
accessToken
,也会自动发送到我idToken
的oid
API 以在服务器端进行验证。 - 当它们被验证时,将根据数据库检查用户......如果它们存在,发送一个 JWT......如果不存在,添加它们并发送一个 JWT。
- JWT 被保存
sessionStorage
并随后用于客户端-API 通信。
我在 API 中遇到的问题是被查询四次或更多次:
这是我到目前为止所拥有的:
关于如何限制这一点的建议?
node.js - 如何使用 Axios 通过 Node js API 获取 Azure 访问令牌
我在 Nodejs 中有一个使用 Axios 进行 API 调用的后端。我需要实现 Azure 身份验证以获取令牌,因此我遵循以下示例:
该示例使用 express 并重定向到首先获取和授权,然后是令牌,我一直在尝试使用 Axios 查找示例但我找不到。
这就是我到目前为止所拥有的,这个想法是使用结果来获取令牌,任何指导都非常感谢。
msal - 在 REACT PWA 中使用 loginPopup MSAL JS 的间歇性问题
早上好,我正在使用 MSAL JS 对使用 REACT 开发的 PWA 应用程序中的用户进行身份验证。有时登录效果很好,将用户重定向到应用程序的主页。其他时候登录弹出窗口打开,用户插入他们的登录,但登录过程失败并出现以下错误:
这是 MSAL 的配置:
这是实现的登录方法:
登录错误后,使用浏览器数据清理刷新页面允许用户正确登录。我不明白是什么导致了这个问题,任何人都可以帮助我吗?谢谢。
reactjs - 使用 loginPopup 时 Microsoft Authentication React “hash_empty_error”
我无法理解在尝试使用 Micrsoft Authentication library for React (PWA) 对用户进行身份验证时遇到的错误。我需要帮助了解为什么尝试使用 loginPopup 方法登录用户时失败。
在某些情况下,身份验证按预期工作,但在某些情况下它不起作用。任何形式的建议和/或帮助将不胜感激。
以下是我配置 microsoft 身份验证库的方式:
这是我调用 loginPopup 方法的块,它应该返回一个在此函数完成时履行的承诺,或者如果引发错误则被拒绝。
以下是我尝试使用 Login Popup 方法登录时遇到的错误:
以下是我在 package.json 依赖树中定义的确切包:
使调试变得困难的原因是它不可重复,我发现很难理解为什么这个错误会在随机时间出现。有时承诺会实现,但有时却没有。换句话说,它有效而无效。
关于如何调试或解决此问题的帮助和/或建议将非常有价值并受到高度赞赏。预先感谢您的帮助。
免责声明:我已阅读文档、Microsoft Msal 示例应用程序,我还阅读了大量教程,但仍无法使其完全发挥作用。
azure - 对于前端的 React 应用程序和后端的 Express 应用程序,这是否是使用 Azure AD 对用户进行身份验证和授权的正确流程?
我在前端有 React 应用程序,我已在 Azure AD 中将其注册为 REACT_AZURE,并使用 @azure/msal-react npm 包对用户进行身份验证。
为了保护我的 Express 路由,我在 Azure AD 中将另一个应用程序注册为 API_AZURE,并在“公开 API”部分添加了范围“access_as_user”。
在“API 权限”部分的 REACT_AZURE 应用程序中,我添加了“access_as_user”的权限。现在我可以获取“access_as_user”范围的访问令牌并对我的快速服务器进行 API 调用。
在我的受保护路线中,我使用 passport-azure-ad BearerStrategy 来验证访问令牌,如果它有效,我有权获取资源。
这是正确的流程吗?我是否必须向 Azure AD 注册两个应用程序?如果没有,我该怎么做?
azure - Azure B2C 会话导致意外流量
有人可以帮助我理解 Azure AD B2C 的这种行为,并揭示我在 SSO 会话中不理解的内容。
我有一个相当复杂的登录自定义策略,其中包括自定义注册和嵌入式重置密码的子旅程,遵循嵌入式密码重置示例。我有一个声明signinOption
,它被设置为SignUp
或ForgotPassword
取决于CombinedSignInAndSignUp
编排步骤中的声明提供者选择。然后我检查 的值signinOption
以决定是否启动每个子旅程。这一切都是第一次完美地工作。
我的问题是在使用 MSAL 和 React 时出现的,但我还没有确定如何可靠地重现它。似乎 MSAL 正在发送 cookie,而 B2C 正在检测现有会话,因此它跳过了登录屏幕,让我进入了其中一个子旅程(SignUp 或 ForgotPassword)。关闭浏览器并不能解决它。每次我启动我的网络应用程序时,它都会启动登录自定义策略,然后我就进入了错误的屏幕。我修复状态的唯一方法是清除我的 B2C 租户域的 cookie。
我有一个用户旅程日志,希望有人可以帮助我分析以找出问题所在。在这种情况下,流程直接进入忘记密码之旅。我可以看到它执行了ForgotPasswordExchange
我的signinOption
声明,这就是触发子旅程的原因。我的问题是为什么ForgotPasswordExchange
当用户没有在登录屏幕上单击忘记密码时它会执行,因为登录屏幕被完全跳过了。
它是否以某种方式从会话中记住了它?
一些代码可以让我了解我的设置,这是关键部分。
覆盖忘记的密码和注册链接:
我的编排步骤:
和用户旅程日志:
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)']
错误发生在这里:
reactjs - 如何通过反应获取天蓝色广告刷新令牌
我正在使用 React、msal-react 和 msal-browser 做一个项目。
我可以使用 msal-react 库提供的功能获取访问令牌,但我无法手动获取刷新令牌。
从网络上可以看到,当用户通过重定向登录时执行了一个令牌请求,并且显然返回了令牌和刷新令牌。但是,刷新令牌受到很好的保护,无法在 cookie、会话存储或实例下找到。
前端是否有可能获得天蓝色广告的刷新令牌?
抱歉,由于安全要求,我无法发布我的代码
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_name
和general_name
,但我不知道如何从令牌中获取信息。因为在 Chrome 开发者工具中,没有发送包含这些信息的 Token。
这是我到目前为止所拥有的:
由于我使用express.js
React 作为前端:我应该更好地使用msal-react吗?我想避免这种情况,因为这不是微软官方支持的。
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