小程序(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和sessionkey,如果你只需要openid,下面这一步就够了。 下面可以看到,我把获取到的sessionkey放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一步一步来还是没什么问题的,就是他的文档有的写的确实有点坑,希望踩过的童鞋一起来吐槽~~~

原文发布于微信公众号 - 陌与尘埃(grq100296)

原文发表时间:2018-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小灰灰

Java & PhantomJs 实现html输出图片

Java & PhantomJs 实现html输出图片 借助phantomJs来实现将html网页输出为图片 I. 背景 如何在小程序里面生成一张图,分享到朋...

6458
来自专栏菩提树下的杨过

Silverlight:分包下载及SEO优化方案

一、按模块分包 一般大型的Silverlight应用,都会按模块分解成多个silverlight project,编译后就有多个xap包,然后在需要用到的场景按...

1915
来自专栏以南小隐-数通那些事儿

锐捷RSOS_10.4之后版本Ctrl层升级系统版本

1634
来自专栏JetpropelledSnake

Django学习笔记之利用Form和Ajax实现注册功能

1615
来自专栏后端之路

Poi导出产生OOM解决方案

背景 目前生产系统大量的数据的导出,情况不是特别理想,将常出现OOM 如果不限制程序最大内存可能导致其他应用收到影响 比如稽计任务 思路 考虑出现OOM是如下几...

56710
来自专栏玄魂工作室

Msfvenom后门重新学习与分析-windows篇

Msfvenom 是msf框架配套的攻击载荷生成器。 什么是攻击荷载: Payload:目标系统上渗透成功后执行的代码 msfvenom命令行选项如下: ? ?...

4529
来自专栏编程软文

1小时轻松上手springmvc,视频网站后台开发

1833
来自专栏玄魂工作室

Msfvenom后门重新学习与分析-windows篇

Msfvenom 是msf框架配套的攻击载荷生成器。 什么是攻击荷载: Payload:目标系统上渗透成功后执行的代码 msfvenom命令行选项如下: ? ?...

3298
来自专栏软件工程师成长笔记

CXF实现webService服务

Web Service也叫XML Web Service,WebService是一种可以接收从Internet或者Internet上的其它系统中传递过来的请求,...

1653
来自专栏张戈的专栏

移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇

这些天,在给博客的标签页(tag)添加跳转和 META 动态申明时,居然让我醍醐灌顶,发现之前的动态适配的做法是多么的苦逼和小白! 总结前,先来回顾下小白张戈在...

4906

扫码关注云+社区