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;
}

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

相关推荐
AlgorithmAce1 小时前
Live2D嵌入前端页面
前端
nameofworld1 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter2 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
GISer_Jing2 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架
川石教育2 小时前
Vue前端开发子组件向父组件传参
前端·vue.js·前端开发·vue前端开发·vue组件传参
GISer_Jing3 小时前
Vue前端进阶面试题目(二)
前端·vue.js·面试
乐闻x3 小时前
Pinia 实战教程:构建高效的 Vue 3 状态管理系统
前端·javascript·vue.js
weixin_431449683 小时前
web组态软件
前端·物联网·低代码·编辑器·组态
橘子味小白菜3 小时前
el-table的树形结构后端返回的id没有唯一键怎么办
前端·vue.js
前端Hardy4 小时前
HTML&CSS:比赛记分卡
前端·javascript·css·3d·html