前置阅读文章：

• 《用户体系》
• 《三方登录》

本文是 《三方登录》 的延伸，讲解 yudao-mall-uniapp (opens new window) 商城小程序如何实现微信 小程序 登录的功能。

1. 小程序准备

友情提示：

本文，我们以“测试小程序”举例子，方便大家操作，认证一个小程序太难了！！！

① 参考 微信小程序测试号申请 (opens new window) 链接，申请一个测试小程序。

② 将 AppID 和 AppSecret 配置，设置到后端项目 application-local.yaml 的 wx.miniapp 配置项中。如下图所示：

③ 使用 HBuilder 打开 yudao-mall-uniapp 项目根目录的 manifest.json 文件，将微信小程序配置的 AppID 改成你自己的。如下图所示：

2. 代码实现

2.1 项目启动

① 下载 微信开发者工具 (opens new window)，并进行安装。

② 参考 《快速启动【前端】》 文档的「2. uni-app 商城移动端」小节，将 yudao-mall-uniapp 商城项目跑起来。

不过要注意，HBuilder 运行时，选择「微信开发者工具」。如下图所示：

③ 运行成功后，可以在微信开发者工具中，看到如下界面：

如果请求报错，注意勾选下“不校验合法域名、web-view（业务域名）”选项。

补充说明：如果你是正式的小程序，需要额外看下这部分的内容：

① 在小程序的 [管理 -> 成员管理] 菜单，添加自己微信号为开发者。如下图所示：

否则，使用 HBuilder 运行时，会报“[微信小程序开发者工具] [error] Error: Fail to open IDE”！

2.2 登录流程

① 点击「我的」菜单，再随便点个子菜单，例如说“拼团订单”，触发弹出“登录窗口”，对应前端 sheep/components/s-auth-modal/s-auth-modal.vue 组件。如下图所示：

有两种登录方式：微信小程序登录 (opens new window)、手机快速验证登录 (opens new window)

② 方式一：【微信小程序登录】点击「微信登录」图标，触发微信小程序登录。前端核心实现都在 sheep/platform/provider/wechat/miniProgram.js 的 #login(...) 方法中。

此时，前端调用微信小程序获得“临时” code 授权码参数，之后调用后端的 AppAuthController 的 #socialLogin(...) 方法，进行登录逻辑。注意：

• 情况一：如果该微信用户已经绑定会员用户，则直接进行登录
• 情况二：如果该微信用户没有绑定会员用户，则会自动创建一个会员用户，并进行登录。下次重新登录时，就走【情况一】的逻辑。

之后，会弹出“授权信息”窗口，对应 sheep/components/s-auth-modal/components/mp-authorization.vue 组件。如下图所示：

• 注意：该弹窗仅仅用于微信小程序的昵称、头像的获取，用户实际已经登录成功了。

③ 方式二：【手机快速验证登录】点击「快捷登录」按钮，触发一键登录。前端核心实现都在 sheep/platform/provider/wechat/miniProgram.js 的 #mobileLogin(...) 方法中。

此时，前端调用用微信小程序获得“临时” code 授权参数 + “手机” code 授权参数，之后调用后端的 AppAuthController 的 #weixinMiniAppLogin(...) 方法，进行登录逻辑。注意：

• 情况一：如果该手机已经注册用户，则直接进行登录
• 情况二：如果该手机没有注册用户，则会自动创建一个会员用户，并进行登录。下次重新登录时，就走【情况一】的逻辑。

为什么此时要获得“临时” code 授权参数呢？主要想把微信小程序的 openid 和用户绑定起来，毕竟方式二【手机快速验证登录】是需要收费的！！！