做关于微信上的小程序或者公众号,最重要的是——授权登录。
微信公众号不同于小程序,公众号是基于H5开发的网页版“程序”,而小程序则更像是一个微型的“APP程序”。微信公众号更得是为了营销。小程序则是为了和用户交互。
废话不多说,我们直接来看,如何开始做一个微信公众号
(1)申请公众号,开发者基本配置
这里就不做重复的叙述了。微信开发者文档上,写的很清楚 #微信开发者文档https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.htmlhttps://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html
(2)网页授权登录
在第一步完成之后,我们就要用户的授权登录了,因为是H5开发,所以要使用网页授权登录
#网页授权登录https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.htmlhttps://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 在微信开发者文档上写的也挺详细的,下面我们根据他的文档,一步步去完成授权
(2.1)用户授权登录,获取code
引导用户在微信客户端打开如下页面,来获取code。https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
上面的链接中,有三个蓝色标记处,分别代表三个参数
(1)APPID:
这个是公众号基本配置中的开发者ID(AppID),如图
(2) REDIRECT_URI:
这个是你授权时返回的路径,也就是说,也就是在这里路径里有你需要的code,你需要在这个url中截取code。
下面是我获取code,和截取code的代码
// 获取code
getCode() {
var appid = 'wxa***************26'
var url = 'https:/**************/index.html'
this.code = '';
this.code = this.getUrlCode().code // 截取code
mapState({
saveCode: this.code
});
console.log(this.code);
localStorage.setItem('code', this.code)
if (this.code == undefined || this.code == '' || this.code == null) { // 如果没有code,则去请求
console.log('没有code');
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
'&redirect_uri=' + url + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
}
},
// 截取url中的code方法
getUrlCode() {
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
}
}
return theRequest
},
(3)SCOPE:
这个是链接自带的参数,有snsapi_base和snsapi_userinfo可选
(2.2)通过code换取网页授权access_token
第一步之后,我们就获取了code值。将code发送给后端,后端调用接口链接,来换取access_token。
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
上面的链接中,也有三个蓝色标记处,分别代表三个参数
(1)APPID和SECRET
(2)CODE
code即是上面获取的code
后端代码如下
第二步完成会返回三个值,如上图红色方块中圈中的
(2.3)刷新access_token(如果需要)
由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
(2.4)拉取用户信息(需scope为 snsapi_userinfo)
当2.1,2.2完成之后,我们就可以获取用户信息了。
http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
ACCESS_TOKEN和OPENID参数,即是2.2中返回的数据
综上所述。微信公众号的网页授权登录,就已经完成了。
文章内容有什么错误的地方,望斧正,谢谢~