微信⼩程序 登录
问题
微信⼩程序 登录
unionid和openid
了解⼩程序登陆之前，我们写了解下⼩程序/公众号登录涉及到两个最关键的⽤户标识：
-
OpenId 是⼀个⽤户对于⼀个⼩程序／公众号的标识，开发者可以通过这个标识识别出⽤户。
-
UnionId 是⼀个⽤户对于同主体微信⼩程序／公众号／ APP 的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过 UnionId ，实现多个⼩程序、公众号、甚⾄APP 之间的数据互通了。
关键Api
- wx.login 官⽅提供的登录能⼒
- wx.checkSession 校验⽤户当前的 session_key 是否有效
- wx.authorize 提前向⽤户发起授权请求
- wx.getUserInfo 获取⽤户基本信息
登录流程设计
- 利⽤现有登录体系
直接复⽤现有系统的登录体系，只需要在⼩程序端设计⽤户名，密码/验证码输⼊⻚⾯，便可以简便的实现登录，只需要保持良好的⽤户体验即可
利⽤ OpenId 创建⽤户体系
OpenId 是⼀个⼩程序对于⼀个⽤户的标识，利⽤这⼀点我们可以轻松的实现⼀套基于⼩程序的⽤户体系，值得⼀提的是这种⽤户体系对⽤户的打扰最低，可以实现静默登录。具体步骤如下
- ⼩程序客户端通过 wx.login 获取 code
- 传递 code 向服务端，服务端拿到 code 调⽤微信登录凭证校验接⼝，微信服务器返回openid 和会话密钥 session_key ，此时开发者服务端便可以利⽤ openid ⽣成⽤户⼊库，再向⼩程序客户端返回⾃定义登录态
- ⼩程序客户端缓存 （通过 storage ）⾃定义登录态（ token ），后续调⽤接⼝时携带该登录态作为⽤户身份标识即可
利⽤ Unionid 创建⽤户体系
如果想实现多个⼩程序，公众号，已有登录系统的数据互通，可以通过获取到⽤户 unionid 的⽅式建⽴⽤户体系。因为 unionid 在同⼀开放平台下的所所有应⽤都是相同的，通过 unionid 建⽴的⽤户体系即可实现全平台数据的互通，更⽅便的接⼊原有的功能，那如何获取 unionid 呢，有以下两种⽅式
-
如果户关注了某个相同主体公众号，或曾经在某个相同主体 App 、公众号上进⾏过微信登录授权，通过 wx.login 可以直接获取 到 unionid
-
结合 wx.getUserInfo 和
<button open-type="getUserInfo"><button/>这两种⽅式引导⽤户主动授权，主动授权后通过返回的信息和服务端交互 (这⾥有⼀步需要服务端解密数据的过程，很简单，微信提供了示例代码) 即可拿到 unionid 建⽴⽤户体系， 然后由服务端返回登录态，本地记录即可实现登录，附上微信提供的最佳实践 -
调⽤ wx.login 获取 code ，然后从微信后端换取到 session_key ，⽤于解密getUserInfo 返回的敏感数据
-
使⽤ wx.getSetting 获取⽤户的授权情况
- 如果⽤户已经授权，直接调⽤ API wx.getUserInfo 获取⽤户最新的信息；
- ⽤户未授权，在界⾯中显示⼀个按钮提示⽤户登⼊，当⽤户点击并授权后就获取到⽤户的最新信息
-
获取到⽤户数据后可以进⾏展示或者发送给⾃⼰的后端。
注意事项
需要获取 unionid 形式的登录体系，在以前（18年4⽉之前）是通过以下这种⽅ 式来实现，但后续微信做了调整（因为⼀进⼊⼩程序，主动弹起各种授权弹窗的这 种形式，⽐较容易导致⽤户流失），调整为必须使⽤按钮引导⽤户主动授权的⽅ 式，这次调整对开发者影响较⼤，开发者需要注意遵守微信的规则，并及时和业务 ⽅沟通业务形式，不要存在侥幸⼼理，以防造成⼩程序不过审等情况
wx.login(获取code) ===> wx.getUserInfo(⽤户授权) ===> 获取 unionid
因为⼩程序不存在 cookie 的概念， 登录态必须缓存在本地，因此强烈建议为登 录态设置过期时间
值得⼀提的是如果需要⽀持⻛控安全校验，多平台登录等功能，可能需要加⼊⼀些 公共参数，例如 platform ， channel ， deviceParam 等参数。在和服务端确 定⽅案时，作为前端同学应该及时提出这些合理的建议，设计合理的系统。
openid ， unionid 不要在接⼝中明⽂传输，这是⼀种危险的⾏为，同时也很 不专业
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
