如何实现PC端微信扫码授权(前端部分),常见错误redirect

根据你 APPID 的来源,微信扫码有两种.

微信开放平台 : 常见的 PC 网页扫码登录
微信公众平台 : 公众号授权

准备工作

无论使用哪一种方法都要先进入对应的平台,配置授权回调域名,这是必要的前提条件,具体怎么配置,可自行查阅资料.

微信开放平台入口
微信公众平台入口

授权流程

两种方法流程大致相同,首先是生成二维码,二维码对应的 url 中包含一个回调地址,在用户同意授权之后,将会在你的回调 url 上拼接参数 code 并且跳转,跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可.

两种方式的区别及注意事项:

开放平台方式是通过引入微信的 js,直接调用方法填写配置,即可在页面中以 iframe 的形式展现二维码
公众号方法没有官方提供的方法,需要自己引入生成二维码的插件,或者提前在第三方(草料)提前生成好二维码,以图片的形式存入项目
开放平台方式扫码同意授权之后,回调是在 pc 端回调的,手机扫码授权之后,对应的 PC 界面会发生跳转回调.手机只参与授权过程.code 在 PC 上即可获取
公众号方式扫码同意授权之后,回调是在手机端回调的,手机扫码授权之后,手机页面回调转到配置的回调地址,PC 界面无反应.code 此时是在手机端获取

所以一般普通的门户网站登录采用开放平台方式扫码,与公众号有业务相关的采用公众号方式(例如用户绑定微信后,通过公众号发布消息)

基于微信开放平台方式实现扫码授权

引入微信封装好的 js,VUE 项目可以在 Public 下的 index.html 文件下引入

<script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

在需要生成二维码的页面,准备一个标签

//html部分
//<div id="wxqr" class="wxqr"></div>//实例化微信的方法
new WxLogin({self_redirect: true,//该参数决定回调方式。默认是false,即授权后,整个页面发生跳转,true时,只有iframe嵌套部分发生跳转id: "wxqr", //对应便签idappid: "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);//debuggerif (r != null) return (r[2]); return null;}},mounted() {//从url中获取微信给我们的codelet code = this.GetQueryString('code')//此时已经拿到了我们的需要的code ,可以做业务上的需求//我们提前将方法挂载到饿window上 所以直接调用//以下方法是 调用接口将用户和微信信息进行绑定,关闭弹窗parent.window.getDataFromIframe(code)}

基于微信公众平台方式实现扫码授权

该方法没有微信提供的生成二维码方式,我们采用插件方法实现.先在项目下安装插件

npm install qrcodejs2 --save

//同样需要一个标签生成二维码
//<div v-show="noBind" id="qrCode" ref="qrCodeDiv"></div>
//引入
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.

有问题可以评论

如何实现PC端微信扫码授权(前端部分),常见错误redirect_uri参数错误解决相关推荐

微信pc端网站应用扫码授权登录
这是官方的文档对接之前至少要先看下流程图效果:用户点击微信登录跳出一个二维码,用户扫码授权后登录进去 1. 2. 需要做的事情 1.需要在微信开放平台上面注册账号,并认证企业,创建网站应用 2.认 ...
前端PC端微信扫码登录
PC端微信扫码登录一.微信开放平台 1.创建网站应用 2.设置回调域名二.代码 1.在index.html页面引入http://res.wx.qq.com/connect/zh_CN/htmled ...
PC 端微信扫码注册和登录
一.前言先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网 ...
细说pc端微信扫码登录
最近做了一个pc端微信扫码登录和微信付款的功能,一个比较常见的问题是在移动端使用微信扫码操作完毕后,pc端如何实时响应的问题.这里细说一下登录的实现流程,付款方面暂时还没找到比较好的实现方法,只能暂时 ...
Springboot 实现 PC端微信扫码登录
依赖 <dependency><groupId>org.apache.httpcomponents</groupId> ...
聚合支付PC端-微信扫码
聚合支付第二章微信扫码文章目录聚合支付前言一.开发前准备二.java实现 1.pom中引入相关jar包 2.支付相关工具类 3.支付相关商户参数 4.微信支付统一下单-生成二维码 5.微 ...
微信扫码支付html,pc端微信扫码支付和支付宝在线支付
本DEMO演示了PHP支付宝和微信扫码在线支付,支付成功后,在回调地址显示支付相关信息. 难易:中级下载资源下载积分: 888 积分操作步骤: 1.修改配置文件 Application/comm ...
微信支付 postman_（easywechat + Laravel 5.8）整理 PC 端微信扫码支付全过程
php中文网最新课程每日17点准时技术干货分享业务场景描述: 用户点击站点页面的 "购买" --> 即弹出二维码 --> 用户用微信扫描二维码 --> 根据微 ...
vue PC端微信扫码登录
我用的element,要是在弹窗里面使用,还是用自定义弹窗比较好,据说用官方的el-dialog会出不来.上代码: 在index.html页面里面引入对应的脚本 <script src=&quo ...

如何实现PC端微信扫码授权(前端部分),常见错误redirect_uri参数错误解决

如何实现PC端微信扫码授权(前端部分),常见错误redirect_uri参数错误解决相关推荐

最新文章

热门文章