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

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

三、源代码


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

相关文章
|
1月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
349 12
|
15天前
|
小程序
微信小程序数据绑定与事件处理:打造动态交互体验
在上一篇中,我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制,通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法,实现页面与逻辑层数据的动态关联;事件处理则通过`bind`或`catch`前缀响应用户操作。最后,通过一个简单的计数器案例,巩固所学知识。掌握这些核心技能,将助你开发更复杂的小程序。
|
15天前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
4月前
|
小程序 前端开发 算法
|
5月前
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
157 0
|
7天前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
技术小白如何利用DeepSeek半小时开发微信小程序?
|
5月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1115 7
|
5月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
986 1
|
5月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
341 7
ly~
|
6月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
128 6

热门文章

最新文章