Vue2 - 详解实现网站接入微信扫码登录功能，微信授权生成登录二维码用户用手机扫描二维码登陆，微信扫描二维码登录详细流程及示例代码，支持弹框式、浏览器单独新开页显示，最新vue集成微信扫码授权登录！

已于 2024-06-25 10:41:38 修改
阅读量1.6k 收藏 3
点赞数 17
分类专栏： + Vue 文章标签： vue2 网站实现微信扫码登陆详细教程 nuxt2 手机扫描网站微信二维码进行登录 redirect uri错误 vue新开页面全屏登录二维码 iframe独立小窗口展示登录
于 2024-06-25 09:26:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/139934111
版权
+ Vue 专栏收录该内容
161 篇文章 1170 订阅 ¥9.90 ¥99.00
订阅专栏

前言

如果您需要 Vue3 版本，请访问 这篇文章。

在 vue2 | nuxt2 项目开发中，详解对接微信扫一扫登录功能，网站应用植入微信扫描二维码登录功能，用户使用微信扫码后在手机上点击确认登录，网页监听响应登录请求并获取用户信息，可将二维码放入弹框模态框内展示、浏览器新开一页弹出内嵌网页展示(重定向登录完毕后自动返回)、页面弹出一个小窗口，扫完自动关闭小网页，支持自定义登录二维码的大小、颜色、提示文字等样式，解决各种扫码没反应、获取不到用户信息、redirect_uri参数错误等等。

网上的教程太乱且各种问题，本文从 0-1 详细讲解完整流程，新手小白直接复制示例代码轻松搞定！

如下图所示，可将二维码放在 “任意位置” 进行展示，或者在网页上弹出一个窗口、新开网页等交互。

详细示例源码及注释说明，支持js/ts，保证接入成功！

在这里插入图片描述

第一步

