前情提要

《 基于 keycloak 的关注公众号即登录功能的设计与实现 - Jeff Tian的文章 - 知乎》推出的 Keycloak 的关注公众号即登录插件的第一个版本，针对的是 Keycloak 7，随后在《Keycloak 关注公众号即登录插件升级了！ - Jeff Tian的文章 - 知乎》将它升级支持 Keycloak 15，不久我将 Keycloak （https://keycloak.jiwai.win ）升级到 16，发现仍然可用。后来，《关注公众号即登录插件适配 Keycloak 18 - Jeff Tian的文章 - 知乎》提到 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 可以配置这样的记录：

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 上。