今天微信小程序开发栏目介绍小程序登录的前端设计与实现。一. 前言

对于登录/注册的设计如此精雕细琢的目的，当然是想让这个作为应用的基础能力，有足够的健壮性，避免出现全站性的阻塞。

同时要充分考虑如何解耦和封装，在开展新的小程序的时候，能更快的去复用能力，避免重复采坑。

登录注册这模块，网站优化，就像个冰山，我们以为它就是「输入账号密码，就完成登录了」，但实际下面还有各种需要考虑的问题。

在此，跟在座的各位分享一下，最近做完一个小程序登录/注册模块之后，沉淀下来的一些设计经验和想法。

在用户浏览小程序的过程中，由业务需要，往往需要获取用户的一些基本信息，常见的有：

微信昵称

微信手机号

而不同的产品，对于用户的信息要求不尽相同，也会有不一样的授权流程。

第一种，常见于电商系统中，用户购买商品的时候，为了识别用户多平台的账号，往往用手机号去做一个联系，这时候需要用户去授权手机号。

第二种，为了让用户信息得到基本的初始化，往往需要更进一步获取用户信息：如微信昵称，unionId 等，就需要询问用户授权。

第三种，囊括第一种，第二种。

秉着沉淀一套通用的小程序登录方案和服务为目标，我们去分析一下业务，得出变量。

在做技术设计之前，讲点必要的废话，对一些概念进行基本调频。

登录在英文中是 「login」，对应的还有 「logout」。而登录之前，你需要拥有一个账号，就要 「register」（or sign up）。

话说一开始的产品是没有登录/注册功能的，用的人多了就慢慢有了。出于产品本身的需求，需要对「用户」进行身份识别。

在现实社会中，我们每个人都有一个身份ID：身份证。当我到了16岁的时候，第一次去公安局领身份证的时候，就完成了一次「注册」行为。然后我去网吧上网，身份证刷一下，完成了一次「登录」行为。

那么对于虚拟世界的互联网来说，这个身份证明就是「账号+密码」。

常见的登录/注册方式有：

账号密码注册

在互联网的早期，个人邮箱和手机覆盖度小。所以，就需要用户自己想一个账号名，我们注册个QQ号，就是这种形式。

邮箱地址注册

千禧年之后，PC互联网时代快速普及，我们都创建了属于自己的个人邮箱。加上QQ也自带邮箱账号。由于邮箱具有个人私密性，网站制作，且能够进行信息的沟通，因此，大部分网站开始采用邮箱账号作为用户名来进行注册，并且会在注册的过程中要求登录到相应邮箱内查收激活邮件，验证我们对该注册邮箱的所有权。

手机号码注册

在互联网普及之后，智能手机与移动互联网发展迅猛。手机也成为每个人必不可少的移动设备，同时移动互联网也已经深深融入每个人的现代生活当中。所以，相较于邮箱，目前手机号码与个人的联系更加紧密，而且越来越多的移动应用出现，采用手机号码作为用户名的注册方式也得到了广泛的使用。

到了 2020 年，微信用户规模达 12 亿。那么，微信账号，起码在中国，网站优化，已成为新一代互联网世界的「身份标识」。

而对微信小程序而言，天然就能知道当前用户的微信账号ID。微信允许小程序应用，能在用户无感知的情况下，悄无声息的「登录」到我们的小程序应用中去，这个就是我们经常称之为的「静默登录」。

其实微信小程序的登录，跟传统 Web 应用的「单点登录」本质是一样的概念。

单点登录：在 A 站登录了，C 站和 B 站能实现快速的「静默登录」。

微信小程序登录：在微信中，登录了微信账号，那么在整个小程序生态中，都可以实现「静默登录」。

由于 Http 本来是无状态的，业界基本对于登录态的一般做法：

cookie-session：常用于浏览器应用中

access token：常用于移动端等非浏览器应用

在微信小程序来说，对于「JS逻辑层」并不是一个浏览器环境，自然没有 Cookie，那么通常会使用 access token 的方式。