如何实现PC端微信扫码授权(前端部分),常见错误redirect |
您所在的位置：网站首页 › 微信网页跳转异常怎么解决方法 › 如何实现PC端微信扫码授权(前端部分),常见错误redirect |
如何实现PC端微信扫码授权(前端部分),常见错误redirect
|
根据你 APPID 的来源,微信扫码有两种. 微信开放平台 : 常见的 PC 网页扫码登录微信公众平台 : 公众号授权准备工作 无论使用哪一种方法都要先进入对应的平台,配置授权回调域名,这是必要的前提条件,具体怎么配置,可自行查阅资料. 微信开放平台入口微信公众平台入口授权流程 两种方法流程大致相同,首先是生成二维码,二维码对应的 url 中包含一个回调地址,在用户同意授权之后,将会在你的回调 url 上拼接参数 code 并且跳转,跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可. 两种方式的区别及注意事项: 开放平台方式是通过引入微信的 js,直接调用方法填写配置,即可在页面中以 iframe 的形式展现二维码公众号方法没有官方提供的方法,需要自己引入生成二维码的插件,或者提前在第三方(草料)提前生成好二维码,以图片的形式存入项目开放平台方式扫码同意授权之后,回调是在 pc 端回调的,手机扫码授权之后,对应的 PC 界面会发生跳转回调.手机只参与授权过程.code 在 PC 上即可获取公众号方式扫码同意授权之后,回调是在手机端回调的,手机扫码授权之后,手机页面回调转到配置的回调地址,PC 界面无反应.code 此时是在手机端获取所以一般普通的门户网站登录采用开放平台方式扫码,与公众号有业务相关的采用公众号方式(例如用户绑定微信后,通过公众号发布消息) 基于微信开放平台方式实现扫码授权 引入微信封装好的 js,VUE 项目可以在 Public 下的 index.html 文件下引入 在需要生成二维码的页面,准备一个标签 //html部分 // //实例化微信的方法 new WxLogin({ self_redirect: true,//该参数决定回调方式。默认是false,即授权后,整个页面发生跳转,true时,只有iframe嵌套部分发生跳转 id: "wxqr", //对应便签id appid: "wxxxxxxxxxxxxx",//appid,建议走接口拿,不要前端写死 scope: "snsapi_login",//网页端登录填写此类型 redirect_uri: 'path',//授权后跳转路径,请使用urlEncode对链接进行处理 state: "",//非必须,可防止csrf攻击 style: "",//提供"black"、"white"可选 href: ``//自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档 });效果图
这里在对 self_redirect 参数解释一下,此时页面二维码部分实际是根据微信提供的方法生成的一个 iframe 标签.当我们 self_redirect 设置为 true 时,那么用户在扫码之后,发生跳转回调地址时,就是弹窗二维码页面发生变化,并不是整个 pc 页面跳转,如果 self_redirect 不写或者 false 时,授权之后,整个页面回发生跳转. 因为我的业务并没有指定授权之后打开指定页面,所以我们就用局部回调,授权之后,还在这个页面不动.而二维码部分会跳转到我们的回调地址,我们准备了一个空白页面,空白页面中只有一个关闭弹窗方法,所以在授权之后,二维码部分跳转到我们的空白页,空白页触发了关闭弹窗的方法. 回调页面的代码 如下 methods: { //这是一从url截取参数的方法 GetQueryString(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); let r = window.location.search.substr(1).match(reg); //debugger if (r != null) return (r[2]); return null; } }, mounted() { //从url中获取微信给我们的code let code = this.GetQueryString('code') //此时已经拿到了我们的需要的code ,可以做业务上的需求 //我们提前将方法挂载到饿window上 所以直接调用 //以下方法是 调用接口将用户和微信信息进行绑定,关闭弹窗 parent.window.getDataFromIframe(code) }基于微信公众平台方式实现扫码授权 该方法没有微信提供的生成二维码方式,我们采用插件方法实现.先在项目下安装插件 npm install qrcodejs2 --save //同样需要一个标签生成二维码 // //引入 import QRCode from 'qrcodejs2'; //实例化二维码 new QRCode(this.$refs.qrCodeDiv, { text: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${你的appid}&redirect_uri=${encodeURIComponent(你的回调地址)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`, width: 200, //二维码宽 height: 200, //二维码高 colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.L //容错级别 });这里说明一下链接中的scope参数,我使用的是snsapi_base,静默授权,也就是如果配置都没问题的话,用户扫码之后默认授权,直接回调无需确认,该方法获取的code给后端,只能拿到openid,如果需要额外信息可以采用snsapi_userinfo,这个需要确认授权. 更直白的说采用snsapi_base,用户扫码之后将直接看见你设置的回调页面 之后的回调页面与第一种方法一样.主要是截取url中的code,但这种方法回调页面时在手机上,也就是说授权之后.pc端并不知道,需要在pc轮循查询一下,用户是否在手机上完成授权(也就是拿到code是否发送了给后端) 常见的问题 redirect_uri 参数错误 这种是回调地址没有配对,回调地址必须是后台配置的域名下的路径,请在对应的平台后台配置域名. 例如后台配置的baidu.com,那么回调地址可以是baidu.com开头的任意地址,如baidu.com/xxx 也可是它本身 Scope 参数错误或没有 Scope 权限 这种的是appid配置不对,将公众平台和开放平台的appid搞混了,例如采用文章中第二种方法,但是配置的是开放平台的appid. 有问题可以评论 |
【本文地址】
今日新闻 |
推荐新闻 |