一文搞定小程序登录

前言

小程序微信登录乍一看好像很简单，真正实现起来却各种坑，不止技术上，运营上也有，本文将相关细节整理出来，希望能帮小程序开发者避坑

正文

第一步分析需求，明确需要的微信登录等级

微信登录等级这个词是我自己造的，意思就是根据需求看实现哪个级别复杂度的微信登录，高级别能够获取的数据和实现的功能多，相应的也更复杂，低级别的反之

我将微信登录等级分成3个级别：

1. 简单登录
2. 拉取用户信息登录
3. 打通多应用登录

简单登录

适用于产品对用户信息不敏感，只是简单要个登录功能，实现唯一标识一个用户即可

例如：笔记，备忘录，小游戏，等工具型应用，外卖快递点餐等O2O应用等

这些场景一般不需要拉取用户信息（到自己的业务 server）

如果仅仅需要在小程序内展示用户的微信头像昵称等，完全可以使用 组件，常用的都能直接展示，也可以自定义样式，并不需要拉取用户信息

此时登录流程非常简单：

• 小程序 wx.login() 拿到 code，传给业务 server
• 业务 server 调用微信 code2Session 接口拿到 openid 后保存

就可以了，openid 作为用户的唯一标识，自己实现 cookie / token 登录态就完事了

拉取用户信息登录

适用于产品需要拉取用户的个人信息，即用户的头像，昵称，城市，等信息

例如：

• 产品需要固化下来用户的昵称头像（微信更改了这边不会改）
• 产品需要利用用户的微信填写所在地做 LBS
• 产品需要根据用户性别做不同逻辑

此时就需要 getUserInfo 了

然而现在微信对于弹窗授权的限制越来越严，wx.getUserInfo 现在不会再弹窗授权，若之前用户未授权则会静默失败，说白了就是防止用户一打开小程序就弹窗让授权，提高用户体验

所以现在 getUserInfo 都需要用 ，让用户显式点击从而弹窗授权，也就说用户主动想登录了，你才能弹窗

流程和简单登录其实一样，wx.login() 和 getUserInfo 完全解耦，各负责各的即可

打通多应用登录

打通多应用稍微复杂一点，需要拿到 unionid，而 unionid 也在 getUserInfo 返回的数据中，然而是加密的，要解密需要用到 server 调用微信的 code2Session 获得的 sessioKey，而这个 sessionKey 又和前端调用 wx.login() 有关系，再加上无法直接调用 wx.getUserInfo，必须让用户主动点按钮，时序又变成异步，综合起来就稍微复杂

1. wx.login 拿到 code，此时不要先请求业务 server，需要等待用户点击 getUserInfo 的按钮
2. 一起请求业务 server（同时带上 code 和 userinfo）
3. 业务 server 先去微信用 code 换 sessionKey，然后用 sessionKey 解密 userinfo 即可

坑来了

你说那既然要等用户点按钮，我干脆在用户点完按钮拿到 userInfo 之后再调 wx.login，流程不就简单点?

不好意思不行。

因为 getUserInfo 的时候微信的服务器是用当时时间点的 sessionKey（keyA）加密的，之后再调用 wx.login 的话（时间点 B），这个 API 可能改变 sessionKey（变成 keyB），后面用这个 code 换到的 sessionKey（keyB）已经不是之前微信用于加密 userinfo 的那个（keyA）了，所以解不出来的！！！

以为这就完了么？NO

微信在2019年中又发布了新规

• 一般应用不得一进入小程序就让用户登录，必须要在用户了解小程序的基本功能之后方可引导登录，也就说不但不能自动弹窗授权，甚至也不能一开始就自动跳登录页，必须设计一些匿名状态可见的页面，然后当用户手动触发某些操作（必须发布内容）才可引导登录
• 登录页除了登录按钮之后，还必须设计拒绝按钮，即用户即使进入了登录页，仍然可以取消并返回匿名状态

不按照这样设计，对不起，审核打回，改好重新提审。

怎么说呢，也是好事，规范还是要有，就是苦了程序猿 :(