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

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

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

准备工作

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

1. 微信开放平台入口
2. 微信公众平台入口

授权流程

两种方法流程大致相同,首先是生成二维码,二维码对应的 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", //对应便签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

//同样需要一个标签生成二维码
//<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.

有问题可以评论