当前位置： 首页 > news >正文

前端视角中的微信登录

news 2026/4/20 6:35:07

目录

引入

流程介绍

具体实现

引入

本文主要讲解网站应用中微信登录的具体流程是怎么样的，以及作为前端开发人员在这整个流程中的主要任务是什么。

如果想要实现微信登录的功能，需要开发人员到微信开放平台注册相应的账号，进行注册应用（需要300￥），获取相应的id和密钥，以及进行设置授权的回调域。在此过程中涉及到了，微信用户，第三方应用，以及微信开放平台。现在以开发人员的角度来详细地介绍实现微信登录的整个流程：

流程介绍

1️⃣前端开发人员需要引入微信提供生成二维码的核心插件。这时候可以到官方提供的文档中就行查看。然后编写生成二维码的代码，这部分的代码同样在官方的文档里面有提供，这部分的代码功能主要是用户点击登录按钮之后，会向微信的服务器发一个请求，请求成功之后微信服务器会向前端页面返回一张微信登录二维码的图片。

2️⃣二维码生成之后微信服务器会进行使用长轮询会问用户是否授权了，若用户授权成功，则微信服务器就会向我们项目的后台服务器发送一个用户授权成功的唯一标识code。

3️⃣若后台收到了code，则后台会向微信的服务器发送请求带上code+appid+secret，然后微信服务器会向后台服务器返回access_token。

4️⃣后台获取到access_token之后再向微信的服务器通过snaspi_uerinfo请求地址携带获取到的token发请求，微信服务器则返回相应的用户信息。

5️⃣然后后台服务器获取到用户信息之后，会进行重定向到前端的某一个页面，通过query参数将用户信息注入给前端。前端拿到数据之后进行展示即可。整体的流程就是这样。

具体实现

以下我结合我之前做的商医通项目来进行展示在微信登录功能中作为前端开发的角色需要完成的任务。

首先在文件的静态页面中引入微信扫码登录需要的核心插件wxlogin.js。

<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>尚医通</title><script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

第二步在需要使用微信登录的地方实例一个官方文档提供给我们的js对象。

var obj = new WxLogin({self_redirect:true,id:"login_container", appid: "", scope: "", redirect_uri: "",state: "",style: "",href: ""});

在这个项目点击登录是默认弹出的页面是手机登录的页面，因此点击底下的微信小图标来进行场景的切换，从手机登录到微信登录。因此在相应的切换场景中使用上述的js对象。

因此对微信扫描登录以及低下的微信小图标封装到一个盒子里面，给这个盒子绑定相应的事件，当点击时进行场景的切换以及定义一个WxLogin对象。

