微信授权登录实践小结-小程序授权登录(包含API调整后说明)

·  阅读 1353

小程序获取用户信息
UnionID 机制说明
小程序登录、用户信息相关接口调整说明

业务需求:已有APP应用、H5应用,登录方式有账号密码登录、短信验证码登录,用户唯一标识为手机号。新的需求:需要新开发小程序应用、H5新增微信服务号授权登录的登录方式,目标实现多端数据互通以及便捷的登录方式。因为本需求有在APP、小程序、H5统一用户账号的需求,所以需要使用unionid。

【2021.3.17更新】 API调整后,获取unionid的途径: image.png
API调整后,wx.login 可直接获取unionid,不再依赖从 wx.getUserInfo 解密出unionid,登录与获取用户信息的API完全分离,对于新手来说更易理解。由于本项目不使用 wx.getUserInfo 返回的用户昵称、头像等信息,所以此次API调整侥幸不受影响🤣。
以下小程序授权登录处理的步骤(2-2)里面,不区分用户条件,都能直接从wx.login 获取unionid,省去原代码里的部分逻辑处理。
以下是原文:

开发前准备

在微信开放平台绑定小程序:开放平台 管理中心-小程序-绑定小程序

小程序获取UnionID途径

  • 通过 wx.login + code2Session,前提是(本项目不涉及,暂不考虑移动应用微信授权登录):开发者帐号下存在同主体的公众号,并且用户已经关注了该公众号;开发者帐号下存在同主体的公众号,并且用户在该公众号使用过微信服务号网页授权。
  • 通过 wx.getUserInfo,使用 <button open-type='getUserInfo' ></button> 拉起用户信息授权弹窗,用户允许授权取得用户信息后,发给后端解密出 unionid。

同时有小程序应用和使用服务号网页授权的H5应用,使用第二种方式更稳妥,可保证无论用户是否关注公众号、或者是否在服务号使用过“网页授权获取用户基本信息”接口,都可取到 unionid。

关于 wx.getUserInfo 与 wx.login

两个方法无依赖关系,可根据需要独立调用。

  • wx.login,可获取 openid,满足一定条件也可获取 unionid(上述第一种途径)。通过wx.login获取微信code,发给后端,后端去微信服务端可换取到 openid 和 sessionKey。不使用 unionid 的项目,可使用 openid 区分用户,直接使用wx.login实现静默登录。小程序支付需要用到 openid。
  • wx.getUserInfo,可获取用户微信昵称、头像等用户信息以及 unionid。通过wx.getSetting获取用户信息的授权情况,如果用户信息authSetting['scope.userInfo']已授权,可直接调用wx.getUserInfo。如果用户未授权,通过<button open-type='getUserInfo' ></button>拉起用户信息授权弹窗,用户允许授权,再调用wx.getUserInfo

小程序授权登录处理的步骤

本项目的处理:把用户原始唯一标识的手机号和用户新的唯一标识unionid做关联,用户登录后后端返回token给前端,前端发送http请求时携带token作为已登录标识。
1.调用wx.login获取微信code
2.把微信code发给后端查询 openid, unionid, 手机号

  • (2-1)老用户:如果是已绑定的老用户,后端可根据微信code直接从微信服务端换取到 unionid,进而再根据 unionid 查询到有绑定关系的 openid、手机号等。
  • (2-2)新用户:
    如果是新用户,且满足上述获取 unionid 途径1 的条件,后端可根据微信code直接从微信服务端换取到 unionid。
    如果是新用户,且不满足上述获取 unionid 途径1 的条件,后端根据微信code只能从微信服务端换取到 openid。调用wx.getSetting查询用户是否已允许用户信息authSetting['scope.userInfo']的授权。
    • 已允许授权则直接调用wx.getUserInfo获取用户信息发给后端解密出 unionid。
    • 未允许用户信息授权则显示<button open-type='getUserInfo' ></button>按钮,用户点击按钮,拉起询问用户信息授权的弹窗,用户允许授权,再调用wx.getUserInfo取得用户信息,发给后端解密出 unionid。
    新用户在上述两种条件下均已取得 unionid,显示<button open-type='getPhoneNumber'></button>按钮,用户点击按钮,拉起询问用户手机号授权的弹窗,用户允许授权,取得信息发给后端解密出手机号。

3.新老用户均已取得 openid、unionid、手机号,把这些信息发给后端。后端做unionid和手机号的绑定关联,再计算token,最后把token及用户信息返给前端。
4.前端取得 token后,存储在 storage 与 globalData。信息存储在 storage,当小程序进程被杀掉,再次打开小程序时,globalData数据已销毁,可从 storage获取登录信息,保留用户登录状态。
以上,欢迎讨论,如有错漏也欢迎指正,希望对你有帮助😀

分类:
前端
标签: