最近开发某应用的PC端后台管理时，突然对登录页面的账号密码还有图片识字验证码感到厌烦了，不仅填写麻烦 ， 要记账号密码也麻烦 。为什么不尝试用微信扫码登录呢？功能实现后，我整理出来分享给大家（友情提示：阅读本文需要比较熟悉微信公众号的相关开发，前端框架是基于vue3的element plus，后端是.net6.0 的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(); //生成随时字符串 ， 作为客户端sessionidreturn {sessionId,qrUrl: baseURL + "/admin/login?sessionId=" + sessionId,//二维码指向地址};},mounted () {checkLogin({ sessionId: this.sessionId })//询问服务端我的登录是否成功.then(res => {if (res.data) {//登录成功this.$router.push({path: "../index"})} else//登录失败，简单刷新{alert('登录失败');location.href=https://www.bjxdyg.com/life/location.href}});}};
推荐阅读
- 凌度怎么让雨刮器停在中间 凌度如何让雨刮器停在中间
- 老鼠胶贴到衣服怎么办 老鼠贴上的胶粘到衣服上怎么去除
- 购买二手房怎么样贷款 买二手房咋样贷款
- 手机麦克风没声音怎么回事，手机麦克风没声音怎么回事OPPO
- excel自动生成组织结构图 结构图怎么制作
- 科三怎么考 驾考科目三怎么考试
- 48v电动车上坡没劲怎么办呢？ 48v电动车上坡没劲怎么办呢视频
- 观音莲怎么养 观音莲怎么养才长得好
- 汽油泵坏了怎么换 汽油泵坏了如何换
- 在云南昭通犯故意伤害罪具体会被怎么判