微信公众号登录
本文是 《三方登录》 的延伸,讲解 yudao-mall-uniapp
(opens new window) 商城小程序如何实现微信 公众号 登录的功能。
# 1. 公众号准备
友情提示:
本文,我们以“测试公众号”举例子,方便大家操作,认证一个公众号太难了!!!
① 参考 微信公众平台接口测试帐号申请 (opens new window) 链接,申请一个测试公众号。
② 将 appID
和 appSecret
配置,设置到后端项目 application-local.yaml
的 wx.mp
配置项中。如下图所示:
③ 修改“JS接口安全域名”,设置为前端的访问地址。例如说,现在本地是 http://127.0.0.1:3000
。如下图所示:
注意:自己需要关注下自己的测试公众号!!!
④ 修改“网页授权获取用户基本信息”,设置为前端的访问地址。例如说,现在本地是 http://127.0.0.1:3000
。如下图所示:
补充说明:如果你是正式的公众号,需要额外看下这部分的内容:
① 设置“IP白名单”,在公众号的 [设置与开发 - 安全中心] 菜单,如下图所示:
② 在公众号的 [设置与开发 - 公众号设置] 菜单,设置“JS接口安全域名”、“JS接口安全域名”、“网页授权域名”,如下图所示:
- 设置时,需要外网可访问,可以需要使用 natapp 进行内网穿透
- 上图的
MP_verify_XXXXXXXXXXXXXXXX.txt
文件,可以直接放在yudao-mall-uniapp
商城项目的根目录
# 2. 代码实现
# 2.1 项目启动
① 参考 《快速启动【前端】》 文档的「2. uni-app 商城移动端」小节,将 yudao-mall-uniapp
商城项目跑起来。
② 下载 微信开发者工具 (opens new window),并进行安装。安装后,选择「公众号网页项目」。如下图所示:
# 2.2 微信 JSSDK
访问 http://127.0.0.1:3000/
地址(其它地址也可以),它会触发 微信 JSSDK (opens new window) 初始化的逻辑,对应前端 sheep/libs/sdk-h5-weixin.js
文件的 #init(...)
方法中。
微信 JSSDK 所需要的签名,由后端的 AppAuthController 的 #createWeixinMpJsapiSignature(...)
方法所提供。
# 2.3 登录流程
友情提示:
可以简单阅读下 《微信官方文档 —— 网页授权》 (opens new window) 文章。
① 访问 http://127.0.0.1:3000/#/pages/user/info
地址,触发弹出“登录窗口”,对应前端 sheep/components/s-auth-modal/s-auth-modal.vue
组件。如下图所示:
② 点击「微信登录」图标,触发微信公众号登录。前端核心实现都在 sheep/platform/provider/wechat/officialAccount.js
的 #login(...)
方法中。它一共包含 2 个步骤。
③ 【第一步】前端调用后端的 AppAuthController 的 #socialAuthRedirect(...)
方法,获得微信公众号的登录地址,并进行跳转。效果如下图:
ps:为了在微信登录成功后,可以回到登陆前的 URL 地址,会将该 URL 存储到 uni.setStorageSync('returnUrl', location.href)
中。
④ 【第二步】点击「同意」按钮,跳转回前端的 pages/index/login.vue
页面,进行 真正的 微信登录逻辑。
此时,前端从 URL 中解析到微信回调提供的 code
授权码参数,调用后端的 AppAuthController 的 #socialLogin(...)
方法,进行登录逻辑。注意:
- 情况一:如果该微信用户已经绑定会员用户,则直接进行登录
- 情况二:如果该微信用户没有绑定会员用户,则会自动创建一个会员用户,并进行登录。下次重新登录时,就走【情况一】的逻辑。
ps:登录成功后,通过 uni.getStorageSync('returnUrl')
获得登录前的 URL 地址,进行跳转。