使用WordPress建站,那么第三方登录肯定是必不可少的,子比主题支持丰富的社交帐号登录,例如微信登录就是十分常见的登录方式,zibll子比主题更新V5.5之后,带来了微信公众号登录的功能,对于很多已经开通了微信公众号就更加方便了。
使用微信公众号登录,可直接免跳转扫码登录,在微信APP内支持无感登录,用户体验更好,还能帮助公众号引流,另外也就不用再申请微信开放平台的网页授权了
效果预览
首先我看一下微信公众号的登录页面预览:
![图片[1]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/06/%E5%9B%BE%E7%89%87-6.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_652)
特点及功能:
- 免跳转直接扫码,用户体验更好
- 微信APP内无需扫码无感登录(V5.6)
- 微信APP内支持自动登录(V6.0)
- 支持添加关键词自动回复功能(V6.0)
- 支持设置自定义菜单功能(V6.0)【查看教程】
- 支持设置用户首次关注以及扫码的自动消息回复
- 启用此功能后,可开启微信官方JSAPI支付功能(V6.0起,微信JSAPI支付不再依赖此功能)
接入教程
接下来我们就一步一步的开始接入教程,首先我们整理一下,大致为以下流程:
- 申请并开通微信公众号服务号,订阅号不可以
- 认证微信公众号(必须要认证,未认证的无法使用)
- 获取AppID和AppSecret并填入主题设置
- 添加微信公众号IP白名单
- 设置微信公众号的服务器URL配置
- 设置微信公众号JS接口安全域名
申请微信公众号以及认证百度已经有很多教程了,按照流程一步一步来就行了,这里就不在阐述了。
开始前可以在接口权限
中检查是否已经拥有网页授权获取用户基本信息
以及生成带参数二维码
的权限:如图所示
![图片[2]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/12/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%95%99%E7%A8%8B.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_685)
接下来针对已经申请并认证成功的微信公众号做详细的接入教程。
获取AppID和AppSecret
登录微信公众号平台,进入设置与开发->开发->基本配置
1.获取AppID和AppSecret并填入主题设置->用户&互动->社交登录->微信登录(公众号模式)
2.点击配置IP白名单,将网站服务器的IP地址加入到白名单
![图片[3]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/06/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E7%99%BB%E5%BD%95%E6%95%99%E7%A8%8B-2.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_861)
微信公众号的服务器URL配置
首先进入主题设置->用户&互动->社交登录->微信登录(公众号模式):复制服务器接口URL
,并设置一个Token并保存!
然后进入公众号平台->设置与开发->开发->基本配置->服务器配置:点击修改,填写复制的接口URL
以及Token
保存成功之后,记得点击启用
![图片[4]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/06/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%95%99%E7%A8%8B-13.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_604)
![图片[5]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/06/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E7%99%BB%E5%BD%95%E6%95%99%E7%A8%8B-7.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_864)
![图片[6]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/07/%E5%9B%BE%E7%89%87-5.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_792)
注意事项:
- token可以随意填写,主题设置和微信平台保持一致即可
- 必须先设置主题设置的token并保存,然后再去微信公众号平台提交服务器配置,顺序反了则会失败
- 消息加解密方式必须选择明文模式
- 提交成功之后记得启用服务器配置
设置JS接口安全域名
首先进入主题设置->用户&互动->社交登录->微信登录(公众号模式):复制JS接口安全域名
然后进入公众号平台->公众号设置->功能设置->JS接口安全域名:点击设置,根据流程设置好刚刚复制的域名
注意:如果未设置好JS接口安全域名,仍然可以使用扫码登录,但是在微信APP内会提示redirect_uri错误
![图片[7]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/07/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%95%99%E7%A8%8B-14.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_604)
![图片[8]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/06/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%95%99%E7%A8%8B-11.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_649)
![图片[9]-WordPress主题-zibll子比主题使用微信登录-微信公众号登录详细教程](https://oss.zibll.com/zibll.com/2021/07/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%95%99%E7%A8%8B-16.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_762)
感谢您的来访,获取更多精彩文章请收藏本站。
