【聚禄鼎】一站式企业服务平台近日开发出一款应用PC端后台管理，忽然厌倦了登录网页上账号密码和图片识字验证码，不但填得繁琐，而且要记住账号密码还很麻烦为了解决这个问题，我把PC端后台管理改为在PC端的Web浏览器中直接使用微信公众平台进行登陆操作。这样既可以减轻输入难度，又能提高工作效率，还不用担心被人盗取账号为了解决这个问题，我设计并实现了一个简单易用且操作方便的扫码登录功能完成之后，笔者整理成文与大家共享（友情提醒:看完此文需更加熟悉微信公众号相关发展，前端框架以vue3为核心elementplus、后端以。net6.0为核心c#本论文以PC中web应用登录为场景，其实笔者之前曾经在桌面端wpf程序中做过微信扫一扫登录，其大致过程与代码相同，即所有客户端都会展示二维码供用户扫一扫进行登录，其处理过程基本相似，区别仅在于客户端有所不同，扫一扫成功之后服务端会将登录信息发送到客户端使用推送方式有所不同
一功能设计说明
打开PC中的后台登陆页没有账号密码输入框，只有二维码进入账户管理界面，输入用户名和密码。点击登陆”按钮。系统会自动记录用户信息及账号，并将其保存为数据库。选择登录类型，即可进行相应操作。查看所有数据掏出手机微信扫一扫，在手机端就会出现登陆成功提示信息，随后pc端登陆网页会自动跳过登陆下一个网页
二发展的前提条件:
作为管理后台需要使用微信扫一扫登陆，说明登陆用户必须已经将自己公众号下方openid录制到数据库中那么，如何才能获得账号权限呢？答案就是要先把用户名和密码输入到客户端界面上。这个过程一般需要2~3天时间。如果使用微信支付，则只需几分钟简单来说就是必须要有一个公众号和用户表必须要有一个用户openid（怎么获得可查阅微信公众号开发文件），由于怎么设置后台来对用户进行管理每个人都有自己的方法，所以笔者这里非常简单，就是发一个链接到用户微信上，请用户点开获得微信身份授权，然后填写自己管理后台账号密码并和微信授权code同时发送给服务端接口地址见本期公众号的授权回调域中详见微信公众号发展网页授权栏目
三程序流程设计
登陆网页初始化并产生随机字符串"sessionid"，二维码链接带"sessionid"，在使用微信扫描二维码的过程中，服务端会获取用户的微信openid，然后通过openid查找用户并验证是否合法，然后将用户的信息连同sessionid写入缓存中在使用过程中发现，当客户端需要访问服务器时，会自动启动一个用户名与密码都为相同的第三方程序进行认证；而当不需要访问服务器时，则直接向服务端发起请求anxios再以sessionid为参数查询服务端登陆结果，服务端从缓存中读取此sessionid登陆信息回传至客户端，客户端在获取到登陆信息之后存在于本地，跳过主页，就可以查看大概过程
登录页面是整个web开发过程中最为重要的部分之一，-个好的界面不仅可以让用户方便地进行各种操作，而且还能通过推送的形式将服务端的登录结果显示在用户面前，这对于用户来说无疑是非常有吸引力的，但是要想真正做到这点却不是那么容易的事情了本着以最简单的方法完成的宗旨，笔者在此是直接使用axios发送正常的请求，再将connecttimeout参数设置得更大些，笔者准备在服务端hold着线程轮询数据完成在实际工作中，我发现这样做有很多弊端:第一是效率太低；第二是会产生大量重复访问地址；第三是可能会出现死锁现象，无法运行。这些都不好解决在这个过程中，settomeout会自动进行请求轮询和长轮询，并将结果返回给用户，这样整个流程都是在websock网上完成的
1.客户端登陆网页vue编码，本人筛选ui样式和细节处理编码，是展示二维码vue组件vue-qr.网页初始化后产生sessionid并拼接到服务端界面地址，构成二维码组件连接这样可以将所有用户都加入到系统中，当用户通过这个界面输入信息时就会出现相关数据，比如用户名、密码等信息。然后把这些数据存储到数据库里进行备份和恢复。2页面初始化时，还使用sessionid启动查询登录结果的请求
2.服务端询问登录结果的接口代码由于逻辑比较简单，我首先说一下这一点我们服务端的数据库是基于MySQL，使用了Socket技术和jsp语言实现。具体过程如下:首先给用户一个界面。这个界面主要分为两部分:前端界面和后台管理界面sessionid是在2秒内完成的，所以我们可以通过它来控制客户端客户端在接收到登录结果后，执行下一步骤
[][][]publicobjectCheckLogin(stringsessionId){varloginResult=Redis_Utility.Get
3.二维码与服务端代码相对应该接口地址同时是二维码连接，也是用户在微信扫一扫时开启的地址，这时code参数为空格，服务端将当前网页重定向为微信授权网页，在获得微信授权code时跳转回当前接口地址中，这时code不为空格，当服务端获得code时，与公众号appidaccesstoken等组合即可在微信中获得用户openid信息，获得openid信息即可查询用户表信息，其他无需赘述呢4.最后就是实现了整个功能实际开发中为了让程序运行起来更加简单和易于维护，还可将界面拆散，一为扫码界面，一为微信授权之后跳回界面，笔者图省事将两界面合并，通过考察code为空来确定扫码或微信授权之后再跳回登陆成功之后，输出一段html代码，并将其展示到手机中
[][]publicasyncTaskLogin(stringsessionId，string? code=null){if(string.IsNullOrEmpty(code)){stringredirect_uri=HttpUtility.UrlEncode(Request.GetDisplayUrl())；Response.Redirect($"https://open.weixin.qq.c_m/connect/oauth2/authorize?appid={APPID}&；redirect_uri={redirect_uri}&；response_type=code&；scope=SCOPE&；state=STATE#wechat_redirect")；}else{stringopenId=awaitWechatServices.GetOpenId(code)；varresult=adminServices.Login(openId)；if(result.Code==0){Redis_Utility.Set($"expert_admin_login_{sessionId}"，result.Data，1)；stringhtml=htmlTemp.Replace("$content"，"登录成功")；awaitResponse.WriteAsync(html)；}else{awaitResponse.WriteAsync(result.Message)；}}}
码字吃力，如感到有参考价值请点赞好了，有看不明白之处请提出问题，有比较好的简便方法请赐教！