const changeScene = async () => {scene.value = 1;new WxLogin({self_redirect: true,id: "login_container",//appid需要向服务器发请求之后得到appid: "",scope: "snsapi_login",//填写授权回调域路径，就是用户授权成功以后，微信服务器向公司后台推送code的地址redirect_uri: "",//statue就是后台服务器重定向的地址携带用户信息state: "",style: "black",href: "",});
}

相应的实例参数说明表格如下：

参数是否必须说明
self_redirect否true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
id是第三方页面显示二维码的容器id
appid是应用唯一标识，在微信开放平台提交应用审核通过后获得
scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri是重定向地址，需要进行UrlEncode
state否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style否提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
href否自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ

以上的参数 id为显示二维码的容器id，因此需要在顶部是设置一个专门存放二维码的容器，相应代码如下：

     <div class="webchat" v-show="scene == 1"><div id="login_container"></div></div>

appid，redirect_uri，以及state在这个项目中需要向后台服务器发送请求，因此找到后台服务器中对应的接口，发请求获取相应参数的数值，因为本项目是使用typescript编写的，因此需要首先编写返回的数据的类型，对其先进行定义，再编写相应的接口函数。相应代码如下：

export interface WXLogin{"redirectUri":string,"appid": string,"scope": string,"state": string
}
import request from '@/utils/request';
import type { WXLoginResponseData } from './type'
enum API {WXLOGIN_URL = '/user/weixin/getLoginParam/'
}
export const reqWxLogin = (wxRedirectUri: string) => request.get<any, WXLoginResponseData>(API.WXLOGIN_URL + `?wxRedirectUri=${wxRedirectUri}`);

接口封装好了之后在相应的组件页面上发请求，在我们点击微信登录的图标之后发请求，因此在我们上面的changScene方法中在增加如下代码：

const changeScene = async () => {let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin');let result: WXLoginResponseData = await reqWxLogin(redirect_URL);
}

此部分主要完成向后端服务器发请求，获取微信扫描登录页面的参数，发请求的同时还需要携带一个参数：redirect_URL，告诉服务器用户授权成功以后重定向项目到某个页面，我们上述代码是重定向到/wxlogin页面，后台服务器会将用户的数据注入到/wxlogin页面中。因此changScene()完整的代码如下：

const changeScene = async () => {scene.value = 1;let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin');let result: WXLoginResponseData = await reqWxLogin(redirect_URL);new WxLogin({self_redirect: true,id: "login_container",appid: result.data.appid,scope: "snsapi_login",redirect_uri: result.data.redirectUri,state: result.data.state,style: "black",href: "",});
}

因此现在点击相应的微信登录页面，会使用iframe内嵌生成的二维码到页面的容器中。

接下来我们需要创建一个页面来让后台服务器重定向时通过query参数注入相应的用户信息，我们上述的代码已经指定重定向到了welogin页面上了，因此在pages文件夹下进行创建。并在路由配置文件中进行设置（此部分的代码就不展示了）。welogin页面的代码如下：

<template><div></div>
</template><script setup lang="ts">
//获取用户信息
import {useRoute} from 'vue-router';
//获取路由对象
let $route=useRoute();
//持久化存储用户信息
localStorage.setItem('USERINFO',JSON.stringify($route.query));
//当微信登录成功时，会有短暂的该容器显示重定向的页面，会影响视觉效果，因此对其进行隐藏
let html:any=document.querySelector('html');
html.style.display='none';
</script><style scoped>
</style>

此部分主要是通过路由来获取到后台服务器重定向返回的用户信息，并将获取到的用户信息进行持久化的存储。之后需要做的就是关闭登录界面，同时仓库中也需要存一份用户的信息。那具体如何实现后面的功能呢？

在这个项目中是通过切换场景为微信扫码时，进行判断本地的存储是否有用户的信息，若有则关闭相应的登录界面并存储到对应的仓库中，并展示数据。我们使用到watch来进行监听场景的切换。相应代码如下：

watch(()=>scene.value,(val:number)=>{if(val===1){userStore.queryState();}
})

在watch（）中使用了queryState（）方法，该方法编写在用户的仓库中，具体的方法如下：

 queryState(){let timer=setInterval(()=>{if(localStorage.getItem('USERINFO')){this.visiable=false;this.userInfo=JSON.parse(localStorage.getItem('USERINFO') as string);clearInterval(timer);}},1000);}

该方法主要是查询用户是否扫描成功，每隔一秒调用一次，如果有用户的信息，则将登录页面关闭，并将用户信息存储到仓库中，若没有则会在一秒之后再次判断。最后相应的页面获取仓库中的信息进行展示。

好啦！本次的文章就到这里了，期待下一次的见面！

相关文章：

前端视角中的微信登录

目录 引入 流程介绍 具体实现 引入 本文主要讲解网站应用中微信登录的具体流程是怎么样的&#xff0c;以及作为前端开发人员在这整个流程中的主要任务是什么。 如果想要实现微信登录的功能&#xff0c;需要开发人员到微信开放平台注册相应的账号&#xff0c;进行注册应用&am…...

编程日记 2023/11/11 9:50:54

Python 中使用 Selenium 隐式等待

selenium 包用于使用 Python 脚本进行自动化和测试。 我们可以使用它来访问网页中的各个元素并使用它们。 该包中有许多方法可用于根据不同属性检索元素。 加载页面时&#xff0c;会动态检索一些元素。 与其他元素相比&#xff0c;这些元素的加载速度可能不同。 Python 中使用…...

编程日记 2023/11/11 9:49:53

GEE：基于 Landsat 计算的 kNDVI 应用 APP

作者：CSDN @ _养乐多_ 本文记录了在Google Earth Engine（GEE）平台中，使用 Landsat 遥感数据计算 kNDVI 的应用 APP 链接，并介绍该 APP 的使用方法和步骤。该APP可以为用户展示 NDVI 和 kNDVI 的遥感影像，进行对比分析。该 APP 在 Google Earth Engine（GEE）平台中实现。…...

编程日记 2023/11/11 9:48:52

Spring 缓存注解

Spring Cache 框架给我们提供了 Cacheable 注解用于缓存方法返回内容。但是 Cacheable 注解不能定义缓存有效期。这样的话在一些需要自定义缓存有效期的场景就不太实用。 按照 Spring Cache 框架给我们提供的 RedisCacheManager 实现&#xff0c;只能在全局设置缓存有效期。这…...

编程日记 2023/11/11 9:47:52

微信小程序前端开发

目录 前言&#xff1a; 1. 框架选择和项目搭建 2. 小程序页面开发 3. 数据通信和接口调用 4. 性能优化和调试技巧 5. 小程序发布和上线 前言&#xff1a; 当谈到微信小程序前端开发时&#xff0c;我们指的是使用微信小程序框架进行开发的一种方式。在本文中&#xff0c;我…...

编程日记 2023/11/11 9:46:50

C# OpenCvSharp DNN HybridNets 同时处理车辆检测、可驾驶区域分割、车道线分割

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Numerics; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_D…...

编程日记 2023/11/11 9:45:49

无需开发，精臣云可轻松连接用户运营、广告推广等行业应用

精臣智慧标识科技有限公司简介 武汉精臣智慧标识科技有限公司&#xff0c;是国内便携式标签打印机创新品牌和实物管理解决方案服务商。在物品标签还处在繁琐的PC打印时代&#xff0c;精臣公司便创造性地从智能便携角度出发&#xff0c;顺应移动互联时代趋势&#xff0c;推出了…...

编程日记 2023/11/11 9:44:48

第三阶段第一章——PySpark实战

学习了这么多python的知识&#xff0c;是时候来搞点真玩意儿了~~ 春风得意马蹄疾&#xff0c;一日看尽长安花 o(*&#xffe3;︶&#xffe3;*)o 1.前言介绍 &#xff08;1&#xff09;什么是spark Apache Spark是一个开源的分布式计算框架&#xff0c;用于处理大规模数据集的…...

编程日记 2023/11/11 9:43:46

Python数据容器（字符串）

字符串 1.字符串 字符串也是数据容器的一种&#xff0c;字符串是字符的容器&#xff0c;一个字符串可以存放任意数量的字符。 2.字符串的下标索引 从前向后&#xff0c;下标从0开始从后向前&#xff0c;下标从-1开始 # 通过下标索引获取特定位置的字符 name python print(na…...

编程日记 2023/11/11 9:42:45

Python---练习：把8名讲师随机分配到3个教室

案例&#xff1a;把8名讲师随机分配到3个教室 列表嵌套&#xff1a;有3个教室[[],[],[]]&#xff0c;8名讲师[A,B,C,D,E,F,G,H]&#xff0c;将8名讲师随机分配到3个教室中。 分析&#xff1a; 思考1&#xff1a;我们第一间教室、第二间教室、第三间教室&#xff0c;怎么表示…...

编程日记 2023/11/11 9:41:44

python+requests接口自动化测试

原来的web页面功能测试转变成接口测试&#xff0c;之前大多都是手工进行&#xff0c;利用postman和jmeter进行的接口测试&#xff0c;后来&#xff0c;组内有人讲原先web自动化的测试框架移驾成接口的自动化框架&#xff0c;使用的是java语言&#xff0c;但对于一个学java&…...

编程日记 2023/11/11 9:40:43

【T3】畅捷通T3采购管理模块反结账，提示：本年数据已经结转，不能取消结账。

【问题描述】 使用畅捷通T3软件过程中&#xff0c; 针对以前年度进行反结账过程中&#xff0c;遇到采购管理模块取消12月份结账&#xff0c; 提示&#xff1a;本年数据已经结转&#xff0c;不能取消结账。 【分析需求】 按正常逻辑&#xff0c;需要清空新年度数据&#xff0c…...

编程日记 2023/11/11 9:39:42

线性代数（五） | 矩阵对角化 特征值 特征向量

文章目录 1 矩阵的特征值和特征向量究竟是什么&#xff1f;2 求特征值和特征向量3 特征值和特征向量的应用4 矩阵的对角化 1 矩阵的特征值和特征向量究竟是什么&#xff1f; 矩阵实际上是一种变换,是一种旋转伸缩变换&#xff08;方阵&#xff09; 不是方阵的话还有可能是一种…...

编程日记 2023/11/11 9:38:40

读书笔记：彼得·德鲁克《认识管理》第12章 服务机构的绩效管理

一、章节内容概述 要提高服务机构和服务部门的绩效水平&#xff0c;需要的不是天才&#xff0c;相反&#xff0c;首先需要的是清晰的目标和任务&#xff0c;其次是把资源集中用于优先事项&#xff0c;再次需要明确的成果衡量标准&#xff0c;最后需要系统性地抛弃过时的目标和…...

编程日记 2023/11/11 9:37:39

基于FPGA的模板匹配红外目标跟踪算法设计

为什么要写这篇文章 我写这篇文章的原因是一天在B站看到了一个大神发的视频是关于跟踪一个无人机的&#xff0c;看到作者跟网友的回复说是用的图像匹配算法&#xff0c;我就在网上搜索相关资料&#xff0c;最终找到一篇文献。文献中对该算法的评价很高&#xff0c;满足制导系统…...

编程日记 2023/11/11 9:36:38

ZYNQ通过AXI DMA实现PL发送连续大量数据到PS DDR

硬件&#xff1a;ZYNQ7100 软件&#xff1a;Vivado 2017.4、Xilinx SDK 2017.4   ZYNQ PL 和 PS 的通信方式有 AXI GPIO、BRAM、DDR等。对于数据量较少、地址不连续、长度规则的情况&#xff0c;BROM 比较适用。而对于传输速度要求高、数据量大、地址连续的情况&#xff0c;比…...

编程日记 2023/11/11 9:35:37

用于强化学习的置换不变神经网络

一、介绍 如果强化学习代理提供的输入在训练中未明确定义&#xff0c;则通常表现不佳。一种新方法使 RL 代理能够正常运行&#xff0c;即使受到损坏、不完整或混乱的输入的影响也是如此。 “大脑能够使用来自皮肤的信息&#xff0c;就好像它来自眼睛一样。我们不是用眼睛看&…...

编程日记 2023/11/11 9:33:34

【华为OD题库-008】座位调整-Java

题目 疫情期间课堂的座位进行了特殊的调整&#xff0c;不能出现两个同学紧挨着&#xff0c;必须隔至少一个空位。给你一个整数数组desk表示当前座位的占座情况&#xff0c;由若干0和1组成&#xff0c;其中0表示没有占位&#xff0c;1表示占位。在不改变原有座位秩序情况下&…...

编程日记 2023/11/11 9:32:33

4 Paimon数据湖之Hive Catalog的使用

更多Paimon数据湖内容请关注&#xff1a;https://edu.51cto.com/course/35051.html Paimon提供了两种类型的Catalog&#xff1a;Filesystem Catalog和Hive Catalog。 Filesystem Catalog&#xff1a;会把元数据信息存储到文件系统里面。Hive Catalog&#xff1a;则会把元数据…...

编程日记 2023/11/11 9:31:32

Verilog刷题[hdlbits] ：Bcdadd100

题目&#xff1a;Bcdadd100 You are provided with a BCD one-digit adder named bcd_fadd that adds two BCD digits and carry-in, and produces a sum and carry-out. 为您提供了一个名为bcd_fadd的BCD一位数加法器&#xff0c;它将两个BCD数字相加并带入&#xff0c;并生…...

编程日记 2023/11/11 9:30:31

别再到处找了！这12个三维点云开源数据集，从自动驾驶到室内建模都能用

三维点云实战指南&#xff1a;12个开源数据集深度解析与应用场景匹配 在三维视觉和空间计算领域&#xff0c;点云数据正成为连接物理世界与数字世界的核心纽带。无论是自动驾驶车辆的环境感知、建筑BIM模型的逆向重构&#xff0c;还是工业质检中的三维测量&#xff0c;优质的点…...

编程新知 2026/4/20 5:43:16

AGI能否真正接管火电厂DCS？深度拆解华能集团“智核一号”项目——2026奇点大会唯一通过TÜV莱茵认证的自主决策案例

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AGI与能源管理 2026奇点智能技术大会(https://ml-summit.org) AGI驱动的实时电网优化范式 本届大会首次公开展示了基于自主推理型AGI架构的分布式能源调度系统“GridMind-7”&#xff0c;该系统在德国鲁尔工业区试点中实现…...

编程新知 2026/4/20 5:16:01

免费获取VMware Workstation Pro 17许可证密钥的终极指南：5000+密钥任你选！

免费获取VMware Workstation Pro 17许可证密钥的终极指南&#xff1a;5000密钥任你选&#xff01; 【免费下载链接】VMware-Workstation-Pro-17-Licence-Keys Free VMware Workstation Pro 17 full license keys. Weve meticulously organized thousands of keys, catering to …...

编程新知 2026/4/20 4:55:55

ECP 工资单权限问题(You don‘t currently have permission to view this content)

01权限概念如果把SAP HCM系统比作一栋大楼&#xff0c;那么权限体系就是管理这栋大楼的门禁系统。这三大概念分别解决了&#xff1a;你是谁、你能进哪个房间、以及你能动房间里的什么东西。1.1 按功能层级分类这是SAP HCM权限最经典的划分方式&#xff0c;它对应了权限控制的两…...

编程新知 2026/4/20 2:59:52

STM32F103驱动AD9959 DDS信号发生器：从CubeMX引脚配置到四通道频率调节实战

STM32F103驱动AD9959 DDS信号发生器实战指南 在电子设计竞赛和嵌入式系统开发中&#xff0c;DDS&#xff08;直接数字频率合成&#xff09;技术因其高精度、快速频率切换和相位可编程等优势&#xff0c;成为信号发生器设计的首选方案。AD9959作为一款四通道DDS芯片&#xff0c;…...

编程新知 2026/4/20 1:55:15

别再只改YAML了！手把手教你从零实现YOLOv8的MSAM注意力模块（附完整代码）

从零构建YOLOv8的MSAM注意力模块&#xff1a;多尺度特征融合实战指南 在目标检测领域&#xff0c;YOLOv8凭借其出色的速度和精度平衡成为工业界的热门选择。但当你面对复杂场景中的多尺度目标时&#xff0c;是否发现模型对小物体或遮挡目标的检测效果不尽如人意&#xff1f;传统…...

编程新知 2026/4/20 0:56:29

Claude Design 来了：设计师的第二双手还是替代者？

2026年4月17日&#xff0c;Anthropic 正式发布 Claude Design。官方的定义是&#xff1a;一款通过与 Claude 对话来创建设计、原型、幻灯片、单页的工具。翻译成人话就是——你说话&#xff0c;它出图&#xff1b;你说「再瘦一点」「换个莫兰迪色系」「按钮往左挪」&#xff0c…...

编程新知 2026/4/20 0:49:56

天赐范式第16天：【硬核物理】哥本哈根学派沉默了：用纯经典混沌模拟出量子双缝干涉，量子力学统计特性可能是高维相空间混沌投影的观点（附源码）

摘要&#xff1a;不需要波函数&#xff0c;不需要概率云&#xff0c;甚至不需要“上帝掷骰子”。本文基于受驱摆高斯势垒的混沌系统&#xff0c;利用 RK45 高精度积分器&#xff0c;在 2000 个粒子的系综模拟中&#xff0c;成功复现了双缝干涉的统计包络特征&#xff0c;分布重…...

编程新知 2026/4/20 0:18:35

FanControl终极中文设置指南：5分钟让风扇控制说中文的完整教程

FanControl终极中文设置指南&#xff1a;5分钟让风扇控制说中文的完整教程 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tre…...

编程新知 2026/4/19 23:05:55

ZYNQ以太网开发避坑指南：详解1G/2.5G PCS/PMA IP核的MDIO与AN配置那些事儿

ZYNQ以太网开发避坑指南&#xff1a;详解1G/2.5G PCS/PMA IP核的MDIO与AN配置那些事儿 在嵌入式系统开发中&#xff0c;以太网功能几乎是现代设备的标配。对于使用Xilinx ZYNQ系列FPGA的开发者来说&#xff0c;1G/2.5G Ethernet PCS/PMA IP核是实现高速网络连接的关键组件。然而…...

编程新知 2026/4/19 22:44:58