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

前端视角中的微信登录

news 2025/9/3 2:23:42

目录

引入

流程介绍

具体实现

引入

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

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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/7/10 6:25:54

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/8/31 22:07:34

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/8/30 22:17:51

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/8/31 6:22:12

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/8/26 23:41:49

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/9/2 16:58:51

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/8/30 5:01:00

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. 执行器…...

编程新知 2025/9/2 17:47:59

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/8/29 7:47:28