基于vue的微信扫码登录系统

原创已于 2022-04-02 14:00:04 修改 · 1.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #vue.js

于 2022-02-09 09:19:05 首次发布

本文介绍了如何实现微信授权登录的过程，包括获取appid、引入JS文件、展示二维码及前端处理扫码后的code。用户扫描二维码后，微信会跳转并携带code，前端截取code并传递给后台以获取token，完成登录。此过程涉及微信开放平台、前端JS对象实例化及与后台的交互。

需提前准备appid(在微信开放平台获取，如果是网页版，就去申请网站应用开发的appid)

在开发之前先去查看官方文档说明

准备工作 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html接下来先将授权登录的二维码显示出来：

步骤1：在页面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

（1）这里我是将该js下载后，放在本地使用。

步骤2：在需要使用微信登录的地方实例以下JS对象

根据以上步骤，微信授权登录的二维码就能显示。

接下来就是扫码登录的过程

微信扫描二维码授权后，将会自动跳转到redirect_url的地址，地址后面会接上code参数，前端需要做的就是在beforeEach钩子函数里将地址后面携带的code截取并传给后台，后台接收后返回token等用户信息。前端再调用登录接口设置token等即可登录成功。（以下代码参考）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_37135612

关注关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序登录流程与实现（JavaScript版）

XymkMl的博客

10-05

429

以上就是微信小程序登录的流程和实现方法。通过获取用户授权、发送登录凭证到服务器和登录态维持，可以实现小程序的用户身份验证和会话管理。请根据实际需求进行相应的调整和扩展。小程序登录是在微信小程序中实现用户身份验证和授权的重要步骤。本文将详细介绍微信小程序登录的流程，并提供相应的JavaScript代码示例。函数获取保存的数据，实现登录态的维持。在后续的小程序使用过程中，可以通过。

基于.NET 实现 QQ、微信扫码登录功能

candy的博客

02-18

460

在当今数字化时代，第三方扫码登录已经成为众多应用程序的标配功能，极大地提升了用户登录的便捷性。本文详细介绍了如何使用.NET 技术来实现 QQ 和微信的扫码登录功能。从基本原理入手，深入剖析了 QQ 和微信扫码登录的流程，接着阐述了实现过程中所需的准备工作，包括申请开发者账号、获取必要的密钥等。随后，通过详细的代码示例和解释，展示了在.NET 环境下如何实现生成二维码、处理扫码结果、获取用户信息等关键步骤。最后，对实现过程中可能遇到的问题及解决方案进行了总结，为开发者提供了全面且实用的参考。

5 条评论您还未登录，请先登录后发表或查看评论

wxLogin.js 微信扫码登录

01-05

通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

PC网站接入微信登陆流程三：前端获取展示登录二维码，并且登录成功后提交code给后端

yytasty的博客

06-09

2075

1、文档在这里 ==> 网站应用微信登录开发指南 2、具体使用方法第一步：项目引入js文件 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> 第二步：dom 创建一个承载扫码登陆页面的标签 <div id="wxCode"></div> 第三步：将登录页面实例化，只用管appid和redirect_uri，其他的不需

【开发心得】微信网页应用授权登录

清风唱诗人的博客

07-29

3018

self_redirecttrue手机点击确认登录后可以在iframe内跳转到redirect_uri，false手机点击确认登录后可以在topwindow跳转到redirect_uri。2.本地映射成申请时候填写的域名。1.微信官方有两种对外能力,分别是网站应用与微信开放平台,这两个服务都有授权登录,注意,我们使用的是前者,故需要的scope是。(1)直接根据appid与scope等新开一个网页，很多网站都使用该方案，缺点需要弹出一个单独的页面，用户体验不够友好。...

Vue前端实现微信扫码登录

热门推荐

weixin_45018314的博客

07-17

1万+

微信登录两种实现方法：说在前面：由于微信的限制不得不将vue的路由模式切换为history模式。第一种：后端实现二维码，将二维码的跳转链接返回前端，并且传一个state给前端做标识，前端需要点击跳转到一个单独的微信登录页面，然后开始调用轮询接口传入state监听用户扫码的操作检测后端返回字段，success为后端检测到用户点击了授权，error为用户取消授权，用户授权后用state继续请求微信数据，成功拿到用户数据第二种：前端生成二维码 ...

springboot实现web端微信扫码登录项目（基于微信开放平台）

09-18

3. **OAuth 2.0协议**：微信扫码登录是基于OAuth 2.0协议的。OAuth 2.0是一种授权框架，允许第三方应用在用户授权的情况下访问其存储在另一服务提供商上的特定资源。 4. **微信SDK（Software Development Kit）**：...

基于若依框架实现微信扫码登录功能

m0_61261153的博客

07-26

1710

扫码登录流程前端调用/uuid/get获取 UUID，生成含 UUID 的微信授权二维码；用户扫码后，微信回调，将openid与uuid绑定（存入 Redis）；前端轮询，后端检查到openid后，查询关联的系统用户，生成 token 返回；前端使用 token 完成登录。账号绑定流程已登录用户点击 "绑定微信"，前端获取微信授权code；调用，后端通过code获取openid，更新到当前用户的sys_user记录；绑定成功后，用户下次可直接扫码登录。

