【微信登录二维码扫一扫】微信扫码登录之最简实现

最近在开发一款应用程序的PC端后台管理时，突然厌倦了登录页面上的账户密码和照片读取确认代码，不仅麻烦，记录账户密码也麻烦。

为什么不尝试用微信扫码登录呢？功能实现后，我整理出来分享给大家（友情提示：阅读本文需要比较熟悉微信公众号的相关开发，前端框架是基于vue3的element plus，后端是.ne 的c# ）。本文是针对PC上web应用的登录场景下，实际上我以前做过桌面端wpf程序的微信扫码登录，大致流程和代码也是一样的，也就是说所有客户端显示二维码，让用户扫码登录，处理流程大体是一样，差异只是因为客户端不同，扫码成功后服务端发送登录信息给客户端所采用的推送方式也不同。

一 功能设计描述

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

二开发前提条件：

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

三 程序流程设计

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

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

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

<template> <div class="loginTis">请使用微信扫码登录</div> <vue-qr :text="qrUrl" > </vue-qr> </div> </template> <script> import vueQr from 'vue-qr'; import { checkLogin, baseURL } from "@/api/api"; export default { components: { vueQr }, data () { const sessionId = random_string(); //生成随时字符串，作为客户端sessionid return { sessionId, qrUrl: baseURL + "/admin/login?sessionId=" + sessionId, //二维码指向地址 }; }, mounted () { checkLogin({ sessionId: }) //询问服务端我的登录是否成功 .then(res => { if ) { //登录成功 this.$rou({ path: "../index" }) } else//登录失败，简单刷新 { alert('登录失败'); loca } }); } }; </script>

2 服务端查询登录结果接口代码，因为逻辑相对简单，所以我先讲这个。简单描述就是收到客户端请求后，用sessionid查询缓存，用每隔2秒轮询查询，一直到查到有结果才返回客户端。客户端收到登录结果就进行下一步处理。

/// <summary> /// 返回登录结果 /// </summary> /// <param name="sessionId">客户端sessionid</param> /// <returns></returns> [EnableCors] [HttpGet] [AllowAnonymous] public object CheckLogin(string sessionId) { var loginResult = Redi;object>($"login_{sessionId}"); while (loginResult == null) { T(2000); loginResult = Redi;object>($"login_{sessionId}"); } return loginResult; }

3 二维码对应服务端代码。这个接口地址也就是二维码的链接，即用户微信扫码后打开的地址,此时code参数为空，服务端会把当前页面重定向到微信的授权页面，获取到微信授权code后再跳转回当前接口地址，此时code不为空了，服务端拿到code，结合公众号的appid accesstoken之类就可以从微信得到用户的openid，拿到openid就可以查询用户表，剩下的不用多介绍了吧。实际开发时 为了使得程序更简单易维护，也可以把接口拆分开，一个是扫码接口，一个是微信授权后跳转回来的接口，我为了省事，两个接口合并在一起，通过检查code是否为空，识别出是扫码还是微信授权后跳转回来。登录成功后 输出一段html代码在手机上显示。

/// <summary> /// 登录接口 /// </summary> /// <param name="sessionId">客户端sessionid</param> /// <param name="code">公众号授权code</param> /// <returns>{userInfo:xxxx, token:xxxx}</returns> [HttpGet] [AllowAnonymous] public async Task Login(string sessionId, string? code = null) { if (code)) { string Redirect_uri = H());//授权后跳转回来 Re($"{APPID}&redirect_uri={redirect_uri}&response_type=code&scope=SCOPE&state=STATE#wechat_redirect"); } else { string openId = await Wec(code); var result = adminServices.Login(openId); if == 0) { Redi($"expert_admin_login_{sessionId}", re, 1); string html = ("$content", "登录成功"); await Re(html); } else { await Re); } } }

码字辛苦，如果觉得有参考价值请点个赞，如果有看不懂的地方欢迎提问，如果有更好更简单的办法欢迎指教！