微信小程序登录流程详解

传统登录是怎么做的

image

如上图，传统 APP 需要做以下几个工作：

1. 注册

在用户使用 APP 之前需要先注册，常见的注册方式有邮箱注册、手机号注册等，注册完需要设置账号密码，以便后面进行登录。这一步用户在整个生命过程中仅需操作一次。

2. 登录

一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录，服务端校验用户信息通过之后，下发一个代表登录态的 token 给客户端，以便进行后续的交互。每当 token 过期，用户都需要重新登录。

3. 维持登录态

登录完之后，用户能使用 APP 了，这个时候所有客户端请求都需要将代表登录状态的 token 夹在 http 请求里传给服务端，以便服务端确认用户身份，一般的做法就是将 token 放到 cookie 里或者放到请求头里。

小程序登录为什么能做到更好的体验

从上面可以看出传统 APP 整个注册登录流程还是比较繁琐的，那么小程序为啥能做得更简洁优雅呢？首先，我们需要大致了解小程序用户体系。

小程序用户体系

对于每个小程序，微信都会将用户的微信 ID 映射出一个小程序 openid，作为这个用户在这个小程序的唯一标识。（注意：同一微信用户在不同小程序的 openid 不同。）

对于拥有多个小程序的开发者，开发者可以注册一个微信开放平台账号，然后把所有小程序绑定在这一个开放平台下，这样的话微信还会将微信 ID 映射出一个 unionid，作为这个用户在整个开放平台的唯一 ID。（注：该能力不单限于小程序，所有公众号、网站、移动 APP，只要使用微信开放能力登录的应用，都能获取到 unionid，这样就能打通各个平台的用户账号体系了。）

了解了以上知识，就可以分析为啥小程序登录更简洁优雅了。

1. 小程序不需要用户注册

小程序寄生在微信 APP 内，微信已经做完了用户注册这个事情了，只需要微信告诉你这个微信用户是谁就行了。

2. 小程序登录能够通过技术手段让用户无感知

传统的登录需要输入账号密码，为啥小程序登录不需要呢？因为小程序运行在微信里面，而此时用户本身必然处于微信的登录态，这样小程序开发者就可以通过接口与微信服务器进行沟通，获取用户信息。如果把这个过程设置在小程序启动时执行，那么整个过程对用户来说就是无感知的。这也就是静默登录。

3. 维持登录态

微信小程序的执行环境并不是一个浏览器环境，没有 cookie，因此一般将 token 放入 http 请求头部里。

最佳实践

小程序启动过程中，小程序客户端调用登录接口获取登录 code，将 code 给到小程序服务端，小程序服务端拿到 code 去微信服务器换取用户 openid 及 unionid，换取到用户信息后将登录信息记录下来，并生成 token 传给小程序客户端。后续小程序客户端与服务端所有交互均携带该 token。如下图所示：

image

一个疑问

看起来小程序的登录完全不需要用户做什么，但是为啥我们实际使用中遇到的小程序经常需要手动登录？

原因至少有以下几个：

1. 开发者没有仔细了解过小程序开发，直接照搬了 APP 开发那一套

2. 开发者为了获取一些额外的信息，如手机号，这个就涉及到微信的授权问题了

3. 微信小程序迭代的问题，微信登录授权的接口几经变化才成了今天这个样子，老的小程序会有些不同

事实上，利用微信现有接口，我们在绝大部分场景下，确实不需要用户做任何事情，就能实现用户的登录过程，整个过程非常流畅。

参考项目

具体实现可以参考我的商城小程序项目。

项目体验地址：体验

代码：代码