小程序(3):授权登录

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: 小程序自身携带庞大流量,又提供了各种强大的API,今天只说授权登录。以前可以直接默认调起授权,最近在做的时候发现改版了,需要用户手动触发授权按钮。1、login.wxml授权登录请升级微信版本判断是否授权,如果没有,则显示授权按钮。

小程序自身携带庞大流量,又提供了各种强大的API,今天只说授权登录。以前可以直接默认调起授权,最近在做的时候发现改版了,需要用户手动触发授权按钮。

1、login.wxml

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="weui-btn" type="primary" style='margin-top:15%'>授权登录</button>
<view wx:else>请升级微信版本</view>

判断是否授权,如果没有,则显示授权按钮。注意上面的open-type="getUserInfo",这个会自动调起授权框。看一下js

// pages/login/login.js
var util = require('../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      // 登录
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          wx.request({
            url: '{你的https域名}/api/login/applet',
            data: { code: res.code },
            method: 'POST',
            header: { 'content-type': 'application/x-www-form-urlencoded' },
            success: function (res1) {
              wx.setStorageSync("sessionId", res1.data.data);
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  wx.request({
                    url: '{你的https域名}/api/login/user-info',
                    data: {
                      encryptedData: res.encryptedData,
                      iv: res.iv,
                      sessionId: wx.getStorageSync("sessionId")
                    },
                    method: 'POST',
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    success: function (res1) {
                      wx.setStorageSync("storeMemberId", res1.data.data.id);
                      var member = res1.data.data;
                    //这里获取到了用户信息,可以执行自己的操作
                      wx.switchTab({
                          url: '/pages/index/index',
                        })
                      
                    }
                  })
                }
              })
             
            }
          })
        }
      })
      //用户按了允许授权按钮
    } else {
      //用户按了拒绝按钮
      wx.redirectTo({
        url: '/pages/login/login',
      })
    }
  }
})

2、后台获取用户信息

基本流程:拿到上面js获取的code换取openid和session_key,如果你只需要openid,下面这一步就够了。
下面可以看到,我把获取到的session_key放redis了,因为我需要用它获取用户详情。

    @ResponseBody
    @RequestMapping("applet")
    public ResultModel<String> login4applet(String code) {
        try {
            String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + AppletInfo.appid + "&secret=" + AppletInfo.secret +
                    "&js_code=" + code + "&grant_type=authorization_code";

            String res = HttpClientUtil.post(url);
            Map<String,String> data = FastJsonUtils.toBean(res,Map.class);
            String openid = data.get("openid");
            String session_key = data.get("session_key");
            String sessionId = IDGen.genId();
            stringRedisTemplate.opsForValue().set(sessionId, session_key + "," + openid,7200,TimeUnit.SECONDS);
            return new ResultModel<>(ResultStatus.SUCCESS, sessionId);
        } catch (NormalException e) {
            return ResultModel.defaultError("授权失败");
        }

    }

3、换取用户信息

第一步中第一个ajax请求后,又发送一次请求,三个参数
encryptedData: 加密数据
iv:偏移
sessionId: 上面第二步的sessionId,其实就是一个标识
通过sessionId取到上面存在redis中的sessionKey,因为官方建议最好不要直接传输这个,因此我用了本地缓存。

    @ResponseBody
    @RequestMapping("user-info")
    public ResultModel<Member> getUserInfo(String sessionId, String iv, String encryptedData) {
        String sessionKeyAndOpenId = stringRedisTemplate.opsForValue().get(sessionId);
        if (StringUtil.isBlank(sessionKeyAndOpenId)) {
            throw new NormalException("登录信息失效");
        }
        String sessionKey = sessionKeyAndOpenId.split(",")[0];
        // 被加密的数据
        try {
            byte[] dataByte = Base64.decode(encryptedData);
            // 加密秘钥
            byte[] keyByte = Base64.decode(sessionKey);
            // 偏移量
            byte[] ivByte = Base64.decode(iv);
            String result = AESUtil.decrypt(dataByte, keyByte, ivByte);

            Map<String, String> map = FastJsonUtils.toBean(result, HashMap.class);
            if (map.get("openId") == null) {
                throw new NormalException("获取用户信息失败");
            }

            //先判断是否存在unionId
            String unionId =map.get("unionId");

            ResultModel<Member> resultModel = memberService.getByUnionId(unionId);
            Member member = resultModel.getData();
            if (member == null){

               
                String  openId = map.get("openId");
                member.setOpenId(openId);
                String avatarUrl = map.get("avatarUrl");
              
                member = new Member();
                member.setId(IDGen.genId());
                member.setUnionId(unionId);
                memberService.save(member);
            }

            return new ResultModel<>(ResultStatus.SUCCESS, member);
        } catch (NormalException e) {
            return new ResultModel<>(ResultStatus.FAIL, null);
        }
    }

此时我们已经获取了用户的openid,unionId(如果绑定了开放平台的话),头像,昵称,省市等信息,剩下的就自己随便玩儿了

4、爬坑

既然写代码,没坑怎么行?
Q:报错:invalid appid
A:可是建项目开始就绑定了appid啊,原来在通过code获取session_key的时候,不小心发成了get请求。
ps:鄙视一下腾讯的同行,你这时候是不是提示method not support更合适呢?害的我找了半天bug~~~

其实整体来说根据api一步一步来还是没什么问题的,就是他的文档有的写的确实有点坑,希望踩过的童鞋一起来吐槽~~~

目录
相关文章
|
8月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2446 12
|
11月前
|
小程序 前端开发 算法
|
12月前
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
265 0
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
293 0
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
512 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
318 0

热门文章

最新文章