oidc-client.js踩坑吐槽贴
前言
前面选用了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.0 与 OAuth2.1
吓了一跳,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兼容,就要被骂了
啥是PKCE?
大白话,就是防止授权码(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(随机字符串)
为啥要喷oidc-client.js里PKCE的实现?
- 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;
}
最终效果
