- 实现获取/解密微信小程序用户信息的info接口
当微信小程序前端获取到用户授权可以获取用户信息时，微信小程序前端将加密的用户信息发送到业务后台，业务后台请求微信服务器将用户信息解密并保存到我们的第三方用户登录表内。
/**
* 获取用户信息接口
*/
@ApiOperation(value = "小程序获取用户信息接口")
@ApiImplicitParams({
@ApiImplicitParam(name = "socialKey", value = "加密的登录key，用于绑定用户", required = true, dataType="String", paramType = "query"),
@ApiImplicitParam(name = "signature", value = "使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息", required = true, dataType="String", paramType = "query"),
@ApiImplicitParam(name = "rawData", value = "不包括敏感信息的原始数据字符串，用于计算签名", required = true, dataType="String", paramType = "query"),
@ApiImplicitParam(name = "encryptedData", value = "包括敏感数据在内的完整用户信息的加密数据", required = true, dataType="String", paramType = "query"),
@ApiImplicitParam(name = "iv", value = "加密算法的初始向量", required = true, dataType="String", paramType = "query")
})
@GetMapping("/info")
public Result info(@PathVariable String appid, String socialKey,
String signature, String rawData, String encryptedData, String iv) {
if (!wxMaService.switchover(appid)) {
throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置，请核实！", appid));
}
// 查询第三方用户信息
JustAuthSocial justAuthSocial = this.getJustAuthSocial(socialKey);
if (StringUtils.isBlank(justAuthSocial.getAccessCode()))
{
throw new BusinessException("登录状态失效，请尝试重新进入小程序");
}
// 用户信息校验
if (!wxMaService.getUserService().checkUserInfo(justAuthSocial.getAccessCode(), rawData, signature)) {
WxMaConfigHolder.remove();//清理ThreadLocal
return Result.error("user check failed");
}
// 解密用户信息
WxMaUserInfo userInfo = wxMaService.getUserService().getUserInfo(justAuthSocial.getAccessCode(), encryptedData, iv);
WxMaConfigHolder.remove();//清理ThreadLocal
justAuthSocial.setAvatar(userInfo.getAvatarUrl());
justAuthSocial.setUnionId(userInfo.getUnionId());
justAuthSocial.setNickname(userInfo.getNickName());
justAuthSocialService.updateById(justAuthSocial);
return Result.data(userInfo);
}
- 当在小程序前端绑定或注册账号时，可以在用户允许的前提下获取微信用户的手机号，同样，手机号和用户信息都是需要传到业务后台，然后再请求微信服务器进行解密。获取到手机号之后，业务后台根据手机号和系统用户进行匹配，如果存在，那么直接将微信账号绑定到我们业务系统的当前手机号用户。如果不存在，那么返回微信小程序不存在绑定用户的信息，由小程序前端继续进行绑定或者注册操作。
/**
* 获取用户绑定手机号信息
*/
@ApiOperation(value = "小程序获取用户绑定手机号信息")
@ApiImplicitParams({
@ApiImplicitParam(name = "socialKey", value = "加密的登录key，用于绑定用户", required = true, dataType="String", paramType = "query"),
@ApiImplicitParam(name = "encryptedData", value = "包括敏感数据在内的完整用户信息的加密数据", required = true, dataType="String", paramType = "query"),
@ApiImplicitParam(name = "iv", value = "加密算法的初始向量", required = true, dataType="String", paramType = "query")
})
@GetMapping("/phone")
public Result phone(@PathVariable String appid, String socialKey, String encryptedData, String iv) {
if (!wxMaService.switchover(appid)) {
throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置，请核实！", appid));
}
// 查询第三方用户信息
JustAuthSocial justAuthSocial = this.getJustAuthSocial(socialKey);
if (StringUtils.isBlank(justAuthSocial.getAccessCode()))
{
throw new BusinessException("登录状态失效，请尝试重新进入小程序");
}
// 解密
WxMaPhoneNumberInfo phoneNoInfo = wxMaService.getUserService().getPhoneNoInfo(justAuthSocial.getAccessCode(), encryptedData, iv);
WxMaConfigHolder.remove();//清理ThreadLocal
// 不带区号的手机，国外的手机会带区号
String phoneNumber = phoneNoInfo.getPurePhoneNumber();
// 查询用户是否存在，如果存在，那么直接调用绑定接口
LambdaQueryWrapper lambdaQueryWrapper = new LambdaQueryWrapper<>();
lambdaQueryWrapper.eq(User::getMobile, phoneNumber);
User userInfo = userService.getOne(lambdaQueryWrapper);
Long userId;
// 判断返回信息
if (null != userInfo && null != userInfo.getId()) {
userId = userInfo.getId();
}
else {
// 如果用户不存在，那么调用新建用户接口，并绑定
CreateUserDTO createUserDTO = new CreateUserDTO();
createUserDTO.setAccount(phoneNumber);
createUserDTO.setMobile(phoneNumber);
createUserDTO.setNickname(StringUtils.isBlank(justAuthSocial.getNickname()) ? phoneNumber : justAuthSocial.getNickname());
createUserDTO.setPassword(StringUtils.isBlank(justAuthSocial.getUnionId()) ? justAuthSocial.getOpenId() : justAuthSocial.getUnionId());
createUserDTO.setStatus(GitEggConstant.UserStatus.ENABLE);
createUserDTO.setAvatar(justAuthSocial.getAvatar());
createUserDTO.setEmail(justAuthSocial.getEmail());
createUserDTO.setStreet(justAuthSocial.getLocation());
createUserDTO.setComments(justAuthSocial.getRemark());
CreateUserDTO resultUserAdd = userService.createUser(createUserDTO);
if (null != resultUserAdd && null != resultUserAdd.getId()) {
userId = resultUserAdd.getId();
} else {
// 如果添加失败，则返回失败信息
return Result.data(resultUserAdd);
}
}
// 执行绑定操作
justAuthService.userBind(justAuthSocial.getId(), userId);
return Result.success("账号绑定成功");
}
- 提供绑定当前登录账号接口，由微信小程序前端进行调用绑定
/**
* 绑定当前登录账号
*/
@ApiOperation(value = "绑定当前登录账号")
@ApiImplicitParams({
@ApiImplicitParam(name = "socialKey", value = "加密的登录key，用于绑定用户", required = true, dataType="String", paramType = "query")
})
@GetMapping("/bind")
public Result bind(@PathVariable String appid, @NotBlank String socialKey, @CurrentUser GitEggUser user) {
if (!wxMaService.switchover(appid)) {
throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置，请核实！", appid));
}
if (null == user || (null != user && null == user.getId())) {
throw new BusinessException("用户未登录");
}
// 查询第三方用户信息
JustAuthSocial justAuthSocial = this.getJustAuthSocial(socialKey);
if (StringUtils.isBlank(justAuthSocial.getAccessCode()))
{
throw new BusinessException("账号绑定失败，请尝试重新进入小程序");
}
// 执行绑定操作
justAuthService.userBind(justAuthSocial.getId(), user.getId());
return Result.success("账号绑定成功");
}
- 提供解绑接口，除了绑定接口外，我们系统服务应提供微信小程序解绑功能，这里实现解绑接口
/**
* 解绑当前登录账号
*/
@ApiOperation(value = "解绑当前登录账号")
@GetMapping("/unbind")
public Result unbind(@PathVariable String appid, @CurrentUser GitEggUser user) {
if (!wxMaService.switchover(appid)) {
throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置，请核实！", appid));
}
if (null == user || (null != user && null == user.getId())) {
throw new BusinessException("用户未登录");
}
LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(JustAuthSocialUser::getUserId, user.getId());
justAuthSocialUserService.remove(queryWrapper);
return Result.success("账号解绑成功");
}
通过以上接口的功能，基本实现了微信小程序前端进行绑定、注册以及获取用户信息、用户手机号所需要的接口，下面来实现小程序前端具体的业务实现。
三、微信小程序授权登录、注册、绑定小程序前端功能实现。
微信小程序前端开发有多种方式，可以使用微信小程序官方开发方式，也可以使用第三方的开发方式。因为大多数前端都会使用Vue.js开发，而mpvue可以使用开发Vue.js的方式来开发微信小程序，所以这里我们选择使用mpvue来开发微信小程序。这里不详细讲解mpvue框架的搭建过程，只详细说明微信小程序授权登录相关功能，有需要的可以参考mpvue官方文档。
1、定义微信小程序授权登录相关接口文件login.js，将我们业务后台实现的接口统一管理和调用。
因为我们的开发框架是支持多租户的，同时也是支持多个小程序的，为了同一套后台可以支持多个微信小程序，这里选择在发布的微信小程序中配置appId，由微信小程序前端参数来确定具体的微信小程序。
import fly from '@/utils/requestWx'
// 获取用户信息
export function getOpenId (params) {
return fly.get(`/wx/user/${params.appId}/login`, params)
}
// 获取用户信息
export function getUserInfo (params) {
return fly.get(`/wx/user/${params.appId}/info`, params)
}
// 获取用户手机号
export function getUserPhone (params) {
return fly.get(`/wx/user/${params.appId}/phone`, params)
}
// 绑定微信账号
export function bindWeChatUser (params) {
return fly.get(`/wx/user/${params.appId}/bind`, params)
}
// 解绑微信账号
export function unbindWeChatUser (params) {
return fly.get(`/wx/user/${params.appId}/unbind`)
}
// 登录
export function postToken (params) {
return fly.post(`/oauth/token`, params)
}
// 退出登录
export function logout () {
return fly.post(`/oauth/logout`)
}
// 获取登录用户信息
export function getLoginUserInfo () {
return fly.get(`/system/account/user/info`)
}
2、新增login.vue授权登录页面，实现微信小程序具体授权登录、绑定、注册的操作界面。
- 增加微信授权登录按钮
微信授权登录
- 增加微信小程序获取微信用户绑定手机号的弹出框，应微信官方要求，必须由用户点击授权之后，才能够获取用户绑定的手机号。
- 增加账号绑定弹出框，同样微信官方要求，获取微信用户信息，必须由用户点击授权允许，所以这里弹出框里的按钮也是微信用户同意授权获取用户信息的按钮。
3、在methods中新增微信绑定相关方法来具体实现微信小程序授权登录、绑定、注册等操作接口的调用。
- 通过wx.login拿到code，在后台通过openId判断是否已经绑定用户，如果已绑定用户，则不需要再进行用户授权操作，直接登录.
wxLogin () {
var that = this
wx.login({
success (res) {
that.code = res.code
const params = {
appId: appId,
code: res.code
}
getOpenId(params).then(res => {
if (res.code === 200 && res.data) {
const result = res.data
mpvue.setStorageSync('openid', result.openid)
mpvue.setStorageSync('unionid', result.unionid)
mpvue.setStorageSync('bindKey', result.bindKey)
mpvue.setStorageSync('userBindAlready', result.userBindAlready)
// 1、如果绑定过，那么直接使用绑定用户登录
// 2、如果没有绑定过，那弹出获取用户信息和获取手机号信息进行绑定
if (result.userBindAlready) {
const loginParams = {
grant_type: 'social',
social_key: mpvue.getStorageSync('bindKey')
}
postToken(loginParams).then(res => {
if (res.code === 200) {
console.log(res)
const data = res.data
mpvue.setStorageSync('token', data.token)
mpvue.setStorageSync('refreshToken', data.refreshToken)
// 获取用户信息
that.loginSuccess()
} else {
Toast(res.msg)
}
})
}
} else {
Toast(res.msg)
}
})
}
})
},
- 获取微信用户信息实现登陆，微信小程序接口，只允许点击按钮，用户同意后才能获取用户信息，不要直接使用wx.getUserInfo，此接口已过期，微信不再支持。
bindGetUserInfo: function (res) {
var that = this
if (res.mp.detail.errMsg === 'getUserInfo:ok') {
const userParams = {
appId: appId,
socialKey: mpvue.getStorageSync('bindKey'),
signature: res.mp.detail.signature,
rawData: res.mp.detail.rawData,
encryptedData: res.mp.detail.encryptedData,
iv: res.mp.detail.iv
}
getUserInfo(userParams).then(response => {
const userBindAlready = mpvue.getStorageSync('userBindAlready')
// 1、如果绑定过，那么直接使用绑定用户登录
// 2、如果没有绑定过，那弹出获取用户信息和获取手机号信息进行绑定
if (userBindAlready) {
const loginParams = {
grant_type: 'social',
social_key: mpvue.getStorageSync('bindKey')
}
postToken(loginParams).then(res => {
if (res.code === 200) {
console.log(res)
const data = res.data
mpvue.setStorageSync('token', data.token)
mpvue.setStorageSync('refreshToken', data.refreshToken)
// 获取用户信息
that.loginSuccess()
} else {
// 弹出获取手机号授权按钮
that.showUserPhoneVisible = true
}
})
} else {
// 弹出获取手机号授权按钮
that.showUserPhoneVisible = true
}
})
} else {
console.log('点击了拒绝')
}
},
- 微信通过用户点击授权获取手机号来实现账号绑定操作，如果用户点击拒绝，那么提示用户无法绑定当前用户微信绑定的手机号，请用户继续授权。
bindGetUserPhone (e) {
const that = this
if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
console.log(e.mp.detail)
// 写入store
const params = {
appId: appId,
socialKey: mpvue.getStorageSync('bindKey'),
encryptedData: e.mp.detail.encryptedData,
iv: e.mp.detail.iv
}
getUserPhone(params).then(res => {
if (res.code === 200) {
console.log(res)
const loginParams = {
grant_type: 'social',
social_key: mpvue.getStorageSync('bindKey')
}
postToken(loginParams).then(res => {
if (res.code === 200) {
console.log(res)
const data = res.data
mpvue.setStorageSync('token', data.token)
mpvue.setStorageSync('refreshToken', data.refreshToken)
// 获取用户信息
that.loginSuccess()
} else {
}
})
} else {
that.showUserPhoneVisible = false
// 获取用户信息
that.loginSuccess()
Toast(res.msg)
}
})
} else {
that.showUserPhoneVisible = false
Toast('当前拒绝授权手机号登陆，请使用账号密码登录')
}
},
通过以上开发基本实现了微信小程序授权登录第三方业务系统的功能，在此基础上，注册的功能可以根据业务需求来扩展，大多数互联网业务，都会是微信小程序授权登录之后就自动注册用户。但是有些传统行业的业务，比如只有某些公司或组织内部的用户才能登录，那么是不允许微信授权登录就自助注册成系统用户的。微信小程序前端框架也可以归根据自己的需求，及擅长的开发方式来选择，但是微信授权登录的流程是不变的，可以在此基础上根据业务需求修改优化。
源码地址:
Gitee: https://gitee.com/wmz1930/GitEgg
GitHub: https://github.com/wmz1930/GitEgg
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，
如果涉及侵权请联系站长邮箱：support@yingtwo.com 进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：none
猜你喜欢
最近更新
嘉实多和昆仑哪个好
你好！嘉实多机油是业界最好的，比昆仑机油贵很多...
68.C++中的const
编写程序过程中，我们有时不希望改变某个变量的值...
封神榜哪个版本游戏
PC上的荡神志、刀剑封魔录、封神榜之英雄无敌P...
硬盘怎么清洁
给笔记本电脑硬盘清理灰尘的方法如下：1、用螺丝...
410m和7670哪个好
首先三款笔记本的处理器都是i52450m，内存...
手机2k17乔丹怎么获得
NBA2k17选择乔丹先创建MC人物，打三局大...
多态、抽象类、接口练习：愤怒的小鸟
需求说明:模拟实现愤怒的小鸟,定义鸟叫的接口,...
rx480配什么amdcpu
rx480可以搭配酷睿i3-6100cpu，酷...
6s主要的指导是什么
6s指的是什么6s指的是什么，在现实生活中，6...
手机里dst什么意思
将时间在正常情况下提前一小时,如果实行“夏令时...
热门标签
合作伙伴
开发工具
SSL证书
站点信息
QQ群：86522228
关注公众号
赢图云提供的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
本站为非营利性站点，如有侵犯您的权益请 | 邮件投诉：coolsec[#]Foxmail.com
❤ Design by YINGTWO