三周学会小程序第五讲:登录的原理和实现

阅读文本大概需要 10 分钟。

登录原理

前面我们耗费在环境搭建上面已经很多时间,这一讲开始真正的和小程序功能对接。 登录便是小程序的开始,小程序可以方便的使用微信登录,获取用户的个人信息,这样我们就能保留用户的信息和记录用户的操作。我们直接通过一张图进入正题。如图是小程序官方给出的登录过程:

1,调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。 调用 code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥(sessionkey),为了安全所以需要使用小程序先获取 code 然后再传递到服务器端获取登录信息进行登录,所以到这里你就理解了为什么上一讲《三周学会小程序第三讲:服务端搭建和免费部署》要搭建服务器了。 2,sessionkey。微信为登录用户设置的登录session,用户校验登录态和下文中我们用于校验用户信息的正确性。 文档地址 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

因为我们不仅仅需要有登录态,还需要获取用户信息保存到服务器端 所以我们需要获取用户信息,目前我们获取用户信息需要在小程序端使用 button 组件,并将 open-type 指定为 getUserInfo 类型,点击 button 的时候通过 bindgetuserinfo属性 绑定的 callback 接收用户信息。通过上述方式我们可以获取到 rawDatasignaturerawData 是用户信息

{
  "nickName": "小匠",
  "gender": 1,
  "language": "zh_CN",
  "city": "北京",
  "province": "北京",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}

因为

signature=sha1(rawData+session_key)

所以我们把这两个属性直接传递到服务器端,不仅获取到了用户信息,用于存储到服务器端,还能校验请求数据的真实性。 文档地址 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

所以这样以后,小编对流程图进行了优化,这样可以减少一次服务端的请求,提高响应速度。

1, 简单解释一下,首先在小程序端通过调用 wx.logingetUserInfo 获取code 和 用户信息,一起通过 wx.request 发送给开发者服务器端,这样便减少一些请求。 2,调用 jscode2session 接口到微信接口服务获取 session_keyopenId,直接对用户信息进行 SHA1 校验,校验成功以后创建自定义登录态,返回自定义登录态到小程序。 3,自定义登录态是什么呢?做过web的朋友都知道 session 和 cookies 可以组合做登录态,我们这里也是模拟这种设计,只是我们会把session存到数据库中,自定义生成 cookies(token) 传递给小程序端,存储到 storage 里面。因为本讲内容较多,所以把数据库存储放到了下一讲。 4, storage 类似于浏览器的 localStorage,用户小程序端方便的存储一些基础数据。

小程序端逻辑实现

现在我们已经理解了怎么做登录验证,那接下来我们开始编写客户端代码。 首先我们需要在 onLoad 方法里面调用 wx.login() 方法, onLoad 方法在页面加载的是就会调用,当页面加载的时候我们就把 code 存入 data 里面,以便后面调用服务端接口的时候使用。因为每次调用 wx.login 对应的 session_key 就会变,所以必须保证 wx.login 的调用 在获取用户信息之前。这时候我们每次刷新页面都会在控制台看到如下输出(我这里使用的是 Command + S 每次会重新编译小程序)

然后我们需要在 question/index.wxml 文件中的按钮上面添加 open-typebindgetuserinfo,如下

<button class="btn" open-type="getUserInfo" 
bindgetuserinfo="getUserInfo" hover-class="btn-click">
登录
</button>

接下来在 question/index.js 里面添加 getUserInfo 方法用于接收点击按钮获取用户信息的回调,回调方法里面的 userInfo 就是我们想要的用户信息。我们再模拟器里面点击按钮,在控制台里面查看具体的信息,具体模拟器和控制台怎么用,我们在《客户端代码准备和基础功能讲解》中已经有讲解。

// 绑定wxml的button,用户获取用户信息
getUserInfo: function (userInfo) {
    console.log(userInfo)
}

大家应该都知道 JSON 这种数据传输格式,我们下面就使用 wx.request 发送用户信息和 code 到服务器端, wx.request 对于初学者你们可以理解为 ajax。按照小编的接口定义,我只要发送 signature, rawDatacode 到服务器端,然后接收数据。所以我的实现如下。

wx.request({
  url: config.serverHost + '/api/login',
  method: "post",
  data: JSON.stringify({
    code: this.data.code,
    rawData: userInfo.detail.rawData,
    signature: userInfo.detail.signature
  }),
  dataType: "json",
  success: response => {
    wx.hideLoading();
    console.log(response);
    if (response.data.status == 200) {
      // 展示 登录成功 提示框
      wx.showToast({
        title: '登录成功',
        icon: "none",
        duration: 1000
      });
      // 把自定义登录状态 token 缓存到小程序端
      wx.setStorage({
        key: "token",
        data: response.data.data.token
      });
    } else {
      // 展示 错误信息
      wx.showToast({
        title: response.data.message,
        icon: "none",
        duration: 1000
      });
    }
  },
  fail: response => {
    console.log(response)
    wx.showToast({
      title: '登录失败,请重试'
    });
  }
})

