阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      微信⼩程序 登录

      问题

      微信⼩程序 登录

      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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录