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

r囧r小猫 2021-07-31 11:07 349阅读 0赞

**登录原理**

前面我们耗费在环境搭建上面已经很多时间，这一讲开始真正的和小程序功能对接。

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

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

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

{	
      "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)`，

所以我们把这两个属性直接传递到服务器端，不仅获取到了用户信息，用于存储到服务器端，还能校验请求数据的真实性。

所以这样以后，小编对流程图进行了优化，这样可以减少一次服务端的请求，提高响应速度。![640?wx\_fmt=png][640_wx_fmt_png]`wx.login` 和 `getUserInfo` 获取code 和 用户信息，一起通过 `wx.request` 发送给开发者服务器端，这样便减少一些请求。`jscode2session` 接口到微信接口服务获取 `session_key` 和 `openId`，直接对用户信息进行 `SHA1` 校验，校验成功以后创建自定义登录态，返回自定义登录态到小程序。

**小程序端逻辑实现**

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

然后我们需要在 `question/index.wxml` 文件中的按钮上面添加 `open-type` 和 `bindgetuserinfo`，如下

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

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

![640?wx\_fmt=png][640_wx_fmt_png 2]

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

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` 是定义的请求类型。`success` 和 `fail` 分别是成功和失败的回调，我们会根据返回的 `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();

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

小程序源码地址

**服务端逻辑实现**

上面客户端已经完成，开始开发服务端。 首先我们需要定义一个 `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);	
            }	
        }	
    }

根据如上代码，我们找一些关键点讲解一下`com.codedrinker.error` 包下面的类。

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

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

status 是状态码，如果不是200，都是异常。

下面是对调用微信的 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 里面的关键点。`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。

![640?wx\_fmt=png][640_wx_fmt_png 3]

![640?wx\_fmt=png][640_wx_fmt_png 4]

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

<dependency>	
        <groupId>com.squareup.okhttp3</groupId>	
        <artifactId>okhttp</artifactId>	
        <version>3.8.1</version>	
    </dependency>

3，JSON.parseObject 直接解析String到对象。OPENIDERROR);

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

<dependency>	
        <groupId>org.projectlombok</groupId>	
        <artifactId>lombok</artifactId>	
        <version>1.12.4</version>	
    </dependency>	
    	
    <dependency>	
        <groupId>com.squareup.okhttp3</groupId>	
        <artifactId>okhttp</artifactId>	
        <version>3.8.1</version>	
    </dependency>	
    	
    <dependency>	
        <groupId>com.alibaba</groupId>	
        <artifactId>fastjson</artifactId>	
        <version>1.2.33</version>	
    </dependency>	
    	
    <dependency>	
        <groupId>commons-codec</groupId>	
        <artifactId>commons-codec</artifactId>	
        <version>1.11</version>	
    </dependency>

已经在原文中添加注释。

**我是浪漫的分割线**

**问答**

如果您对本系列文章有兴趣，欢迎置顶本订阅号，第一时间获取更新。

如果有任何问题，欢迎留言，小编很热衷和大家一起讨论技术问题。

另外小编创建了一个技术交流群，请添加小编微信，切记备注“小程序”，小编拉你进去。【只讨论技术，非诚勿扰】

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

[640_wx_fmt_jpeg]: /images/20210731/017a7927971a41a986393a46f6e04b13.png?wx_fmt=jpeg
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzIyNzc1ODQ0MQ==&mid=2247483927&idx=1&sn=b255677072985a96257d18e5638292af&scene=21#wechat_redirect
[640_wx_fmt_png]: /images/20210731/a8f06732ff14424e91a80b7b88c76b99.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/fb29a39a095c4547a0f152d8a9c51399.png?wx_fmt=png
[Link 2]: https://mp.weixin.qq.com/s?__biz=MzIyNzc1ODQ0MQ==&mid=2247483917&idx=1&sn=adbce854a73134e00fda469f06393d08&scene=21#wechat_redirect
[640_wx_fmt_png 2]: /images/20210731/06870975785d48ee890f9666a83e99d2.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/d0ac3a8823434273b5c63071667d014c.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210731/14587d3299924c4fa28df31f6446b518.png?wx_fmt=png
[640_wx_fmt_jpeg 1]: /images/20210731/36f2f541814341cba986bd088ab01849.png?wx_fmt=jpeg