- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
前面选用了IdentityServer4做为认证授权的基础框架,感兴趣的可以看上篇<微服务下认证授权框架的探讨>,已经初步完成了authorization-code与implicit的简易demo(html+js 在IIS部署的站点),并实现了SSO,本想着将Demo迁移到vue工程是轻而易举,毕竟也没啥东西,最终拿到access_token,存储到store里,跟传统的jwt基本上一样,不出意外,意外总是会发生,不然也没办法水一篇帖子,玩笑归玩笑,如果有理解错误,或者使用不当的地方,欢迎拍砖,以免误人子弟 。
- vue2.0 cli
- .net core 6.0
这里为什么不用vue3,尝试过,最终放弃了,本来就是半吊子的前端水平,vue3里的vite跟ts,极大的增加了学习成本,包升级后一些莫名其妙的bug,特别是vite,一些bug提示对我来说特别陌生与不友好(项目不报错,js控制台报错,好像是兼容之类的问题),总之还是太菜,解决不了,又菜又爱玩 。
- http://localhost:3000/test 测试页面,用来代替原来的登录页,用于保存access_token
- http://localhost:3000/callback 回调页面,用于将code换取access_token
- http://localhost:3000/logout 退出页面,用于清除localStorage缓存
在IdentityServer4里,对于前端工程提供了oidc-client.js这个包,在github开源,不过在2021年左右就停止维护了,这里我收集了两条跟本次吐槽相关的Issues https://github.com/IdentityModel/oidc-client-js/issues/1393 https://github.com/IdentityModel/oidc-client-js/issues/1360 。
吓了一跳,OAuth2.1是个什么玩意?来看看GPT的回答 原来官方还没有这个东西,市面上一些对OAuth2.0拓展或者增强的东西,搞了个OAuth2.1,或许只是一个草案,本次吐槽的坑点就是oidc-client.js里PKCE的使用,PKCE全称是 Proof Key for Code Exchange, 在2015年发布, 它是 OAuth 2.0 核心的一个扩展协议, 所以可以和现有的授权模式结合使用,比如 Authorization Code + PKCE,东西是好东西,但是强制使用,不与之前的OAuth2.0兼容,就要被骂了 。
大白话,就是防止授权码(code)被坏人拦截,而设计的一个拓展协议,坏人拿到了code也换取不了access_token,它的实现过程也非常简单,三两句就能讲明白,就不画图了,直接上代码截图 三个角色,授权服务,前端工程,后端工程 。
- 认证中心登录,回调页面上多了两个参数
code_challenge_method 签名方法 code_challenge 签名 。
- 使用code换取access_token的时候,要多带一个code_verifier(随机生成的一个字符串) 参数,否则兑换失败
code_challenge = code_challenge_method(code_verifier) 。
- 协议约定,如果在认证中心生成code的时候,携带了code_challenge_method与code_challenge,那么在使用code兑换
access_token的时候,必须携带code_verifier
如果这还听不明白,那我举个古代银票防伪的例子 张三去钱庄存银子的时候,跟钱庄做了约定,留下一句暗号(DNF)跟暗号的生成方式(取每个字的首字符)给钱庄,兑换者在用银票换银子的时候,钱庄会检查这张银票有没有跟张三做约定,如果有约定,则按照约定让兑换者提供明文,钱庄用兑换者提供的明文跟张三提供的暗号生成方式,来生成暗号,如果一致则允许兑换银子 银票 = code 暗号 = 签名(code_challenge ) 暗号的生成方式 = 签名方法(code_challenge_method ) 明文 = code_verifier(随机字符串) 。
- PKCE关不了
var config = {
authority: "https://localhost:6201",
...
pkce:false
};
前面Issues有提过,提供了这个配置,但是不生效,总之一定会带上 。
- 回调逻辑存在问题
var userManager = new Oidc.UserManager(config);
userManager.signinRedirectCallback().then(function(user) {
// 登录成功,可以在这里处理登录后的逻辑,例如重定向到首页或显示欢迎信息
console.log('用户已登录:', user);
window.location.href = '/home'; // 重定向到应用的主页
}).catch(function(error) {
// 处理登录失败的情况
console.error('登录失败:', error);
alert('登录过程中发生错误,请重试。');
});
这是oidc-client.js里回调页面的处理,它自动做了处理,但是它绕过后端程序,直接向认证服务发起,这里返回400错误,是因为该客户端必须校验秘钥,我们一般将秘钥存储在后端程序,前端程序请求后端,后端带上客户端秘钥,将请求转发给认证服务,这才是authorization-code标准的认证流程,也相对安全 。
- 相同的版本,在(html+js)站点下,并没有启用PKCE,而在vue-cli工程,默认启用PKCE
这点也是我最郁闷的地方,最开始我怀疑是版本问题导致的,后面我降级到相同的版本,但是结果却还是一样,折腾了好久,依旧没有解决,******* 。
- 后端强行关闭PKCE认证
既然vue-cli工程里发起的获取code,会携带PKCE认证信息,那我在重定向地址里,把这两个参数移除,那就搞定收工了 。
- 啃oidc-client.js源码,翻Issues,看看有没有转机
先看Issues,把问题关键字贴进去搜一下,很遗憾没有找到有用的东西,源码简单的翻了下,也没啥帮助 。
- 逆向oidc-client.js,重写回调页面逻辑
既然我们缺code_verifier,那就去找,打印config.userStore,就找到了,这得感谢作者没有每次都删除该对象,不然可能就真的芭比Q了,知道了位置,我们直接从Localstorage取,然后根据时间戳取最新的那条记录,然后提取出code_verifier 。
function getCodeVerifier() {
const allKeys = [];
const items =[];
for (let i = 0; i < localStorage.length; i++) {
allKeys.push(localStorage.key(i));
}
const pattern = /^oidc\./;
const oidcKeys = allKeys.filter(key => pattern.test(key));
for(let i =0;i< oidcKeys.length;i++){
const str = localStorage.getItem(oidcKeys[i]);
if(str != null && str != ''){
const model = JSON.parse(str);
if(model.created == '' || model.created == null || model.created == undefined){
continue
}
items.push(model)
localStorage.removeItem(oidcKeys[i])
}
}
const item = items.reduce((nearest, current) => {
return (nearest.created > current.created) ? nearest : current;
});
return item.code_verifier;
}
最终效果 。
最后此篇关于oidc-client.js踩坑吐槽贴的文章就讲到这里了,如果你想了解更多关于oidc-client.js踩坑吐槽贴的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
正在复制的问题是,当sew呈现登录页面时,然后我们继续执行身份验证,现在将我们重定向到网站的仪表板,此时我们继续关闭会话,并且在之前的交互中生成的这些cookie没有被删除。这个问题是重复性的,并且一
我遇到了与这篇文章中相同的错误。 flask-oidc-client-exchange-error 虽然我想要一个解决该问题的答案,但我认为主要问题是没有维护 flask-oidc 库,并且它使用已弃
我正在使用带有 angular 7 的 oidc-client,并且我想启用日志记录。该文档建议我可以执行以下操作 Oidc.Log.logger = console; 我无法完成这项工作,因为 Oi
我在安装 go 时遇到了 k8s-oidc-helper 包的问题。但是,当我用它运行任何命令时,它会给出命令未找到错误。我在 ubuntu 16.04 VM 上运行它。我该如何解决这个问题? 最佳答
我正在编写一个react+flux应用程序,并且我已经将IdentityServer设置为OpenID Connect提供程序。 IdentityServer 人员提供了两个库,使处理客户端变得更加容
当我在 docker compose 中使用 Quarkus 和 Keycloak 时,我遇到了一个非常令人困惑的问题。当我设置环境变量以覆盖开发配置又名 quarkus.oidc.auth-serv
前言 前面选用了IdentityServer4做为认证授权的基础框架,感兴趣的可以看上篇<微服务下认证授权框架的探讨>,已经初步完成了authorization-code与implici
我有一个使用 redux-oidc 对身份服务器进行身份验证的设置。我可以登录,并且可以看到 silenRenew 在 token 过期时按预期工作。 不过有一个问题。如果我打开我的网站并让计算机进入
我试图在一个简单的 flask 应用程序中使用 Flask-oidc,以便通过 keycloak 添加身份验证。 但是,一旦我使用有效凭据登录,它就会返回到不存在的/oidc_callback。 fl
我正在使用 oidc JS cilent 库 OIDC JS 我有连接到 的客户端代码WSO2 IDP 服务器使用 openID 连接端点。流程是 隐式 在 WSO2 服务器上配置 WSO2 版本:w
我正在使用 angular-oauth2-oidc 在我的 Angular (8) 应用程序上设置 B2C。 我有一个登录和退出策略,并且我已经成功地设置了 angular-oauth2-oidc 服
我的 React 容器如下所示: class App extends React.Component { componentDidMount() { if (this.prop
我有一个使用 AAD B2C 保护的 SPA。 SPA 与同样受 AAD B2C 保护的 API 进行对话。现在,用户可以将授权 header 从 Chrome 复制/粘贴到 Postman 等工具,
我正在运行 IdentityServer4 的 Javascript 客户端示例,配置如下所示: var config = { authority: "https://localhost:44
我已经为 OIDC 设置了一个注册应用程序,并将其配置为在 Azure AD 上用于各种用途。 我集成的应用程序使用 preferred_username在 ID token 中用于各种事物。 Azu
我一直在将 keycloak 配置为 Kubernetes 集群上 eclipse hono 的身份验证和授权服务提供程序(使用 Rancher)。 文档对此几乎没有提供任何帮助,并且关于此主题的每项
我已经为 OIDC 设置了一个注册应用程序,并将其配置为在 Azure AD 上用于各种用途。 我集成的应用程序使用 preferred_username在 ID token 中用于各种事物。 Azu
我有一个 asp.net 核心应用程序,上面运行着一个 angular 2。我正在使用 oidc-client.js 库来处理登录。目前,如果用户已经登录并点击站点链接,则身份验证会正确进行,用户会被
无法使用 go 安装包。我想安装 k8s-oidc-helper 包。根据安装指南,我必须安装并运行 k8s-oidc-helper 命令。但是当我尝试它时,它说找不到命令 k8s-oidc-help
我的理解是 - oidc-client 生成随机数和状态并将其发送到授权服务器(身份服务器 4)。用于防止CSRF攻击、重放攻击。 State 和 nonce 通过下面的 signinredirect
我是一名优秀的程序员,十分优秀!