一为主题第三方登录-网站接入微信公众号登录图文教程

2021-08-27 发布于OneNav

一为主题网站接入微信公众号登录教程,OneNav主题更新之后,带来了微信公众号登录的功能,对于很多已经开通了微信公众号就更加方便了。

使用微信公众号登录,可直接免跳转扫码登录,在微信APP内支持无感登录,用户体验更好,还能帮助公众号引流,另外也就不用再申请微信开放平台的网页授权了

效果预览

首先看一下微信公众号的登录页面预览:

一为主题第三方登录-网站接入微信公众号登录图文教程

特点及功能:

  • 免跳转直接扫码,用户体验更好
  • 微信APP内无需扫码无感登录
  • 支持设置用户首次关注以及扫码的自动消息回复

接入教程

接下来就一步一步的开始接入教程,大致流程为以下6步:

  1. 申请并开通微信公众号
  2. 认证微信公众号
  3. 获取AppID和AppSecret并填入主题设置
  4. 添加微信公众号IP白名单
  5. 设置微信公共号的服务器URL配置
  6. 设置微信公共号JS接口安全域名

申请微信公众号以及认证请百度找教程,按照流程一步一步来就行了。

获取AppID和AppSecret

登录微信公众号平台,进入设置与开发->开发->基本配置

1.获取AppID和AppSecret并填入主题设置->社交登录->微信登录(公众号模式)

2.点击配置IP白名单,将网站服务器的IP地址加入到白名单

一为主题第三方登录-网站接入微信公众号登录图文教程

微信公共号的服务器URL配置

首先进入主题设置->社交登录->微信登录(公众号模式):复制服务器接口URL,并设置一个Token并保存!
然后进入公众号平台->设置与开发->开发->基本配置->服务器配置:点击修改,填写复制的接口URL以及Token
保存成功之后,记得点击启用

一为主题第三方登录-网站接入微信公众号登录图文教程
一为主题第三方登录-网站接入微信公众号登录图文教程

注意事项:

  • token可以随意填写,主题设置和微信平台保持一致即可
  • 必须先设置主题设置的token并保存,然后再去微信公众号平台提交服务器配置,顺序反了则会失败
  • 消息加解密方式必须选择明文模式
  • 提交成功之后记得启用服务器配置

设置JS接口安全域名

首先进入主题设置->社交登录->微信登录(公众号模式):复制JS接口安全域名
然后进入公众号平台->公众号设置->功能设置->JS接口安全域名和网页授权域名:点击设置,根据流程设置好刚刚复制的域名

注意:如果未设置好[JS接口安全域名]和[网页授权域名],仍然可以使用扫码登录,但是在微信APP内会提示redirect_uri错误

一为主题第三方登录-网站接入微信公众号登录图文教程
仍然有问题? 我们要如何帮助您?
One Nav 导航主题