手把手教你做微信小程序授权登录交互(二)

简介: 手把手教你做微信小程序授权登录交互(二)

三、源代码


1.调用微信API wx.login()得到code。


2.把得到的code传给后端,后端获取code请求微信小程序官方接口,返回给前端openid。


3.知道openid后进行用户相关的操作,可以用于分别用户的登录状态。


前台:在GetUserInfo中添加接口


GetUserInfo() {
        var _this = this;
        // 增加约束,不选协议无法进行授权
        if (this.value === false) {
          uni.showToast({
            title: '请阅读勾选协议',
            icon: 'error',
            duration: 2000
          });
        } else {
          uni.getUserProfile({
            desc: '登录',
            lang: 'zh_CN',
            success: (res) => {
              console.log('获取的信息', res.userInfo);
              _this.nickName = res.userInfo.nickName;
              _this.setNn(res.userInfo.nickName);
              uni.getLocation({
                type: 'gci02',
                success: res => {
                  uni.reLaunch({
                    url: 'Login2'
                  });
                }
              });
            },
            fail: (res) => {
              console.log('用户拒绝了授权');
              uni.showToast({
                title: '授权失败',
                icon: 'error',
                duration: 2000
              });
            }
          });
        }
      }
login() {
          let _this = this;
          uni.showLoading({
            title: '登录中...'
          });
          // 获取登录用户 code
          uni.login({
            provider: 'weixin',
            success: function(res) {
              if (res.code) {
                let code = res.code;
                console.log('用户code:', res.code);
                uni.request({
                  url: "https://xxxxxxx:8084/wxLogin/getOpenid",
                  method: 'POST',
                  header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  },
                  data: {
                    code: res.code, //wx.login 登录成功后的code 
                    role: _this.role,
                  },
                  success: function(cts) {
                    var openid = cts.data.openid; //openid 用户唯一标识
                    var userInfo = {
                      openid: openid,
                      role: _this.role
                    };
                    console.log(_this.role);
                    _this.saveUserInfo(userInfo);
                    uni.hideLoading();
                    uni.switchTab({
                                            // 登录成功后的跳转
                      url: '../myCenter/myCenter'
                    });
                  }
                });
              } else {
                uni.showToast({
                  title: '登录失败!',
                  duration: 2000
                });
                console.log('登录失败!' + res.errMsg)
              }
            },
          });
      }
    }


后台:SpringBoot后台数据处理


  1. 首先获取的自己小程序的appid、secret,封装为一个接口


  1. 接口当中,拼接sql,向微信发送http请求


3.将返回的结果进行封装,封装成map集合返回给前端


@PostMapping("/getOpenid")
    @ResponseBody
    public Map<String, Object> getOpenId(@RequestParam("code") String code,
                                         @RequestParam(value = "role") Integer role) throws IOException {
        // 返回code
        System.out.println("========== 进入wxLogin/getOpenid方法  ==========");
        System.err.println("微信授权登录");
        System.err.println("code值:  " + code);
        Map<String, Object> resultMap = new HashMap<>();
        String appid = ConstUtil.getAppId();
        String secret = ConstUtil.getSECRET();
        // 拼接sql
        String loginUrl = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appid +
                "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code";
        CloseableHttpClient client = null;
        CloseableHttpResponse response = null;
        // 创建httpGet请求
        HttpGet httpGet = new HttpGet(loginUrl);
        // 发送请求
        client = HttpClients.createDefault();
        // 执行请求
        response = client.execute(httpGet);
        // 得到返回数据
        HttpEntity entity = response.getEntity();
        String result = EntityUtils.toString(entity);
        System.out.println("微信返回的结果" + result);
        resultMap.put("data", result);
        // 对返回的结果进行解析
        JSONObject json_test = JSONObject.parseObject(result);
        String openid = json_test.getString("openid");
        String sessionKey = json_test.getString("session_key");
        System.err.println("openid值: " + openid);
        System.err.println("sessionKey值" + sessionKey);
        Users users = usersService.getUserByOpenid(openid);
        System.err.println("用户信息:" + users);
        if (StringUtils.isEmpty(openid)) {
            resultMap.put("state", ResponseCode.SUCCESS.getCode());
            resultMap.put("message", "未获取到openid");
            return resultMap;
        } else {
            // 判断是否为首次登陆
            if (users == null) {
                resultMap.put("state", ResponseCode.SUCCESS.getCode());
                resultMap.put("openid", openid);
                resultMap.put("sessionKey", sessionKey);
                resultMap.put("message", "未查询到用户信息");
            } else {
                // 查询有无结果
                UserRole uRes = userRoleService.getUserRole(openid, role);
                // 封装对象
                UserRole userRole = new UserRole(openid, role);
                // 如果不是第一次登录,第二次登陆进行判断,如果没有这个身份,进行添加,如果有这个身份,不做处理
                if (uRes == null) {
                    userRoleService.insert(userRole);
                }
                resultMap.put("state", ResponseCode.SUCCESS.getCode());
                // 前台拿的数据是map的key
                resultMap.put("openid", openid);
                resultMap.put("sessionKey", sessionKey);
                resultMap.put("user", users);
                resultMap.put("message", "该用户已经存在");
            }
            response.close();
            client.close();
        }
        return resultMap;
    }


四、实现效果


image.png

相关文章
|
2月前
|
存储 前端开发 安全
|
2月前
|
存储 小程序 JavaScript
|
2月前
|
开发工具 Android开发
|
2月前
|
小程序 前端开发 安全
|
2月前
|
存储 前端开发 Java
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
62 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
61 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
44 7
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
61 7
下一篇
无影云桌面