【重磅更新】关注微信公众号即登录插件升级支持 Keycloak 22!

共 4042字,需浏览 9分钟

 ·

2023-08-30 12:59

前情提要

基于 keycloak 的关注公众号即登录功能的设计与实现》推出的 Keycloak 的关注公众号即登录插件的第一个版本,针对的是 Keycloak 7,随后在《Keycloak 关注公众号即登录插件升级了! 》将它升级支持 Keycloak 15,不久我将 Keycloak (https://keycloak.jiwai.win ) 升级到 16,发现仍然可用。后来,《关注公众号即登录插件适配 Keycloak 18》提到 Keycloak 升级到 18 后,又不兼容,于是再次升级。接下来我发现直接将 Keycloak 升级到 19、20、21,都不用修改插件,正常使用,只是由于 Keycloak 的管理员配置页面抛弃了 Angular,改为了 React,导致有些配置项不显示,但可以通过 Partial Export 和 Partial Import 的方式来进行配置,并不影响使用。

今天,再次升级插件,以适配 Keycloak 22。

在七夕节进行重磅更新,是因为感受到了来自知友的爱(尽管是男性知友)!这次没有知友的大力支持,做不到这个重磅更新。

重磅更新

有两点,一是使用了新的方式来实现配置项,从而可以在 Keycloak 22 的管理后台以 UI 方式进行配置,不再依赖 Partial Export 和 Partial Import。

二是手机端的微信登录也能正常工作了!这是由于手机端需要配置经过企业版认证了的服务号,而我一直没有,但是这次知友帮我提供了!

之前的版本,都只针对 PC 端的微信登录。因为个人公众号是没有权限调用相关的接口的,所以我使用自己的测试公众号,在关注者在 100 人以内都可以使用。目前也没有满,所以现在的 PC 版微信登录仍然走的是我的测试公众号。

手机端的微信登录,走了知友提供的公众号,因为我分别配置了两组不同的 App Id 和 App Secret。但只要你有通过企业认证的服务号,是完全可以只配置同一组公众号 App Id 和 App Secret 的。

在线体验

通过这个链接: https://keycloak.jiwai.win/realms/UniHeart/account/ ,点击登录,并选择“微信”即可。

手机登录体验

 


电脑登录体验
电脑登录,选择微信,还是需要用手机扫码的。扫码后,弹出以上测试公众号,如果点击关注或者已经关注,就会收到以上欢迎信息,然后电脑的网页会跳转至 Keycloak。如果是第一次微信登录,需要绑定邮箱,随后进入如下页面:


配置指引

Client ID 和 公众号 App Id;Client Secret 和 公众号 App Secret 都可以是一样的,即通过手机或者 PC 的微信登录时,都使用同一个公众号。但是以上截图用了两个不同的,其中公众号 App Id 使用了我的个人测试公众号,在关注人数在 100 以内时可以使用。

而手机端,则必须使用经过认证的企业公众号(特别感谢知友 hhhnnn 帮我提供,没有该服务号我没法调通手机端)。
域名验证
对于手机上使用微信登录,必须要使用通过企业认证过的微信公众号。在公众号后台,还必须将 Keycloak 服务的域名在微信公众号后台进行验证并保存,否则 Keycloak 服务没法调通微信的服务。

要验证域名,需要下载微信提供的一个 txt 文件,并上传至服务器的静态资源根目录。不同的情况有不同的配置方法,如果使用了 nginx 可以配置这样的记录:
server {
listen 80;
server_name keycloak.jiwai.win;

location / {
proxy_pass http://localhost:8080; # Forward to Keycloak
}

location /test.txt {
alias /path/to/static/files; # Replace with the actual path
try_files $uri =404;
}
}
然而,我的 Keycloak 实例部署在 heroku 上,域名的 DNS 解析放在 Cloudflare 上。


于是可以这样配置,在 Cloudflare 上添加一个 Worker,在默认代码的基础上,增加一条路由用来接收微信的域名验证请求,并返回对应的 txt 文件里的文本值:


然后,在域名的 Workers Routes 里添加一条路由规则,并将其 Worker 设置为新创建的那个。


排障指引
注意只需要将公众号的 appid 和 secret 配置好即可,不要使用微信开放平台的 appid,否则会在用户授权时出现如下错误:


在小程序里查看本文



浏览 59
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报