小程序（3）：授权登录

小程序自身携带庞大流量，又提供了各种强大的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一步一步来还是没什么问题的，就是他的文档有的写的确实有点坑，希望踩过的童鞋一起来吐槽~~~