本文章实现的是微信小程序获取微信用户信息授权登录。
实现微信小程序用户登录的方案有三种,本文章实现的是第三种。
百度搜索“微信公众平台”进入官网。输入账号密码之后,使用管理员的微信扫描二维码,确认登录。登录完成之后即可进入小程序的编辑页面。
方案一 只获取用户对应的openId,来创建标记用户 方案二 获取用户对应的openId与微信绑定的手机来,来创建标记用户 方案三 获取微信用户的基本信息,来创建标记用户。
方案一 只获取用户对应的openId,来创建标记用户 方案二 获取用户对应的openId与微信绑定的手机来,来创建标记用户 方案三 获取微信用户的基本信息,来创建标记用户。
首先要下载微信官方的微信Web开发者工具。打开微信公众平台(mp.weixin.qq.com),找到右下方的小程序模块,点击「开发」按钮;点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」。可以看到,开发工具提供 Windows。
1 微信小程序代码
我这里实现的页面只是一个登录按钮
<view style=&39;>2. 同意当前小程序获取我的个人信息;<button type=&34; bindtap=&34;>授权微信头像与昵称</button></view>复制代码
企业回番薯借阅隶属于云阁(上海)信息科技有限公司,专注为企业职工书屋、儿童绘本馆、社区书屋等提供专业的图书借阅管理移动端云解决方案。【番薯借阅】是新一代图书借阅管理系统,为数千家企事业单位,工会,大学,绘本馆,提供专业/简单/易用的图书借阅。
然后在对应的 页面js 中,当进入这个登录页面时,调用 wx.login 获取 code 核心代码如下
这里保存了临时的 loginRes ,这个 loginRes 中的 code 只能使用一次,所以在下面调用如果出现错误 就需要退出页面重新进入,重新获取
这里是需要先扫码打开微信小程序,然后在小程序里面有个扫码登录的按钮,再去扫描右侧的二维码实现登录。实现原理 1、打开网站生成一个带参数的二维码;2、打开微信小程序后扫描刚生成的二维码;3、小程序将该微信用户的openID。
1.1 获取 微信用户信息
用户点击按钮,调用获取微信获取用户信息的接口 wx.getUserProfile
// 获取用户昵称头像getUserProfile() {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗wx.getUserProfile({desc: &39;,//
微信授权通过后,就需要请求业务接口后台,来解密用户信息
requestAuthFunction(infoRes) {wx.request({url: api.AuthLoginByWeixin, method: &34;, header: {&39;: &39;}, data: {code: this.data.loginRes.code, rawData: infoRes.rawData,//用户非敏感信息signature: infoRes.signature,//签名encryptedData: infoRes.encryptedData,//用户敏感信息iv: infoRes.iv //解密算法的向量}, success: function (res) {console.log(&39;);console.log(&34;,res)wx.setStorageSync(&39;,res.data.data.access_token);wx.setStorageSync(&39;,res.data.data);console.log(&34; + res.data.data.access_token);wx.navigateBack();}, fail: function (error) {//调用服务端登录接口失败console.log(error);wx.navigateBack();}});},复制代码
这种方法需要将本地存储的登录态发送到小程序的服务端,服务端判断为无效登录态时再返回需重新执行登录过程的消息给小程。另一种方式可以通过调用wx.checkSession检查微信登陆态是否过期: 1.如果过期,则发起完整的登录流程。
我这里请求 header 添加 了appId,是兼容支持多个小程序的配置,在业务后台处理里,需要根据 appId 来查询小程序的配置。
2 业务后台代码
微信业务处理的功能在 wx-service 服务中,在《SpringCloud 微信小程序授权登录 获取openId SessionKey【SpringCloud系列13】》 中有概述
@Slf4j@RestController@AllArgsConstructor@RequestMapping(&34;)public class WxUserController {@Autowiredprivate WxAppLoginService wxAppLoginService;/** * 小程序用户登录 * * @param request * @param loginDTO * @return */@ApiOperation(value = &34;)@PostMapping(&34;)public Map<String,Object> loginMa(HttpServletRequest request,@RequestBody MiniLoginRequest loginDTO) throws WxErrorException {return wxAppLoginService.login(loginDTO);}]复制代码
然后对应的实现类