微信扫码登录功能实现(微信扫码登录怎么弄)

3,2201阅读模式

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

一 功能设计描述文章源自懂站帝-http://www.sfdkj.com/12836.html

在PC上打开后台登陆页,无账号密码录入框,只显示一个二维码。拿出手机微信扫码,手机端显示登录成功的提示,然后pc端的登录页面自动跳转到登录后的下个页面。文章源自懂站帝-http://www.sfdkj.com/12836.html

二开发前提条件:文章源自懂站帝-http://www.sfdkj.com/12836.html

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

三 程序流程设计文章源自懂站帝-http://www.sfdkj.com/12836.html

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

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

1 客户端 登录页面vue代码,我过滤了ui样式以及细节处理的代码,就是一个显示二维码的vue组件vue-qr,页面初始化生成一个sessionid,拼在一个服务端接口地址上,形成二维码组件的链接。页面初始化同时也用sessionid发起查询登录结果请求。文章源自懂站帝-http://www.sfdkj.com/12836.html

<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: this.sessionId })  //询问服务端我的登录是否成功
     .then(res => { 
      if (res.data) {   //登录成功
        this.$router.push({
          path: "../index"
        })
      } else//登录失败,简单刷新
      {
          alert('登录失败');
          location.href=location.href
      }
    });
  }
};
</script>

2 服务端查询登录结果接口代码,因为逻辑相对简单,所以我先讲这个。简单描述就是收到客户端请求后,用sessionid查询缓存,用每隔2秒轮询查询,一直到查到有结果才返回客户端。客户端收到登录结果就进行下一步处理。文章源自懂站帝-http://www.sfdkj.com/12836.html

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

3 二维码对应服务端代码。这个接口地址也就是二维码的链接,即用户微信扫码后打开的地址,此时code参数为空,服务端会把当前页面重定向到微信的授权页面,获取到微信授权code后再跳转回当前接口地址,此时code不为空了,服务端拿到code,结合公众号的appid accesstoken之类就可以从微信得到用户的openid,拿到openid就可以查询用户表,剩下的不用多介绍了吧。实际开发时 为了使得程序更简单易维护,也可以把接口拆分开,一个是扫码接口,一个是微信授权后跳转回来的接口,我为了省事,两个接口合并在一起,通过检查code是否为空,识别出是扫码还是微信授权后跳转回来。登录成功后 输出一段html代码在手机上显示。文章源自懂站帝-http://www.sfdkj.com/12836.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 (string.IsNullOrEmpty(code))
            {
                string redirect_uri = HttpUtility.UrlEncode(Request.GetDisplayUrl());//授权后跳转回来
                Response.Redirect($"https://open.weixin.qq.com/connect/oauth2/authorize?appid={APPID}&redirect_uri={redirect_uri}&response_type=code&scope=SCOPE&state=STATE#wechat_redirect");
            }
            else
            {
                string openId = await WechatServices.GetOpenId(code);
                var result = adminServices.Login(openId);
                if (result.Code == 0)
                {
                    Redis_Utility.Set($"expert_admin_login_{sessionId}", result.Data, 1);
                    string html = htmlTemp.Replace("$content", "登录成功");
                    await Response.WriteAsync(html);
                }
                else
                {
                    await Response.WriteAsync(result.Message);
                }
            }
        }

码字辛苦,如果觉得有参考价值请点个赞,如果有看不懂的地方欢迎提问,如果有更好更简单的办法欢迎指教!文章源自懂站帝-http://www.sfdkj.com/12836.html

懂站帝
  • 本文由 发表于 2022年5月11日 22:41:17
  • 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至395045033@qq.com举报,一经查实,本站将立刻删除。