精选资源

spring+spring-boot+mybatis+ mysql 集成微信扫码点餐系统.rar

11-09

3. 配置微信小程序的AppID和AppSecret，实现微信的OAuth2.0授权，以便用户可以通过微信扫码登录。 4. 开发后端服务，包括用户管理、菜品管理、订单处理等模块。 5. 设计和实现微信小程序的界面和交互逻辑，与后端API...

vue项目：基于网页授权的微信扫码登录Demo

薛定喵君的博客

09-01

3448

开源一个 vue 项目实现：利用网页授权进行 PC 端扫码登录之前研究了下微信端扫码登录的实现微信网页扫码登录和公众号网页授权登录的比较因为微信开放平台的扫码登录需要认证(交钱)，就稍微麻烦一点使用网页授权的方式来做 PC 端扫码登录。实现思路涉及技术web 端服务端公众号配置在线 Demo参考资料# 实现思路简要介绍 PC 端点击扫码登录时会生成一个 uuid 并弹出一个二维码，二维码地...

vue 微信扫码登录(自定义样式)

10-15

主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue pc端微信扫码登录

04-10

1655

第一种是点击后跳转到二维码页面进行扫码，第二种是内嵌的方式，这两种都是获取到code传给后端，后端根据code获取openid，同时返给前端token，然后再调用登录的接口。前几天写了一遍关于钉钉扫码登录的文章，今天来补充下微信扫码登录的内容。首先看微信官方文档，能看出微信扫码可以分为两种方式。这里具体的细节我就不写了，有不明白的同学可以去看下。

vue中微信扫码登录的功能

jsmeng626的博客

04-23

2692

在vue组件中加载微信SDK，并调用微信SDK提供的config接口，将appID、时间戳、随机数和当前url进行签名，并配置JS-SDK。开发者服务器通过临时票据调用微信提供的接口获取用户的openid和access_token，并保存到本地。需要注意的是，需要进行跨域访问的设置，保证vue组件可以正常调用微信SDK和与开发者服务器的交互。用户在扫码界面中扫描二维码后，微信后台将回调开发者服务器的指定url，并携带临时票据。点击扫码登录按钮后，调用微信SDK提供的scanQRCode接口，弹出扫码界面。

超实用，Vue实现微信扫码登录

最新发布

qq_40913730的博客

09-02

597

微信扫码登录是非常常见的需求，让微信用户使用微信登录第三方应用或网站，无非两种展现方式第一种，重定向到微信指定的扫码页面第二种，网站将微信登录二维码内嵌到页面中该模式整体流程：第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；通过code参数加上AppID和AppSecret等，通过API换取access_token；通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

vue 实现微信扫码登录的方法

花生日记

06-04

7125

已登录

vue3：vue-wxlogin扫微信二维码登录

weixin_42304966的博客

01-17

1966

3.解决思路:配置参数---->获取redirect_uri回调成功，出现二维码，—>扫码登录后，再次跳转登录页面，location.search会返回code，onMounted再次执行—>调后端接口去查询用户是否和微信绑定—>已绑定：返回token，未返回：展示绑定form表单，验证码需要调微信接口（后端提供）–>返回token跳转首页。补充：在单页面写控制二维码大小，标题等样式不生效，控制二维码样式的href，代码和base64互转第三方工具（复制href后面的部分data:text/css;

VUE项目中的微信扫码登录

weixin_46472771的博客

12-27

6566

微信扫码登录功能首先了解微信扫码登录的流程和详解，详见微信扫码登录，这边仅是vue前端相关流程一.创建微信登录按钮及方法，配置相关参数 1.创建微信登录按钮  <img src="@/assets/images/weixin.png" /><a style="line-height: 60px;height: 60px; margin: 0 5px;" type="text" @click="handLoginByWx">微信扫码登录&l

VUE实现微信扫码登录

weixin_44370333的博客

11-07

3942

vue微信登录

vue 微信扫码登录

08-30

Vue微信扫码登录是一种基于Vue框架实现的登录方式。用户可以通过扫描二维码来完成登录操作。代码中的getWxLoginQrCodeUrl方法是用来请求后端接口获取微信登录二维码的URL地址，并将该地址赋值给wxCode变量。在页面上，使用iframe标签将获取到的二维码URL进行展示。同时，还可以看到一些自定义的样式。这个功能可以通过引用中的部分代码来实现。引用对Vue微信扫码登录做了详细的介绍，可以作为参考学习的资料。在实现该功能时，首先需要发送请求获取微信登录二维码的URL地址，然后将该地址通过iframe进行展示。具体的步骤可以参考引用中的描述。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue项目实现微信扫码登录流程梳理](https://blog.csdn.net/cczz66/article/details/125311010)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue 微信扫码登录(自定义样式)](https://download.csdn.net/download/weixin_38621104/12929503)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]