小程序授权流程方案【unionID版】
什么是UnionID?
微信官方的定义:如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。
简单来说,是开放平台中对用户身份的唯一标识。可先阅读《微信开发中OpenID 和 UnionID的区别》进行了解。
获取 UnionID 的方式
绑定了开发者帐号的小程序,可以通过以下途径获取 UnionID。
- 调用接口
wx.getUserInfo
,从解密数据中获取 UnionID。注意本接口需要用户授权,请开发者妥善处理用户拒绝授权后的情况。 - 如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号。开发者可以直接通过
wx.login
+code2Session
获取到该用户 UnionID,无须用户再次授权。 - 如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用。开发者也可以直接通过
wx.login
+code2Session
获取到该用户 UnionID ,无须用户再次授权。 - 用户在小程序(暂不支持小游戏)中支付完成后,开发者可以直接通过
getPaidUnionId
接口获取该用户的 UnionID,无需用户授权。注意:本接口仅在用户支付完成后的5分钟内有效,请开发者妥善处理。 - 小程序端调用云函数时,如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号,可在云函数中通过 cloud.getWXContext 获取 UnionID。
- 小程序端调用云函数时,如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用,也可在云函数中通过 cloud.getWXContext 获取 UnionID。
以下将针对第一种方式 —— 从 wx.getUserInfo 的解密数据中获取 UnionID 的方案,设计小程序在业务上的登录流程
小程序登录流程方案
如图所示
调用 wx.login 接口,得到 code ( 注意 code 只能使用一次,且有效期五分钟 )
通过
<button>
组件定义用户授权框,待用户点击时,弹出授权框在用户同意授权的情况下,执行以下流程函数
3.1 重新执行 wx.login 得到 code。(为什么要重新执行呢?下面讲)
3.2 执行 wx.getUserInfo 接口,得到用户的基础数据以及一些加密数据 ( 在已得到用户同意授权的情况下,该接口将直接返回用户的数据 )
将相关数据传给后台,后台解密得到 UnionID
详细流程请看下图
上面留了一个小疑问。
为什么在用户同意授权的情况下,要重新执行 wx.login,重新走一次获取数据的流程呢?
结合以下两点说明:
细心的读者应该发现, code 是一个极其奇妙的字段
- 只能使用一次
- 有效期只有5分钟
通过
<button>
触发的弹出授权框,在等待用户授权的时间里,不能保证是否会超过5分钟(这里不能假设用户都是马上进行响应的,有可能刚好接个电话什么的,就开始煲电话粥了,煲完之后再点击授权)
结合上述两点,为防止用户操作超时,因此在用户同意授权的情况下,重新再走一次 login 和 getUserInfo 的流程。
总结
由于有大量的场景需要使用到UnionID,此方案是以获取 UnionID 为重点的方案。
如果不需要使用到 UnionID 的话,仅仅使用 OpenID ,整个流程可以简化许多。
与此同时,在系统设计用户授权的情况下,尽可能让用户在拒绝授权的情况下,也可以参与或浏览该产品,否则会很容易因为一个硬性的授权逻辑而提高了用户使用的门槛,避免因此导致用户量不高的问题。
如果你也在优化或研究小程序的登录模块,欢迎和我们一起交流~
作者简介:李尧晖,芦苇科技web前端开发工程师,代表作品:飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究,有兴趣的小伙伴来撩撩我们~ web@talkmoney.cn
访问 www.talkmoney.cn 了解更多