React 项目中引入msal验证以及部分报错处理

已于 2023-08-25 12:01:17 修改
阅读量743 收藏
点赞数
文章标签： react.js 前端 前端框架
于 2023-08-25 11:57:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43275982/article/details/132492364
版权

功能实现

如何在React 项目中引入msal身份验证，
微软在官网有提供文档支持，文档包含示例和具体使用的教程，地址如下：

https://learn.microsoft.com/zh-cn/azure/active-directory/develop/tutorial-v2-nodejs-webapp-msal

照着文档操作，记录报错

问题记录

问题1描述：

TS2322: Type ‘Msal2Provider’ is not assignable to type ‘IProvider’…
请添加图片描述

问题1原因：

mgt-element 未显示引用失效，但实际未引用到，不确定是不是Visual Studio Code IDE的原因，package.json引用没版本为"*"的时候，常常会报这个错误，如果有懂的大神，请多多指教。
在这里插入图片描述

问题1解决办法：

运行安装指令：

npm install @microsoft/mgt-element @microsoft/mgt-msal2-provider @microsoft/mgt-react

安装成功后，效果如下：
在这里插入图片描述

汪锦鹏
关注
react-aad：使用Microsoft身份验证库（MSAL）的Azure AD的React包装器。 将AzureAD与React集成以进行身份​​验证的最简单方法
02-02
更新：微软目前正在构建一个正式的@azure/msal-react库，它将替换react-aad-msal 。 虽然此库将一直保留到那时，但是不建议用于新应用程序，因为它依赖于较旧的MSAL 1.0依赖关系，该依赖关系基于具有已知问题的旧身份验证流。 将会有一些中间更新，以帮助支持到官方库的迁移路径，但是目前， react-aad-msal已计划被弃用。 将（MSAL）与应用程序集成的最简单方法。 使用 （AAD）保护您的应用程序 :monkey_face: 我们的代码猴子生活在 :white_medium_star: 的。 如果您喜欢他们在做什么，请养活他们！ ReactAAD MSAL 一个组件库，可轻松可靠地将Microsoft身份验证库与Azure Active Directory轻松集成。 该库注重灵活性，提供登录，注销和获取用户详细信息的功能，同时保持对基础MSAL库的访问以供高级使用。 :exclamation_mark: 该库与Microsoft的身份团队无关。 它被开发为开放源代码社区可以使用并为他们认为合适的工具。 :memo: 目录
react-msal:使用React登录MSALAzure
03-17
@ vtfk / react-msal MSAL（Azure auth）React挂钩 安装 npm install --save @vtfk/react-msal 用法 config.js export const config = { auth : { clientId : '<client>' , authority : 'https://login.microsoftonline.com/<tenant>' , redirectUri : '<https>' , postLogoutRedirectUri : '<https://direct-url.com' } , cache : { cacheLocation : 'sessionStorage' , storeA
React 入门，5个常用DEMO展示
热门推荐
Binger的博客
07-01 3万+
阅读前请看这里： * 了解js及jQuery的使用 * 对react有一定的了解，知道jsx的语法 * 这里只讲述如何使用react，并不介绍react的优缺点 如果不满足这些，建议先了解下，然后再看这篇文章 下面会讲述5个react的实例，虽然仅有5个，但在常用的开发中，几乎会包含大部分的情况，只要熟练掌握这5个demo，相信一定会解决大部分问题。demo中，所有
umi3.5微软的AD登录loginRedirect
weixin_46600931的博客
01-13 1541
顾名思义就是我先在msal服务登录成功，并成功通过msal api拿到登陆后信息accounts，isAuthenticated。根据accounts获取令牌（token），再将令牌与我们自己后端api去认证改用户是否可以登录此系统（欧莱雅一个公司几万人不是所有的人都可以登录所以加了这个接口认证）。重定向登录一定要组件化并要包裹layout 否者无法实现，这点给弹框登录的最大区别。上篇文章介绍了msal 的弹框登录，先介绍下重定向登录这个相对弹框登录要烦很多。此处自己研究了2天并实现了功能现分享给大家。
react 如何发布到Azure web app上
张峰的博客
04-12 445
1. 运行命令npm run start:build 运行FileZilla FTP Client 在web app 中把publish的文件下载下来 把url ，username ,password 填入FileZilla FTP Client中 将左侧文件右击 upload上去即可 ...
React中引入sass(scss)报错处理
weixin_46061574的博客
07-25 1697
React中使用scss
react项目异常报错解决
富朝阳的博客
04-22 3164
找不到模块“XXX”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中? 未知的编译器选项“allowImportingTsExtensions”。ReactDOM模块react-dom/client没有默认导出报错解决办法。导入路径不能以“.tsx”扩展名结束。考虑改为导入“./App.js”。An import path can only end with a '.tsx' extension when 'allowImporti
react项目中引入的组件在src外从而报错
qq_36384745的博客
08-31 2898
react项目中引入的组件在src外从而报错，react项目中无法引入src目录外的静态文件，ModuleScopePlugin插件，Relative imports outside of src/ are not supported
react中引入图片的方法以及在组件中引入public中的图片报错
Yi_Li_Tong_Wan_DOU的博客
11-23 2737
react图片引入 //首先通过import导入图片路径 import companyLogo from '../../public/companylogo.png'; //然后通过img标签使用 <img src={companyLogo} alt="" /> 使用后报错 错误的意思大致是引入的图片在src目录外 导致的报错 报错解决办法 在node_module文件夹下找到react-script/config/webpack.config.js const ModuleSco.
react-native-msal:适用于React Native的MSAL
05-02
React本机 现场演示（网络） 目录 安装 需要React Native> = 0.61 稳定版： $ yarn add react-native-msal 测试版： $ yarn add react-native-msal@beta 不要忘记在之后运行npx pod-install ！ 设置 在Azure...
npx create-react-app xxx创建项目报错的解决办法
10-15
在使用npx命令创建React项目时，有时会遇到报错问题。npx是npm 5.2.0版本引入的一个命令行工具，它能够方便地从npm注册表运行包中的代码。Create-react-app是React官方提供的一个脚手架工具，它允许开发者快速启动一...
引入react文件报错_初见React，一步一个坑
weixin_39755824的博客
12-20 1246
说在前头：新入职公司，react还不是很熟悉，就开始了官网重构的项目，刚开始开发速度很慢，而且语法也很多不规范的地方，在这里总结一下开发中遇到的坑。No.1???? React项目引入图片，less，css等报错手动搭建的webpack项目，最初你可能很多loader都没有装！所以你需要装一下各种loader，比如style-loader，css-loader，url-loader在build/webp...
react项目中，执行npm i 报错
weixin_42646650的博客
09-25 1191
react项目中，执行npm i 报错 报错现象如下图： 本以为是和npm包相关，尝试卸载了node(npm随之卸载)，重新安装node,发现问题依旧存在； 然后尝试重装镜像 npm config set registry https://registry.npm.taobao.org 发现竟然完美的解决了 ...
在react项目中引入less
weixin_44914088的博客
03-25 1493
首先先安装less和less-loader 运行以下命令： npm install less-loader less --save 然后要暴露出webpack.config.js文件，因为之前熟悉Vue的配置，不了解react，所以百度了一下，找到了一篇清晰一点解释的，然后我跟着执行了 npm run eject 发现还是报错，然后又去找报错的解决办法，然后看到一下命令 git init git add . git commit -m 'saving before ejecting' 跟
深入理解 JSX：构建 React 用户界面的利器
百赢出品，必属精品
09-26 232
是一种语法扩展，主要用于 React 开发中。它允许开发者在 JavaScript 代码中直接书写类似 HTML 的结构，使得构建用户界面变得更加直观和简洁。虽然 JSX 看起来像 HTML，但它实际上是 JavaScript 语法的一个扩展。定义：JSX（JavaScript XML）是 React 中的语法扩展，允许在 JavaScript 代码中编写类似 HTML 的结构。基本语法表达式：可以嵌入 JavaScript 表达式，使用{}包裹。标签：支持 HTML 标签和自定义组件。属性。
react通过下拉框选择多个，并展示在下方的方式
最新发布
qq18346342939的博客
09-26 84
二、form及选择展示。
现代前端框架实战指南：React、Vue.js、Angular核心概念与应用
m0_67484548的博客
09-23 1280
现代前端框架实战指南：React、Vue.js、Angular核心概念与应用
Vue3 之ref与reactive的区别
样子的博客
09-21 336
在Vue 3中，reactive和ref都用于创建响应式的数据，但它们有一些关键的区别： reactive用于创建响应式的对象，该对象的属性是深度响应式的。 ref用于创建响应式的基本类型数据，比如字符串、数字、布尔值等，它是reactive的简化版本，只提供了基本的响应式能力。 一、ref与reactive的区别 <template> <view class=""&...
react项目中使用cesium一直报错找不到cesium
10-25
在React项目中使用Cesium时，可能会出现找不到Cesium的错误。解决这个问题的方法是在webpack.config.js中添加CopyWebpackPlugin和NodePolyfillPlugin插件，并将Cesium的源文件复制到项目中。同时，在React组件中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值