微信公众号登录

前置阅读文章：
- 《用户体系》
- 《三方登录》
本文是 《三方登录》 的延伸，讲解 dtpc-mall-uniapp商城小程序如何实现微信 公众号 登录的功能。

## 1. 公众号准备
① 参考 微信公众平台接口测试帐号申请 (opens new window)链接，申请一个测试公众号。
② 将 appID 和 appSecret 配置，设置到后端项目 application-local.yaml 的 wx.mp 配置项中。如下图所示：

![](/media/202408/2024-08-28_114129_382672.png)

![](/media/202408/2024-08-28_114136_228652.png)
③ 修改“JS接口安全域名”，设置为前端的访问地址。例如说，现在本地是 http://127.0.0.1:3000。如下图所示：

![](/media/202408/2024-08-28_114146_271994.png)
注意：自己需要关注下自己的测试公众号！！！
④ 修改“网页授权获取用户基本信息”，设置为前端的访问地址。例如说，现在本地是 http://127.0.0.1:3000。如下图所示：

![](/media/202408/2024-08-28_114211_099005.png)

> <span style="font-family:楷体">补充说明：如果你是正式的公众号，需要额外看下这部分的内容：
① 设置“IP白名单”，在公众号的 [设置与开发 - 安全中心] 菜单，如下图所示：
![](/media/202408/2024-08-28_114228_608530.png)
② 在公众号的 [设置与开发 - 公众号设置] 菜单，设置“JS接口安全域名”、“JS接口安全域名”、“网页授权域名”，如下图所示：

![](/media/202408/2024-08-28_114244_296854.png)
设置时，需要外网可访问，可以需要使用 natapp 进行内网穿透
上图的 MP_verify_XXXXXXXXXXXXXXXX.txt 文件，可以直接放在 yudao-mall-uniapp 商城项目的根目录

</span>

## 2. 代码实现
### 2.1 项目启动
① 参考 《快速启动【前端】》 文档的「2. uni-app 商城移动端」小节，将 dtpc-mall-uniapp 商城项目跑起来。

② 下载[ 微信开发者工具](http://https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html " 微信开发者工具") ，并进行安装。安装后，选择「公众号网页项目」。如下图所示：

![](/media/202408/2024-08-28_114539_887029.png)

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 登录流程
> <span style="font-family:楷体">友情提示：

可以简单阅读下 [《微信官方文档 —— 网页授权》](http://https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html "《微信官方文档 —— 网页授权》") 文章。</span>

① 访问 http://127.0.0.1:3000/#/pages/user/info 地址，触发弹出“登录窗口”，对应前端 sheep/components/s-auth-modal/s-auth-modal.vue 组件。如下图所示：

![](/media/202408/2024-08-28_114747_245664.png)
② 点击「微信登录」图标，触发微信公众号登录。前端核心实现都在 sheep/platform/provider/wechat/officialAccount.js 的 #login(...) 方法中。它一共包含 2 个步骤。

③ 【第一步】前端调用后端的 AppAuthController 的 #socialAuthRedirect(...) 方法，获得微信公众号的登录地址，并进行跳转。效果如下图：

![](/media/202408/2024-08-28_114800_097430.png)

ps：为了在微信登录成功后，可以回到登陆前的 URL 地址，会将该 URL 存储到 uni.setStorageSync('returnUrl', location.href) 中。
④ 【第二步】点击「同意」按钮，跳转回前端的 pages/index/login.vue 页面，进行 真正的 微信登录逻辑。
此时，前端从 URL 中解析到微信回调提供的 code 授权码参数，调用后端的 AppAuthController 的 #socialLogin(...) 方法，进行登录逻辑。注意：
- 情况一：如果该微信用户已经绑定会员用户，则直接进行登录
- 情况二：如果该微信用户没有绑定会员用户，则会自动创建一个会员用户，并进行登录。下次重新登录时，就走【情况一】的逻辑。
ps：登录成功后，通过 uni.getStorageSync('returnUrl') 获得登录前的 URL 地址，进行跳转。