小程序授权流程方案【unionID版】

什么是UnionID?

微信官方的定义:如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

简单来说,是开放平台中对用户身份的唯一标识。可先阅读《微信开发中OpenID 和 UnionID的区别》进行了解。

获取 UnionID 的方式

绑定了开发者帐号的小程序,可以通过以下途径获取 UnionID。

  1. 调用接口 wx.getUserInfo,从解密数据中获取 UnionID。注意本接口需要用户授权,请开发者妥善处理用户拒绝授权后的情况。
  2. 如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号。开发者可以直接通过 wx.login + code2Session 获取到该用户 UnionID,无须用户再次授权。
  3. 如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用。开发者也可以直接通过 wx.login + code2Session 获取到该用户 UnionID ,无须用户再次授权。
  4. 用户在小程序(暂不支持小游戏)中支付完成后,开发者可以直接通过getPaidUnionId接口获取该用户的 UnionID,无需用户授权。注意:本接口仅在用户支付完成后的5分钟内有效,请开发者妥善处理。
  5. 小程序端调用云函数时,如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号,可在云函数中通过 cloud.getWXContext 获取 UnionID。
  6. 小程序端调用云函数时,如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用,也可在云函数中通过 cloud.getWXContext 获取 UnionID。

以下将针对第一种方式 —— 从 wx.getUserInfo 的解密数据中获取 UnionID 的方案,设计小程序在业务上的登录流程

小程序登录流程方案

如图所示

  1. 调用 wx.login 接口,得到 code ( 注意 code 只能使用一次,且有效期五分钟 )

  2. 通过 <button> 组件定义用户授权框,待用户点击时,弹出授权框

  3. 在用户同意授权的情况下,执行以下流程函数

    3.1 重新执行 wx.login 得到 code。(为什么要重新执行呢?下面讲)

    3.2 执行 wx.getUserInfo 接口,得到用户的基础数据以及一些加密数据 ( 在已得到用户同意授权的情况下,该接口将直接返回用户的数据 )

  4. 将相关数据传给后台,后台解密得到 UnionID

详细流程请看下图

上面留了一个小疑问。

为什么在用户同意授权的情况下,要重新执行 wx.login,重新走一次获取数据的流程呢?

结合以下两点说明:

  1. 细心的读者应该发现, code 是一个极其奇妙的字段

    • 只能使用一次
    • 有效期只有5分钟
  2. 通过<button> 触发的弹出授权框,在等待用户授权的时间里,不能保证是否会超过5分钟(这里不能假设用户都是马上进行响应的,有可能刚好接个电话什么的,就开始煲电话粥了,煲完之后再点击授权)

结合上述两点,为防止用户操作超时,因此在用户同意授权的情况下,重新再走一次 login 和 getUserInfo 的流程。

总结

由于有大量的场景需要使用到UnionID,此方案是以获取 UnionID 为重点的方案。

如果不需要使用到 UnionID 的话,仅仅使用 OpenID ,整个流程可以简化许多。

与此同时,在系统设计用户授权的情况下,尽可能让用户在拒绝授权的情况下,也可以参与或浏览该产品,否则会很容易因为一个硬性的授权逻辑而提高了用户使用的门槛,避免因此导致用户量不高的问题。

如果你也在优化或研究小程序的登录模块,欢迎和我们一起交流~

作者简介:李尧晖,芦苇科技web前端开发工程师,代表作品:飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究,有兴趣的小伙伴来撩撩我们~ web@talkmoney.cn

访问 www.talkmoney.cn 了解更多