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

前端视角中的微信登录

news 2026/2/9 0:55: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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/2/7 5:16:05

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2026/1/26 9:07:56

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11