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

前端视角中的微信登录

news 2026/2/7 16:58:46

目录

引入

流程介绍

具体实现

引入

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

如果想要实现微信登录的功能，需要开发人员到微信开放平台注册相应的账号，进行注册应用（需要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

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/2/2 3:20:56

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/1/26 14:22:31

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/2/2 9:25:26

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/1/24 14:16:56