code换取微信openid_微信小程序登录机制

“ 不是0，也不是1，有0也有1 ”

总有一个瞬间，你想记录当下的一些事情，所以有了这篇文章，不会口吐芬芳，我直接开门了，但愿能让你见山。

1. 背景

---

 21 届的校园招聘已经打响了，腾讯已经开始在学校圈地招人了，尤其是在今年这样一个特殊的年份，自己要如何应对一年一度的 “ 最难就业年 ” ？细品之后，我决定动手撸一个微信小程序，一来可以体验一下从 0 到 1 的过程，二来也想体验一把跟面试官谈笑风生的感觉。事实证明从 0 到 1，确实是个很有意义的过程。小程序《Hi 便校园》，敬请期待。 2. 微信小程序登录机制

---

2.1 微信的开放文档中的登录流程时序图

2.2 时序图解读

首先说明一点，从我打开微信的开放文档开始了解小程序开始到随后的一个小时，我心里喊了也就 78 遍卧槽，这不就是往微信里嵌了个 vue.js 么？我这个半吊子前端都能玩的起来，你还不来学(zhuang)习(bi)! 言归正传，从时序图可以看出，单个微信小程序的APP是由“小程序”，“开发者服务器”，“微信接口服务”三者构成一个基本闭环系统，是个超级典型的前后端分离架构，“小程序”相当于是前后端分离后的前端，“开发者服务器”，“微信接口服务”则是后端部分。当然这里仅仅指的是非云开发模式，即自建后台服务器，本文也仅讨论非云开发模式。

首先在小程序里调用  wx.login();  官方小程序demo 里的代码如下：

wx.login({      success: res => {        // 发送 res.code 到后台换取 openId, sessionKey      }    })

在控制台打印出来的 res 如下：

{errMsg: "login:ok", code: "071thvbj1D3eot0PFifj17RMbj1thvbF"}

至此时序图中的第一步已经完成，接下来按照时序图就是将这个 code 发送到自己的后台服务器，后台服务器再去请求微信的接口获取用户的 openid 和 session_id，官方示例 demo 中也的注释部分也做了引导，这里需要注意的是小程序没法直接请求微信的这个接口，必须通过我们的后台服务器做中转，另外，我们的后台服务器必须经过备案且部署 ssl 证书(可以申请阿里云的免费证书)。

wx.login({      success: res => {        // 发送 res.code 到后台换取 openId, sessionKey        wx.request({           url: '后台服务器的校验url',           data:{             js_code:res.code           }         })      }    })

后台服务器收到这个 code 后，带上 appid 和 appsecret 即可调用微信接口服务 auth.code2Session (具体接口参数说明在微信开放文档搜索即可)，接口返回的用户 openid 和 session_id，结果如下：

{    "session_key": "ZCTrI2xZTXZB8nkz1M7O/w==",    "openid": "oo-Co5W4twoXdIlch_Q9V1Uhd4p4"}

在这里说明一下 openid 的用处，openid 是用户在小程序里的唯一标识。拿到 openid 和 session_key 后的流程就比较简单了，这里不再多逼逼了。另外注意微信官方明确指明这个 session_key 必须要妥善保存好，不要发送到小程序端。到这里我的问题就是，为什么这个机制是这样的呢？琢磨了一下可能是出于以下方面的考虑，第一同样是为了解决http无状态的问题，小程序端并没有提供任何可以标识自己身份的机制，在我们本身应用没有做自己的账号口令认证的情况下，不借助微信的接口服务，我们后台服务器很难感知对端的请求信息；第二即使我们做了自己的账号口令登录，我们可以自己进行信息统计，但是我们如果要进行高权限的接口调用，如微信支付，这时还是无法避免要建立跟微信接口服务建立会话；最后，微信帮助我们进行的一些数据统计也是依赖于这个机制。