常见的微信扫码登录有两种：

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

无论那种形式都需要配置回调域名，自行查询即可（微信开放平台入口、微信公众平台入口）。

两种方式的共同点：

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

两种方式的区别：

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

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

1 引入微信封装好的 js,

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

//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 时,授权之后,整个页面回发生跳转.

因为我的业务并没有指定授权之后打开指定页面,所以我们就用局部回调,授权之后,还在这个页面不动.而二维码部分会跳转到我们的回调地址,我们准备了一个空白页面,空白页面中只有一个关闭弹窗方法,所以在授权之后,二维码部分跳转到我们的空白页,空白页触发了关闭弹窗的方法.

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

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

2 用户扫码之后默认授权,直接回调无需确认,该方法获取的code给后端,只能拿到openid,如果需要额外信息可以采用snsapi_userinfo,这个需要确认授权。更直白的说采用snsapi_base,用户扫码之后将直接看见你设置的回调页面。之后的回调页面与第一种方法一样.主要是截取url中的code,但这种方法回调页面时在手机上,也就是说授权之后.pc端并不知道,需要在pc轮循查询一下,用户是否在手机上完成授权(也就是拿到code是否发送了给后端)

常见的问题

1 redirect_uri 参数错误

这种是回调地址没有配对,回调地址必须是后台配置的域名下的路径,请在对应的平台后台配置域名。例如后台配置的baidu.com,那么回调地址可以是baidu.com开头的任意地址,如baidu.com/xxx 也可是它本身

2 Scope 参数错误或没有 Scope 权限

这种的是appid配置不对,将公众平台和开放平台的appid搞混了,例如采用文章中第二种方法,但是配置的是开放平台的appid.

3 上面标红的地方是我没有注意看文档导致大问题 🙁

转载请注明：26点的博客 » PC端微信扫码登录容易忽略的几个问题