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

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

三、源代码


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

相关文章
|
6天前
|
小程序 前端开发 算法
|
1月前
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
72 0
|
3月前
|
存储 小程序 JavaScript
|
21天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
328 7
|
21天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
402 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
95 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
74 6
|
25天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
133 1
|
30天前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
46 5
|
30天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
50 5