chatgpt登陆一次都需要验证码吗 微信扫码登录之最简实现

AI资讯1年前 (2023)发布 fengdao
41 0

最近开发某应用的PC端后台管理时,突然对登录页面的账号密码还有图片识字验证码感到厌烦了,不仅填写麻烦,要记账号密码也麻烦。为什么不尝试用微信扫码登录呢?功能实现后,我整理出来分享给大家(友情提示:阅读本文需要比较熟悉微信公众号的相关开发,前端框架是基于vue3的 plus,后端是.net6.0 的c# )。本文是针对PC上web应用的登录场景下,实际上我以前做过桌面端wpf程序的微信扫码登录,大致流程和代码也是一样的,也就是说所有客户端显示二维码,让用户扫码登录,处理流程大体是一样,差异只是因为客户端不同,扫码成功后服务端发送登录信息给客户端所采用的推送方式也不同。

一 功能设计描述

在PC上打开后台登陆页,无账号密码录入框,只显示一个二维码。拿出手机微信扫码,手机端显示登录成功的提示,然后pc端的登录页面自动跳转到登录后的下个页面。

二开发前提条件:

作为管理后台,要用微信扫码登录,就表示登录用户在数据库里必须已记录了在自家公众号下的。简单说,得有公众号,用户表里得有用户的(如何获取可以参考微信公众号开发文档),因为如何建立后台管理用户大家都各有各的做法,我这里就很简单,发个链接给用户微信,让他点开获取微信身份授权后,再填入他在管理后台的账号密码,连同微信授权code一起发到服务端即可。接口地址必须在公众号的授权回调域中配置好。更详细内容请参考微信公众号开发的网页授权部分。

登录要验证码_chatgpt登陆一次都需要验证码吗_验证码登录需要收信息费吗

三 程序流程设计

登陆页面初始化,生成随机字符串, 二维码链接带上 ,当用微信扫二维码时,服务端获得用户微信进而通过找到用户,核查合法后把用户信息和一起写入缓存。则用作为参数查询服务端的登录结果,服务端则从缓存读取该的登录信息返回给客户端,客户端获得登录信息后存在本地并跳转主页,这是大致的流程。

由于扫码成功后,登录页面需要自动完成登录过程,这里就涉及了一个web开发常见的问题-推送,即扫码后服务端需要主动把登录结果发送给登录页面。本着用最简单方式实现的目的,我这里就是直接就用axios发一个正常请求,然后把 参数设置大一点,我打算通过服务端hold住线程轮询数据来实现。当然更完美一点的方案,就是用之类让请求轮询执行,或者长轮询,或者使用等方法,因篇幅限制,不展开细讲。

1 客户端 登录页面vue代码,我过滤了ui样式以及细节处理的代码,就是一个显示二维码的vue组件vue-qr,页面初始化生成一个,拼在一个服务端接口地址上,形成二维码组件的链接。页面初始化同时也用发起查询登录结果请求。


    
请使用微信扫码登录

© 版权声明

相关文章

暂无评论

暂无评论...