小程序(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 条评论
登录 后参与评论

相关文章

来自专栏圣杰的专栏

Asp.net mvc 知多少(三)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

2166
来自专栏JetpropelledSnake

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

1785
来自专栏Kirito的技术分享

Spring Security(六)—SpringSecurityFilterChain加载流程深度解析

SpringSecurityFilterChain 作为 SpringSecurity 的核心过滤器链在整个认证授权过程中起着举足轻重的地位,每个请求到来,都会...

1.4K3
来自专栏逸鹏说道

我这么玩Web Api(一)

帮助页面或用户手册(Microsoft and Swashbuckle Help Page) 前言   你需要为客户编写Api调用手册?你需要测试你的Api接口...

3125
来自专栏编程软文

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

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

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

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

1935
来自专栏Kubernetes

深度解析Kubernetes Local Persistent Volume(二)

摘要:上一篇博客”深度解析Kubernetes Local Persistent Volume(一)“对local volume的基本原理和注意事项进行了分析,...

1.5K3
来自专栏osc同步分享

springboot Actuator

springboot Actuator只需要加入依赖即可使用: <dependency> <groupId>org.springframework.bo...

3006
来自专栏林冠宏的技术文章

关于Android中为什么主线程不会因为Looper.loop()里的死循环卡死?引发的思考,事实可能不是一个 epoll 那么 简单。

( 转载请务必标明出处:https://cloud.tencent.com/developer/user/1148436/activities) 前序 本文将...

3375
来自专栏张戈的专栏

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

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

5116

扫码关注云+社区

领取腾讯云代金券