Code前端首页关于Code前端联系我们

小程序开发策略:登录

terry 2年前 (2023-09-23) 阅读数 174 #移动小程序

在了解小程序登录之前,先写一下我们了解小程序/公众号登录包括两个最关键的用户ID:

  • OpenId是用户为小程序/公众号标识,开发者可以通过该标识识别用户。
  • UnionId是同一主题的微信/公众号/APP的用户ID。开发者必须将同一账号的主体与微信开放平台关联起来。开发者可以使用UnionId在多个小程序、公众号甚至APP之间交换数据。 ?运行授权请求
  • wx.getUserInfo 获取用户基本信息

登录流程规划

以下是笔者接触到的几个登录流程的说明:

使用现有的登录系统

直接复用现有系统的登录系统。在小程序中,您只需创建一个输入用户名、密码/确认码的页面,即可轻松登录。您只需要保持良好的用户体验即可。

使用OpenId创建用户系统

?前面已经提到,OpenId是用户在小程序中的标识。利用这个,我们可以很方便地实现一套基于小程序的用户系统。值得注意的是,这个用户系统对用户的侵入性最小,并且允许静默登录。具体步骤如下:

  1. 小程序客户端通过wx.login获取代码
  2. ,并将代码传递给服务器。服务器获取验证码并调用微信登录凭证验证接口。微信服务器返回openid和会话密钥session_key。目前开发者服务器可以使用openid创建用户数据库,然后返回自定义的登录信息给小程序客户端。 State
  3. 小程序客户端缓存(通过store)调整登录状态(token),然后在调用接口时携带登录状态作为用户身份

使用Unionid创建用户系统

如果你想实现更多的小程序,公众号如果已经有登录系统数据交换,可以通过获取用户unionid来建立用户系统。由于同一开放平台下所有unionid应用都是相同的,通过unionid建立的用户系统可以实现跨平台数据互通,更方便地访问原有功能。如何获取unionid有两种方式:

  1. 如果用户关注某个同一主题公众号或已在同一主题的应用中授权登录微信或通过公众号 wx.login结合wx.getUserInfo可以直接获取unionid
  2. 这两种方式引导用户主动授权。主动授权后,通过返回的信息与服务器通信(有一个步骤需要服务器解密数据,很简单,微信提供了示例代码),获取unionid 建立用户系统然后从服务器返回登录状态。本地记录可用于登录。附微信提供的最佳实践:
    • 调用wx.login获取code,然后替换为微信后台的session_。 key 用于解密 getUserInfo 返回的敏感数据。
    • 使用wx.getSetting获取用户的授权状态
      • 如果用户已被授权,则直接调用wx.getUserInfo接口获取用户的最新信息;
      • 用户未授权,界面会出现按钮提示用户登录。当用户点击并授权时,将检索他们的最新信息。
    • 获取用户数据后,您可以将其显示或发送到您自己的后端。

注意事项

  1. 您必须获取登录系统unionid。过去(4月18日之前)是通过以下方式实现的,但微信后来进行了适配(因为一旦进入主动刷新各种授权弹窗的小程序,很快就会导致用户流失),已适应该方法,其中应使用按钮来引导用户进行主动授权。此调整对开发人员影响较大,开发人员应谨慎考虑。遵守微信规则,及时将业务表单传达给业务客户。不要冒险,防止小程序被审核。
   wx.login(获取code) ===> wx.getUserInfo(用户授权) ===> 获取 unionid
复制代码
  1. 由于小程序没有cookie的概念,所以登录状态必须缓存在本地,所以强烈建议为登录状态设置过期时间
  2. 值得一提如果需要支持风控、安全验证、多平台登录等功能,可能需要添加一些公共参数如platform、channel、deviceParam等参数。在确定服务器方案时,作为初学者,应该及时提出这些合理的建议,设计合理的系统。
  3. openidunionid 不要在界面中提供明文。这是危险的行为,也是非常不专业的行为。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门