oauth2.0自定义token算法（网站接入OAuth2.0扩展协议PKCE）

在了解了OAuth2.0的扩展协议PKCE（细节可以在由Raycast to flomo了解到OAuth 2.0之PKCE中看到），我也想试试，尝试接入一把。

使用npm包oidc-provider，具体可以源码及文档https://github.com/panva/node-oidc-provider

根据文档里面的example的express简单修改下。

修改

clients: [ { client_id: 'client_id', client_secret: 'client_secret', redirect_uris: ['http://127.0.0.1:3000/callback'], grant_types: ['refresh_token', 'authorization_code'], code_verifier: '2Ealc1zZfDjmm-RNct0U7POlQmj.-z9fFb2cuk4eZw_LyVZEMp2B.Uwl5t3RvX6RCovo7qkZdP6-HEh9-lQanPKrO_20j.7kyIzWc-7_Z3GB2HXmwCXkSflPh7AMJ59m', code_challenge: 'LVogXRp-NbtBYMm1ed88xNwvmuoanfBcbWoeKYzeOEU', } ],

配置上code_verifier 和对应的code_challenge ，

我们可以直接在线生成 => pkce-generator

直接运行node example/express.js就可以开始调试了。

在http://localhost:3000/.well-known/openid-configuration 页面我们可以看到生效的配置和被oidc-provider接管的路由地址。

浏览器访问 http://localhost:3000/auth?client_id=client_id&redirect_uri=http://localhost:3000/callback&response_type=code&code_challenge=LVogXRp-NbtBYMm1ed88xNwvmuoanfBcbWoeKYzeOEU&code_challenge_method=S256&scope=openid profile &nonce=123 &state=321

其中的code_challenge_method=S256别忘了。

如果未发现报错的话，会出现这样的界面

目前是没有校验登录名和密码的，随便输入即可。 点击“Sign-in”后

点击“Continue”后

我们可以看到已经跳转到我们之前填的redirect_uris地址，并且页面上也带上了code，这个就是authorization code。

到这里已经算完成了第一步了。

这里界面上显示有错误，是因为这个/callback路由地址我们并没有进行配置，并且oidc-provider包也没有接管此路由。

获取token

我们需要在/callback拿到的authorization code去获取最终的access_token，我们可以暂时先用postman来实现，后面会补上。

401错误？这是为什么？

我们可以自己在项目打印下出错的信息或者直接调试定位。 我们可以在example/express.js加上console

function handleClientAutherrors({ headers: { authorization }, oidc: { body, client } }, err) { console.log('handleClientAuthErrors -> ',err, authorization, body, client); } provider.on('grant.error', handleClientAuthErrors); provider.on('introspection.error', handleClientAuthErrors); provider.on('revocation.error', handleClientAuthErrors);

因为provider会在关键节点emit消息出来，所以我们直接on一下就好

这下我们就可以看到报错的一些具体信息了

我们看到打印消息如下

error_detail: the registered client token_endpoint_auth_method does not match the provided auth mechanism

不支持client_secret_basic ？但是我们在配置里面

看到是支持client_secret_basic 这种方式的啊。 这个其实因为我们没有在请求头里面加上Authorization信息。

加上之后就成功了。

code换取的token

前面我们是用postman调用的/token用authorization code换取的access_token，现在我们加上自己的/callback路由实现，以方便在/callback直接完成换取access_token过程。

// /example/routes/express.js const querystring = require('querystring'); const base64url = require('../../lib/helpers/base64url'); app.get('/callback', (req, res) => { const data = { code: req.query.code, code_verifier: '2Ealc1zZfDjmm-RNct0U7POlQmj.-z9fFb2cuk4eZw_LyVZEMp2B.Uwl5t3RvX6RCovo7qkZdP6-HEh9-lQanPKrO_20j.7kyIzWc-7_Z3GB2HXmwCXkSflPh7AMJ59m', grant_type: 'authorization_code', client_id: 'client_id', redirect_uri: 'http://localhost:3000/callback', }; axios.post('http://localhost:3000/token', querystring.stringify(data), { headers: { authorization: `Basic ${base64url.encode('client_id:client_secret')}`, 'content-type': 'application/x-www-form-urlencoded', }, }).then((result) => { console.log(result.data); res.send(result.data); }).catch((err) => { console.log('err -> ', err); res.send('error'); });

成功完成用authorization code换取的access_token过程，有了access_token，后续就都有权限了。

补充

目前oidc-provider官方的example是允许随便输入登录名和密码，因为为了让大家快速上手，在配置里面的findAccount写的是永远都是查找到账号

具体代码在example/support/accout.js

这里即使找不到id也会重新生成一个Account，所以始终能成功。

,