小程序用户体系全攻略:openid和code的神秘连接,快速实现登录功能!告别繁琐的账号密码验证!

编程入门 行业动态 更新时间:2024-10-26 12:33:02

小程序用户体系<a href=https://www.elefans.com/category/jswz/34/1767112.html style=全攻略:openid和code的神秘连接,快速实现登录功能!告别繁琐的账号密码验证!"/>

小程序用户体系全攻略:openid和code的神秘连接,快速实现登录功能!告别繁琐的账号密码验证!

  

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

目录

 ⭐  专栏简介

 📘  文章引言

一、背景

二、流程

三、扩展

⭐  写在最后


 

 ⭐  专栏简介

        欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。

        同时,我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进,前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术,使你能够站在前沿,与时俱进。通过掌握最新的前端技术,你将能够在竞争激烈的Web开发领域中有更大的竞争力。

 📘  文章引言

一、背景

传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录

服务端校验用户信息通过之后,下发一个代表登录态的 token 给客户端,以便进行后续的交互,每当token过期,用户都需要重新登录

而在微信小程序中,可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系,从而实现登陆功能

实现小程序用户体系主要涉及到openidcode的概念:

  • 调用wx.login()方法会生成code,将code作为参数传递给微信服务器指定接口,就可以获取用户的openid

对于每个小程序,微信都会将用户的微信ID映射出一个小程序 openid,作为这个用户在这个小程序的唯一标识

二、流程

微信小程序登陆具体实现的逻辑如下图所示:

  • 通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息,调用wx.getUserInfo 读取用户数据
  • 由于小程序后台授权域名无法授权微信的域名,所以需要自身后端调用微信服务器获取用户信息
  • 通过 wx.request() 方法请求业务方服务器,后端把 appid , appsecret 和 code 一起发送到微信服务器。 appid 和 appsecret 都是微信提供的,可以在管理员后台找到
  • 微信服务器返回了 openid 及本次登录的会话密钥 session_key
  • 后端从数据库中查找 openid ,如果没有查到记录,说明该用户没有注册,如果有记录,则继续往下走
  • session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输
  • 然后生成 session并返回给小程序
  • 小程序把 session 存到 storage 里面
  • 下次请求时,先从 storage 里面读取,然后带给服务端
  • 服务端对比 session 对应的记录,然后校验有效期

三、扩展

实际业务中,我们还需要登录态是否过期,通常的做法是在登录态(临时令牌)中保存有效期数据,该有效期数据应该在服务端校验登录态时和约定的时间(如服务端本地的系统时间或时间服务器上的标准时间)做对比

这种方法需要将本地存储的登录态发送到小程序的服务端,服务端判断为无效登录态时再返回需重新执行登录过程的消息给小程

另一种方式可以通过调用wx.checkSession检查微信登陆态是否过期:

  • 如果过期,则发起完整的登录流程
  • 如果不过期,则继续使用本地保存的自定义登录态

这种方式的好处是不需要小程序服务端来参与校验,而是在小程序端调用AP,流程如下所示:

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

更多推荐

小程序用户体系全攻略:openid和code的神秘连接,快速实现登录功能!告别繁琐的账号密码验证!

本文发布于:2023-12-03 23:06:44,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1658735.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:全攻略   繁琐   账号   体系   神秘

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!