vuejs实现微信JSSDK获取网页授权以及接口授权（一）
vuejs实现微信JSSDK获取网页授权以及接口授权（一）
因为项目要用到微信相关接口，所以我马上学了一下，并在成功之后总结了一下所学到的，以及在学习过程中的错误解决方法，以便再遇到的时候能够提供参考。
相关资料：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 （微信JS-SDK说明文档）
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login （微信公众平台接口测试帐号申请）
https://mp.weixin.qq.com/debug/ （微信公众平台接口调试工具）
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign （微信 JS 接口签名校验工具）
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140 （微信web开发者工具）
接下来可以开始我们的微信之旅了~~
1、实现获取微信网页授权
关于网页授权的两种scope的区别说明：
1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。
3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。
关于网页授权access_token和普通access_token的区别：
1、微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。
网页授权流程分为四步： 1、引导用户进入授权页面同意授权，获取code
2、通过code换取网页授权access_token（与基础支持中的access_token不同）
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）
以上引用微信公众平台技术文档
第一步：用户同意授权，获取code
网页授权可通过 微信web开发者工具进行测试
可参考： https://blog.csdn.net/dc282614966/article/details/80863050 从注意事项看起（安全域名为自己买的服务器配置的域名）
在微信测试帐号申请 通过登录获取 appId
在JavaScript中 引用jweixin.js 文件
const appid = "*********************";
const secret = '************************'; // （appid 和secret 都是通过测试账号申请获取的）
if (!window.localStorage.getItem("openId") && !this.getCode("code")) { // openID是判断是否是新用户 code是判断是否已经授权
const url = encodeURIComponent(location.href.split('#')[0]); //获取#之前的当前路径
window.location.href = 'http://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + url + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
}
redirect_uri：回调的路径
获取code的URL ：
http://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
在执行完以上之后，会跳转到 redirect_uri/?code=CODE&state=STATE。可以通过获取当前路径，利用正则获取code的值：
getCode(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
},
到此，可参考 https://github.com/qq9694526/vue-wxh5/blob/master/index.html
相关问题也可参考（同一作者）：https://juejin.im/post/5c0490ef51882524cb6f5652
第二步：通过code换取网页授权access_token
获取access_tokenURL：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
代码参考：
this.axios.get('/api/sns/oauth2/access_token?appid=' + appid + '&secret='+ secret + '&code=' + this.code + '&grant_type=authorization_code')
.then((res) => {
console.log(res.data.access_token);
})；
code是上一步获取的 code
返回的数据：
{
“access_token”:"",
“expires_in”:,
“refresh_token”:"",
“openid”:"",
“scope”:""
}
第三步：拉取用户信息(需scope为 snsapi_userinfo)
网页授权作用域为snsapi_userinfo，开发者可以通过access_token和openid拉取用户信息。
http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
代码参考：
this.axios.get('/api/sns/userinfo?access_token=' +res.data.access_token + '&openid=' + res.data.openid + '&lang=zh_CN')
.then((oid) => {
console.log(oid);
});
请原谅我的取名无能~~
我的练习到这一步就结束了；
在这过程中看着文档一致把网页授权和接口授权搞混了，也是服了我自己了！！！