uniapp微信小程序授权后得到“微信用户”

背景

近日在开发微信小程序的时候,发现数据库多了很多用户名称是"微信用户"的账号信息。接口的响应信息如下。

ini 复制代码
(nickName=微信用户, avatarUrl=https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132, gender=0, country=, province=, city=, language=), code=0e1abNFa1dBwRG0lnoJa18qT0i2abNFk)

经过排查,发现官方是对微信授权的接口做出了调整。小程序用户头像昵称获取规则调整公告

根据上面标红的字体说明,官方的意图就是只提供openid和unionid, 不暴露用户头像昵称数据。

基于此才会在新版的接口中返回"微信用户"的信息。

  • 针对这个问题,官方提供的解决方案如下。

以上解决方案,表达的意思是新版用户授权的接口中, 官方只会给你提供unionid和openid.

至于用户的昵称和头像,开发者可以提供功能,以用户的意志去完成修改和更新。
tips: 建议授权接口生成用户名和昵称,采用系统默认的方式。

微信授权流程

uniapp代码实现

uni.login接口文档

javascript 复制代码
var that = this;
let code = '';
//获取code
wx.login({
    success: (res) => {
            code = res.code
    }
});

//获取用户的信息和code一起传给后端, 进行保存。
uni.getUserProfile({
        desc:'登录',
        lang: 'zh_CN',
        success:(res)=>{
        console.log( 'wx.getUserProfile=>用户允许了授权' );  
        var data ={
            "userInfo": res.userInfo,
            "code": code
        };
        tui.request(url.login.wxAuth, "POST", data, false, false, false).then((res) =>         {
            isClick=true;
            if (res.code === 200 && res.success) {
                    store.commit('login', res.data);
                    if(path === undefined || path === ""){
                    uni.switchTab({
                            url:'/pages/me/index',
                            success(){
                                that.refresh();
                        }
                    })
                    }
            } else {
                    tui.toast(res.message);
            }
        }).catch((res) => {
                tui.toast(res.message);
        });
},
fail:(err)=>{
                console.log("--login error--"+ JSON.stringify(err));
                tui.toast(err);
        }
})

后端代码

ini 复制代码
@ApiOperation(value = "/newWxLogin", notes = "微信登录授权接口")
@PostMapping("newWxLogin")
public Result<?> newWxLogin(@RequestBody NewWxLoginReq newWxLoginReq) {
    log.info("newWxLogin:{}", newWxLoginReq);
    ValidatorUtils.validateEntity(newWxLoginReq);
    //获取用户的openId
    String openIdUrl = String.format(WxConstant.CODE_SESSION_URL, appId, appSecret, newWxLoginReq.getCode());
    String result1 = HttpRequest.get(openIdUrl).execute().body();
    log.info("newWxLogin.result1:{}", result1);
    JSONObject jsonObject = JSONObject.parseObject(result1);
    Assert.isTrue(StringUtils.isNoneBlank(jsonObject.getString(ERROR_CODE)), jsonObject.getString(ERROR_MSG));
    String openId = jsonObject.getString("openid");
    return userService.newWxLogin(openId, newWxLoginReq.getUserInfo());
}

public int insertNewWechatUser(WxUserReq wxUserReq, String roleCode) {
    User user = new User();
    String simpleUUID = IdUtil.simpleUUID();
    user.setId(simpleUUID);
    user.setThirdId(wxUserReq.getOpenId());
    user.setThirdType("wechat");
    //此处头像是随机生成
    String avatar = "http://cdn.zengzhang.vip/test/avatar/avatar"+RandomUtil.randomInt(20)+".png";
    user.setAvatar(avatar);
    //此处用户名随机生成
    String userName = "test" + RandomUtil.randomInt(100);
    user.setUsername(userName);
    user.setSex(wxUserReq.getGender().byteValue());
    user.setStatus(Byte.parseByte("1"));
    user.setUserIdentity(Byte.parseByte("1"));
    user.setCreateTime(LocalDateTime.now());
    String salt = oConvertUtils.randomGen(8);
    user.setSalt(salt);
    user.setDelFlag(Byte.parseByte("0"));
    user.setRealname(filterEmoji(wxUserReq.getNickName()));
    String passwordEncode = PasswordUtil.encrypt(wxUserReq.getNickName(), PASSWORD, salt);
    user.setPassword(passwordEncode);
    save(user);
    //关联用户角色
    userRoleService.insertUserRole(roleCode, simpleUUID);
    return 1;
}

上述就是解决这个问题的步骤, 关于头像修改,和昵称修改的功能就不展示了。

相关推荐
~无忧花开~2 小时前
React生命周期全解析
开发语言·前端·javascript·react.js·前端框架·react
cj81402 小时前
Prompt,Agent,Skill,Mcp分别于langchain有什么关系
前端
SuperEugene2 小时前
Axios + Vue 错误处理规范:中后台项目实战,统一捕获系统 / 业务 / 接口异常|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios
行走的陀螺仪2 小时前
手写 Vue3 极简 i18n
前端·javascript·vue.js·国际化·i18n
羽沢313 小时前
一篇简单的STOMP教程QAQ
前端·javascript·stomp
code_Bo3 小时前
使用AI完成Swagger接口类型在前端自动生成的工具
前端·后端·架构
加个鸡腿儿3 小时前
从"包裹器"到"确认按钮"——一个组件的三次重构
前端·vue.js·设计模式
子兮曰3 小时前
AI写代码坑了90%程序员!这5个致命bug,上线就炸(附避坑清单)
前端·javascript·后端
猪八宅百炼成仙3 小时前
PanelSplitter 组件:前端左右布局宽度调整的实用解决方案
前端