切记这段代码块要放在 wx.login 成功以后 url 就是请求的地址, config.serverHost是我封装的常量,以便后面修改地址。 method 是请求类型。 data 是请求的 JSON 请求体。 dataType 是定义的请求类型。 successfail 分别是成功和失败的回调,我们会根据返回的 response 做相应的处理。wx.request 会把我返回的内容再包裹一个 data,所以如上内容登录成功和失败我实际返回的 JSON 如下。

{
    "status": 200,
    "message": "登录成功",
    "data": {
        "token": "86247a92-38d9-4908-a024-07be468c2c76"
    }
}
{
    "status": 400,
    "message": "无效登录"
}

wx.showToast 是提示框,所以当成功以后提示成功,失败以后把message获取到提示给用户。

最后代码中你会看到

wx.showLoading({
  title: "登录中",
  mask: true
});

wx.hideLoading();

是为了优化一下体验,当点击登录的时候提示登录中,等待服务端返回数据的时候消失,到此本节小程序部分已经结束。

小程序源码地址 https://github.com/codedrinker/jiuask 本讲 Tag V5

服务端逻辑实现

上面客户端已经完成,开始开发服务端。 首先我们需要定义一个 API 入口 Controller,用于定义 api/login 接口接收小程序发过来的请求。如下:

@RestController
@Slf4j
public class LoginController {
    // Spring 自动注入 wechatAdapter,因 WechatAdapter 类上面有 @Service 注解
    @Autowired
    private WechatAdapter wechatAdapter;
    // 定义 domain/api/login 访问接口,用于实现登录
    // 使用 LoginDTO 自动解析传递过来的 JSON 数据
    @RequestMapping("/api/login")
    public ResultDTO login(@RequestBody LoginDTO loginDTO) {
        try {
            log.info("login request : {}", loginDTO);
            // 使用 code 调用微信 API 获取 session_key 和 openid
            SessionDTO sessionDTO = wechatAdapter.jscode2session(loginDTO.getCode());
            log.info("login get session : {}", sessionDTO);
            // 检验传递过来的使用户信息是否合法
            DigestUtil.checkDigest(loginDTO.getRawData(), sessionDTO.getSessionKey(), loginDTO.getSignature());
            //TODO: 储存 token
            //生成token,用于自定义登录态,这里的存储逻辑比较复杂,放到下一讲
            TokenDTO data = new TokenDTO();
            data.setToken(UUID.randomUUID().toString());
            return ResultDTO.ok(data);
        } catch (ErrorCodeException e) {
            log.error("login error, info : {}", loginDTO, e.getMessage());
            return ResultDTO.fail(e);
        } catch (Exception e) {
            log.error("login error, info : {}", loginDTO, e);
            return ResultDTO.fail(CommonErrorCode.UNKOWN_ERROR);
        }
    }
}

根据如上代码,我们找一些关键点讲解一下 1,RestController,定义当前 Controller 为 Restful,最简单的理解就是 @RestController = @ResponseBody + @Controller 2,@Slf4j,Lombok注解,需要在 Idea 插件中安装 Lombok,这样在需要使用日志的时候,直接使用 log.*()就可以了。 3,@RequestBody LoginDTO loginDTO,会把传递过来的 JSON 对象自动序列化成对象。 4,ErrorCodeException 自定义 RuntimeException,根据业务的异常友好的提示到小程序端,具体使用interface和enum实现,源码可以参考 com.codedrinker.error 包下面的类。

对于返回对象的统一封装,便于小程序端接收和处理。

@Data
public class ResultDTO {
    private Integer status;
    private Object data;
    private String message;
}

status 是状态码,如果不是200,都是异常。 data 是数据,可以是多种类型。 message 返回的错误信息。 @Data 是lombok 的注解,可以自动生成 set get 方法,省去了自己编写 set get 的麻烦。

下面是对调用微信的 API 进行封装

@Service
public class WechatAdapter {
    private final Logger logger = LoggerFactory.getLogger(WechatAdapter.class);
    @Value("${wechat.appid}")
    private String appid;
    @Value("${wechat.secret}")
    private String secret;
    public SessionDTO jscode2session(String code) {
        String url = "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code";
        OkHttpClient okHttpClient = new OkHttpClient();
        Request request = new Request.Builder()
                .addHeader("content-type", "application/json")
                .url(String.format(url, appid, secret, code))
                .build();
        try {
            Response execute = okHttpClient.newCall(request).execute();
            if (execute.isSuccessful()) {
                SessionDTO sessionDTO = JSON.parseObject(execute.body().string(), SessionDTO.class);
                logger.info("jscode2session get url -> {}, info -> {}", String.format(url, appid, secret, code), JSON.toJSONString(sessionDTO));
                return sessionDTO;
            } else {
                logger.error("jscode2session authorize error -> {}", code);
                throw new ErrorCodeException(CommonErrorCode.OBTAIN_OPENID_ERROR);
            }
        } catch (IOException e) {
            logger.error("jscode2session authorize error -> {}", code, e);
            throw new ErrorCodeException(CommonErrorCode.OBTAIN_OPENID_ERROR);
        }
    }
}

