一、网页授权
- 官网链接微信开放文档 (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
}
网友评论