一、网页授权
- 官网链接微信开放文档 (qq.com)
- 用户在微信客户端中访问了第三方网页,公众号就要通过微信网页授权机制获取用户基本信息如’open_id’,才能实现后续业务逻辑。
- 一般开发公众号项目第一步就是网页授权,通过授权获取openId和access_token来给用户推送消息或者识别用户等。
- 需要注意的就是第一步获取code通过code来获取openId和access_token。
//获取code的访问链接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec
//需要注意的是参数的拼接顺序一定要和上方的一致,微信会做正则强匹配校验
参考链接 里面的source_key是项目中需要的自己的参数 后面会自动带到重定向页面的后面
https://open.weixin.qq.com/connect/oauth2/authorize?appid=********&redirect_uri=https%3A%2F%2Ftstscreening.u-breath.cn%2Felk-aitmgmt-web%2Findex.html%3Fsource_key%3D*****&response_type=code&scope=snsapi_base&state=123#/pages/index/index_no_add
参数说明
-
appid
公众号的唯一标识 -
redirect_uri
授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 主要注意点就是记得把放上的项目访问地址编码下。如https%3A%2F%2Ftstscreening.u-breath.cn%2Felk-aitmgmt-web%2Findex.html%3Fsource_key%3D*****
-
response_type
返回类型,请填写code
固定写死即可 -
scope
应用授权作用域,snsapi_base
(不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo
(弹出授权页面,可通过openid
拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) -
state
重定向后会带上state
参数,开发者可以填写a-zA-Z0-9
的参数值,最多128字节 不是必须的可填可不填 -
#wechat_redirect
无论直接打开还是做页面302重定向时候,必须带此参数 一般都是填写需要跳转的页面 -
code
说明 :code
作为换取access_token
的票据,每次用户授权带上的code
将不一样,code
只能使用一次,5分钟未被使用自动过期。
同意授权后,页面会自动跳转到redirect_uri/?code=CODE&state=STATE
页面。
一般拿到code
后就能获取到open_id
这时就可以通过open_id
来访问接口获取数据开发项目,记得把open_id
保存下以方便开发项目,不用每次在通过code
再去获取方便很多。
二、JSSDK使用注意点
- 官网访问链接概述 | 微信开放文档 (qq.com)
- 微信 JS 接口签名校验工具 (qq.com)
- 博主遇到的问题是传递给后台的URL,后台没有全部接收到,只接收到部分解析了部分,所以后台接收到不完整的访问链接加密后传递给前端,前端写入配置也是不完整的一直报错。所以实际访问页面和写入配置的访问一直不匹配,导致报
config:invalid signature
错误,后台修改后返回的路径正确就好了。
//微信权限配置
let wxConfig = function(dispatch,jsApiList,wxReady){
let url = location.href.split('#')[0]; //正确
console.log('原始链接 = ',url);
console.log('encodeURIComponent = ',encodeURIComponent(url));
wxAuthorization({
sourceKey,
url:encodeURIComponent(url)
}).then((config) => {
const auth = config.record;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: auth.app_id, // 必填,公众号的唯一标识
timestamp: auth.timestamp, // 必填,生成签名的时间戳
nonceStr: auth.nonce_str, // 必填,生成签名的随机串
signature: auth.signature, // 必填,签名,见附录1
jsApiList: jsApiList // 必填,需要使用的JS接口列表,这里只说扫描,例如分享等都可以,只要写在数组里面就可以调用
});
//权限验证出错
// config信息验证失败会执行error函数,如签名过期导致验证失败,
// 具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
wx.error(function (res) {
alert(res.errMsg);
});
// 通过ready接口处理成功验证
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
// config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.ready(wxReady);
})
}
export {
wxConfig
}