vue项目中微信登录的实现

最新推荐文章于 2024-04-27 13:42:34 发布
最新推荐文章于 2024-04-27 13:42:34 发布
阅读量3.2k 收藏 3
点赞数
分类专栏： 知识储备 踩坑 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_web_advanced/article/details/107471172
版权
  1. 下载组件 wxlogin
npm install vue-wxlogin --save
  1. 引入组件，给组件传参
  2. 重定向的url应该是微信登录官网中的微信授权作用域
  3. 如果url里面有端口号，微信授权作用里面也要有
  4. 重定向的url：需要在http://tool.chinaz.com/tools/urlencode.aspx中转码
  5. 微信登录成功后，会自动重定向到新地址，此时的地址栏中就有code参数
  6. 如果报错说不能从组件跳到页面，那就找到wxlogin组件里面的iframe标签，加上这个属性：sandbox=“allow-scripts allow-top-navigation allow-same-origin”

报错内容：

qrconnect?scope=snsapi_login&redirect_uri=http%3a%2
最低0.47元/天 解锁文章
my_web_advanced
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现微信授权登录
AppleSuger的博客
08-30 1251
1、微信公众号“自定义菜单-页面地址”，配置你要跳转的路径。 页面地址示例：http://xxx.xxx.com/app/main/index 注：因为业务要求这里配置跳转的是页面路径，也可以直接配置URL去获取openID； 2、在跳转到的页面生成URL，跳转后台获取用户openID URL示例：https://open.weixin.qq.com/connect/oauth2/auth...
vue 微信授权登录遇到的坑
lucky_oak的博客
12-13 2278
微信网页授权登录 参数 是否必须 说明 redirect_uri 是 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理 redirect_uri返回的url一直不能跳转，找了好久，头都大了，最后才发现，要跳转的url多了“#/”符号，查阅Vue Router修改mode 为history 去掉“#/”符号，正常跳转。 ...
vue实现微信扫码登录
最新发布
qq_36437991的博客
04-27 912
vue实现微信扫码登录组件
vue实现微信公众号微信登录
木贝西的博客
09-11 5947
1.当点击微信登录的时候调用自定义的方法 weixinlogin 会让用户授权，当用户授权成功的时候会返回一个带code的地址 weixinlogin() { weixinAuthUrl().then(res => {//请求后台接口的方法 if (res.link) window.location.href = res.link;//res....
Vue前端开发——微信登录
weixin_41496763的博客
05-07 2584
1、准备工作 1.1 现在微信开放平台注册一个账号 https://open.weixin.qq.com/ 1.2 查看官方文档 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接.
iframe跨域问题
和上帝躲猫猫
09-23 542
postMessage对象
vue项目中微信登录的实现操作
10-14
主要介绍了vue项目中微信登录的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中实现的微信分享功能示例
01-21
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下： /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', ...
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
11-20
web端的微信支付可分为JSAPI与H5 JSAPI使用场景为微信内部，而H5支付则是使用在非微信下的外部浏览器。 1.JSAPI 在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge 废话不多说直接上代码： // 调用后端...
vue 微信登录（前后台详细教程）
热门推荐
xm_w_xm的博客
11-10 1万+
一、pc端（网页端实现的是 扫码登录） 微信网页应用登录开发指南 第一步：点击微信登录的按钮的时候-调取微信登录的服务 请求code (前端) let APPID = "这个是申请的APPID"; let REDIRECT_URI = encodeURIComponent("这个是在微信开发工具网页端的地方填写的地址 - 授权回调域 中 后面可添加"); this.urltest = `https://open.weixin.qq.com/connect/qrconnect?app.
vue iframe 报错问题 浏览器监测到了iframe中存在不安全的链接正在尝试进行导航
奔跑的五花肉灬
01-11 3886
报错信息如下 Unsafe JavaScript attempt to initiate navigation for frame with URL ‘http://xxxx’ from frame with URL ‘http://yyyy’. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a
vue-wxlogin微信扫码登录插件【使用笔记】
estrusKing的博客
11-03 7549
文章目录1.安装2.直接界面引入3.使用4.使用例子 官方文档：https://www.npmjs.com/package/vue-wxlogin 一个简单的微信登陆组件，方便组件化模块化工程化引入 组件中没有访问dom，并且没有使用hook，所以支持ssr 使用参数与微信官方文档一致 url：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1.安装 npm ins
vue中调用微信js-sdk自定义分享
一只路过的小码农
04-11 1830
当项目运行在微信浏览器时，会遇到分享的需求，下面是我实现微信分享时遇到的一些坑，需要注意：原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShar...
vue获取微信登陆权限_Vue获取微信JSSDK授权,以及微信分享
weixin_39950083的博客
12-28 529
场景Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等步骤一 配置安全域名:在微信公众平台对应的公众号设置里面配上相应的JS接口安全域名(开发者需要有对应的权限)步骤二 引入JS文件:在需要调用接口的页面引入JS文件,我直接使用npm包'jweixin-module'(npm install --save jweixin-modul...
vue 中使用微信分享接口（简单实用）
weixin_44002432的博客
11-07 1019
前言 开发微信小程序时，基本上都要接入微信的SDK，而微信也提供了非常多的接口供我们去完成我们想要的功能。微信分享功能常常是我们在开发中常见的需求之一，本文将围绕微信分享接口使用展开，给自己以后碰到需求是查阅的同时，也希望对需要的朋友提供帮组。 封装微信分享接口 开始之前大家可以先读一读官方微信公众号的接入文档，毕竟官方的才是最权威的。 安装 npm install weixin-js-sd...
vue 微信登录
qq_43548590的博客
12-02 2749
vue 微信登录
Vue 网页端（pc）微信授权登录的流程与方法
陈先生的博客
04-24 2970
1.在当前页面利用微信提供的api接口，生成二维码图片，用户扫码完成过后，跳转到微信授权登录中间页，判断微信返还的状态，是已注册还是未注册。以上的前提是配置好微信开放平台的回传的url地址。前端拿到后端返还的参数，配置在wxlogin的组件内，即可成功得到二维码图片。redirect_uri这里的url指的是扫码成功后所跳转回的url。我们可以在跳转完成回去的页面的生命周期内，进行对微信登录状态的判断等。像微信的api请求后获取到返还的url，再给前端，前端直接跳转到。重要的是配置回传跳转的路径。
【日常】纪录一个愚蠢的问题
小鱼酱の前端之路( •̀ ω •́ )y
07-10 1690
最近在做JSP的课设，摸鱼划水了好多天，今天开始改项目。 然而当我去实现一个JS实现跳转问题的时候，我的Chrome开始猛给我报错 mymenu.js:160 Unsafe JavaScript attempt to initiate navigation for frame with origin 'http://unspoken:8080' from frame with URL 'http:...
浏览器跨域问题解决方案
乡下人
08-06 8409
浏览器跨域问题解决方案 参考： https://developer.yahoo.com/javascript/howto-proxy.html?guccounter=1 http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： ...
vue网页授权微信登录
11-03
Vue网页授权微信登录是一种通过微信公众平台提供的网页授权机制，实现用户在Vue项目中使用微信账号进行登录的方式。具体实现步骤如下： 1.访问login页面触发微信登录，打开页面重定向，获取code。 2.通过code获取...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值