简单粗暴的讲解一下 Adapter 里面的关键点。 1,@Value("${wechat.appid}") 是 Spring 的自动注解,直接读取 application-*.yml 里面的配置赋值给appid变量。这时候我们的 application-production.yml 里面的配置如下。

wechat:
  appid: ${WECHAT_APPID}
  secret: ${WECHAT_SECRET}

appid和secret是在小程序控制台->开发设置->开发者ID里面获取,为了安全,我们不能把这些信息直接提交到代码里面,所以我选择了把它们配置到 Heroku 的环境变量里面,在部署的时候会自动的替换掉 application-production.yml 里面的 ${WECHAT_APPID} 占位符,然后通过 @Value 赋值到 @Service里面的变量 appid。具体配置方式如下,还需要先进入 Heroku 的控制台,然后点击Settings 进行配置,记住左边是 application-production.yml 里面的占位符,右边是你小程序的 id 和 secret。

2,OkHttpClient,是使用的 OKHttp,小编觉得这个用起来比 Apache 的 HttpClient 要简单,代码就不需要讲解了,继续要因为一个 pom.xml 文件。

<!--调用 HTTP 请求-->
<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>3.8.1</version>
</dependency>

3,JSON.parseObject 直接解析String到对象。 4,throw new ErrorCodeException(CommonErrorCode.OBTAINOPENIDERROR); 直接返回业务的ErrorCode,

对了,忘记说最重要的一个问题,这次改动需要添加4个pom.xml

<!--自动生成 set get 方法-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.12.4</version>
</dependency>
<!--调用 HTTP 请求-->
<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>3.8.1</version>
</dependency>
<!--解析 JSON 工具-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.33</version>
</dependency>
<!--SHA1 加密工具包-->
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.11</version>
</dependency>

已经在原文中添加注释。 服务端源码地址 https://github.com/codedrinker/jiuask-server 本讲 Tag V5

原文发布于微信公众号 - Web项目聚集地(web_resource)

原文发表时间:2018-11-30

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏邹立巍的专栏

Linux 的进程间通信:消息队列

Linux 环境提供了 XSI 和 POSIX 两套消息队列,本文将帮助您掌握以下内容:如何使用 XSI 消息队列,如何使用 POSIX 消息队列,它们的底层实...

83800
来自专栏云计算

腾讯云支持 Terraform 开发实践

这篇文章从系统架构开始,到核心库讲解,到实践开发,再到单元测试,比较完整的描述了支持Terraform的开发全过程。

4.8K180
来自专栏刘望舒

Android系统启动流程(三)解析SyetemServer进程启动过程

前言 上一篇我们学习了Zygote进程,并且知道Zygote进程启动了SyetemServer进程,那么这一篇我们就来学习Android7.0版本的Syetem...

23360
来自专栏从零开始学自动化测试

Selenium3+python自动化50-环境搭建(firefox)

前言 有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的。 安装环境过程中...

32850
来自专栏coding...

Mac下使用Jenkins踩坑 Fastlane自动化iOS打包写在前面使用FastlaneJenkins 踩坑后记

最近项目在做新项目时经常发现有很多小bug需要改动,一改就要重新打包,哪怕是一个很小的项目,光是编译打包导出,再上传到测试平台没个十几分钟也是下不来的。本来的话...

22430
来自专栏崔庆才的专栏

一看就懂,Python 日志模块详解及应用

Windows网络操作系统都设计有各种各样的日志文件,如应用程序日志,安全日志、系统日志、Scheduler服务日志、FTP日志、WWW日志、DNS服务器日志等...

16840
来自专栏小巫技术博客

Gradle插件开发-上传Apk到Bugly

26460
来自专栏匠心独运的博客

消息中间件—RabbitMQ(集群监控篇1)

摘要:任何没有监控的系统上线,一旦在生产环境发生故障,那么排查和修复问题的及时性将无法得到保证

30630
来自专栏IT技术精选文摘

JVM致命错误日志(hs_err_pid.log)分析

当jvm出现致命错误时,会生成一个错误文件 hs_err_pid<pid>.log,其中包括了导致jvm crash的重要信息,可以通过分析该文件定位到导致cr...

68150
来自专栏Python

Linux权限详解 命令之 chmod:修改权限

在这种使用方式中,首先我们需要了解数字如何表示权限。 首先,我们规定 数字 4 、2 和 1表示读、写、执行权限(具体原因可见下节权限详解内容),即 r=4,w...

33020

扫码关注云+社区

领取腾讯云代金券