在开始之前，您需要先

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 17
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
王佳斌
11-12 7744
vue.js网站微信扫码功能，vue PC端实现微信扫码登录功能，Vue微信Pc端扫码登录，Pc端微信扫码支付，通过前端怎样在vue中进行微信网页授权登录，vue.js项目植入微信登录，vue网页项目怎么做微信扫码登录，VUE项目中的微信扫码登录，VUE中最简单的js调用微信扫一扫功能，vue:如何设计网页的微信扫码登录功能，微信扫码功能官方文档，通过vue方式实现二维码扫码功能，vue调用微信扫码，vue H5 调用微信扫描二维码，Vue前端实现微信扫码登录，vue-wxlogin 微信授权登录组件，网站
Nuxt - 实现微信扫码登录功能（SSR 服务端渲染项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
王佳斌
11-12 2659
nuxt.js 项目怎么实现微信登录和QQ登录，微信扫码登录，nuxt.js 使用 vue-wxlogin 微信登录插件，SSR服务端渲染项目植入微信登录功能，vue-wxlogin组件怎么自定义样式，网站引入的微信登录框如何修改宽高或其他样式，nuxt框架怎么做微信扫码登录功能，微信扫码登录的实现方式，nuxt扫一扫功能，nuxt对接微信开放平台的微信扫码登录功能，详细的nuxt.js ssr 服务端渲染微信扫码登录功能，使用nuxt部署的项目，现在想实现微信授权登录和qq授权登录，nuxt项目的QQ微信
vue 实现微信登陆 你学会了吗
路上
04-30 5922
背景 微信登陆作为比较常用的第三方登陆,实际应用比较多,比如小程序，微信公众号必不可少缺少 但是发现有一些初级人员还是不容易理解这当中的一个思路，故分享下当前微信登录的一个实现原理以及实战代码 原理 贴图为证 实现 ......
vue3 实现微信扫码授权登录 pc端
最新发布
weixin_67255581的博客
05-24 395
微信提供的 JS SDK，在网页中嵌入二维码组件，用户在网页上扫描二维码后，通过 JS 获取到code登录授权的相关信息。前端跳转到微信的登录页面，登录完成后微信会重定向回原网站，前端再通过 URL 参数获取授权信息，进行后续操作。
微信网页授权 Vue
weixin_47541876的博客
03-16 859
详细请看官方文档 ：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 示例代码： //微信授权 wxAuth() { const appid='xxxxxxxxx'//公众号的唯一标识 const url=window.location.href //授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理 c
【开发心得】微信网页应用授权登录
清风唱诗人的博客
07-29 2418
self_redirecttrue手机点击确认登录后可以在iframe内跳转到redirect_uri，false手机点击确认登录后可以在topwindow跳转到redirect_uri。2.本地映射成申请时候填写的域名。1.微信官方有两种对外能力,分别是网站应用与微信开放平台,这两个服务都有授权登录,注意,我们使用的是前者,故需要的scope是。(1)直接根据appid与scope等新开一个网页，很多网站都使用该方案，缺点需要弹出一个单独的页面，用户体验不够友好。...
微信小程序快速生成二维码，支持回调函数返回二维码临...weapp-qrcode-master.zip
09-25
本项目“weapp-qrcode-master”专注于在微信小程序环境中快速生成二维码，并且支持回调函数来处理二维码生成后的结果，这对于开发涉及二维码功能的小程序来说极其有用。 一、微信小程序开发基础 在开始讲解这个项目...
基于微信小程序的办公系统，基于vite,Vue3,Pinia,Typesrcipt,uni-app等技术栈开发.zip
12-13
1. 微信小程序：微信小程序是腾讯公司推出的一种轻量级的应用开发平台，它允许开发者在微信内创建和发布功能丰富的应用程序，无需用户下载安装，只需扫描二维码或搜索即可使用，为用户提供便捷的“用完即走”的体验...
基于uni-app框架的登录模板
02-21
2. 表单验证：模板中会实现基本的表单验证功能，如非空验证、邮箱格式验证、密码强度验证等，确保用户输入的有效性。 3. 记住密码与自动登录：模板可能提供记住密码和自动登录的功能，通过本地存储用户信息实现，但...
uniapp生成二维码
01-31
《uniapp生成二维码详解》 在移动互联网时代，二维码作为一种高效的信息传递工具，被广泛应用在各种场景中。uniapp作为一款跨平台的开发框架，它提供了丰富的API接口，使得开发者可以方便地在uniapp项目中生成和...
多功能扫码登录页面html模板.zip
10-05
2. **扫码登录**：这种功能允许用户通过扫描显示在网页上的二维码，使用移动设备完成登录。它通常结合了二维码技术、移动应用的授权机制（如OAuth）以及后端服务器的交互。 3. **二维码技术**：二维码是一种二维...
你知道从微信扫码授权到登录网页有哪些流程吗？
三拾的博客
04-24 2954
微信扫码登录是一种快速、便捷的登录方式，为第三方网站提供了便利。本文对微信扫码登录的流程进行了详细解析，并提供了相关的代码示例，希望对大家有所帮助。
vue项目PC端页面内嵌微信扫码登录
weixin_45654455的博客
10-19 1144
这里需要注意的是获取token是根据回调地址中的参数code然后传给后端进行获取的。这里的回调地址必须是当前项目的页面，这样才能得到code参数，而且回调地址必须是外网可以访问且要和微信配置中的回调地址一致，所以联调测试时需要部署到线上进行测试。因为一些参数是直接调接口得到的所以这个data就是接口返回的数据。二维码出来后就要获取token根据token获取用户信息了。然后传给后端接口，的到后端返回的用户信息即可。根据需求需要内嵌一个微信扫码登录获取用户信息。只需要监听路由判断路由中是否有code。
Vue - Ant Design Vue 中 ＜a-select＞ 选择器组件，既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
热门推荐
王佳斌
12-22 1万+
ant组件库的选择器怎么既能选，又能像文本框一样输入。antd-vue的select组件实现既可以输入添加,又可以下拉选择。antdesign select可输入可选择，既可以输入又可以选择得框，如何实现ant选择器能选择项目还能直接输入文本内容，ant-design-vue中的select选择器,对输入值的进行筛选操作 ，vue，ant design vue，select选择器，a-select，a-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可
Vue - 去掉控制台 Download the Vue Devtools extension for a better development experience: https://xxx 打印
王佳斌
07-06 1万+
前言 这不是报错也不是警告，仅仅是告诉开发者下载它可以获得更好的开发体验。 使用 vue-cli 创建项目启动后，发现控制台默认打印了如下信息： 但就是不想让它控制台打印？一步步关掉它！ ## 下载Vue Devtools扩展以获得更好的开发体验 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools 关闭打印 打开项目 node_mo
Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
王佳斌
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data 直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ul v-for="(item, index) in getData()" :key="index"> <li>{{ item.name }}</li> </ul> </template> getData() { api data ... } 由于模板（templat
Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
王佳斌
07-06 1万+
vue element ui 实现更换主题颜色，vue怎么把element组件库的默认的蓝色主题改成其他颜色，vue element 组件库默认蓝色主题更换为其他颜色，vue更改element组件库主题色的超详细教程，vue 项目全局修改element-ui的样式/主题颜色，vue-element换肤所有主题色和基础色均可自主配置，vue中修改element plus 主题色，vue elementUI 主题颜色切换，vue中自定义element-ui组件库的主题颜色，vue使用element UI饿了么改
Vue 页面载入时立刻触发某个函数
王佳斌
01-30 1万+
前言 Vue 项目中，当需要页面刚刚载入后就要立马触发一个函数该怎么实现？ 实现 例如，当页面载入时触发 message() 。 mounted: function(){ this.message();//需要触发的函数 } message(){ //业务逻辑 } ...
Vue - 详细实现类似小程序 onShow() 一样的生命周期钩子方法，只要页面切换并显示了，就会触发这个生命周期，提供详细示例代码，一键复制运行（监听页面的显示，只要页面显示就执行代码）
王佳斌
08-16 1万+
Vue - 实现类似小程序 onShow() 一样的生命周期钩子方法（监听页面的显示，只要页面显示就执行代码），vue 模仿微信小程序Wechat/uni-app 的onShow() 生命周期，vue有没有类似小程序onShow一样的方法,或是应该怎么取实现这么一个方法，nuxt Vue.js 类似 onShow 的钩子，vue的onshow，vue-cli 项目有没有方法实现微信小程序、uni-app 中的 onShow() 生命周期，VueCli用keep-alive实现onLoad,onShow，vu
vue - 网站接入微信扫码登录功能详细教程,完整详细流程及完整功能示例源代码(附常
08-15
Vue是一种用于构建Web界面的JavaScript框架，可以用于创建具有微信扫码登录功能的网站。下面是一个关于如何在Vue中接入微信扫码登录功能的详细教程。 1. 首先，你需要在微信开放平台注册一个应用，获得一个AppID和AppSecret。 2. 在Vue项目中安装wechat-auth插件，可以使用npm命令进行安装。 3. 在项目的入口文件main.js中导入wechat-auth插件，并使用Vue.use()将其安装到Vue中。 4. 创建一个Login.vue组件，用于显示微信扫码登录界面，并导入微信扫码登录所需的样式和图片。 5. 在Login.vue组件的created钩子函数中，调用微信登录接口的Auth.login()方法，传入AppID和登录成功后的回调函数。 6. 在回调函数中，获取微信扫码登录成功后返回的code，并发送到后端服务器进行验证。后端服务器通过code和AppSecret去微信服务器换取access_token和openid。 7. 在后端服务器中，验证access_token和openid的有效性，如果验证成功，则说明用户已经登录成功，可以返回用户相关的信息给前端。 8. 前端收到后端返回的用户信息后，可以根据需求进行相应的处理，例如展示用户头像、昵称等信息。 9. 在Login.vue组件中，可以根据登录状态显示不同的页面内容，例如已登录状态下显示用户信息，未登录状态下显示微信扫码登录按钮。 10. 添加微信扫码登录按钮的点击事件，在事件处理函数中调用Auth.login()方法进行微信扫码登录。 以上就是在Vue中接入微信扫码登录功能的详细流程和示例源代码。在实际应用中，你可以根据具体的需求进行适当的修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值