web-前端微信公众号获取授权详解

淩亂°似流年 2022-01-20 09:07 172阅读 0赞

微信公众号嵌入项目开发基本操作

1.  第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
2.  通过code参数加上AppID和AppSecret等，通过API换取access\_token；
3.  通过access\_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

链接地址：[open.weixin.qq.com/cgi-bin/sho…][open.weixin.qq.com_cgi-bin_sho]

1.微信公众号开发

appid:公司配置时自动生成
    
    
     encodeURIComponent()用来转码的    http://微信公众号配置的回调域名/路径
    
    
     snsapi_userinfo:手动确认授权
    
    
     snsapi_base：自动确认授权
    
    
    
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect  
    
    
    
    getOpenId(code) { //获取openId
    			this.$indicator.open("授权获取中");
    			this.$axios({
    					method: "post",
    					url: 'weChat/getWeChatUserInfo',
    					params: {
    						code: code,
    						recommederId: this.recommederId,//此字段根据项目入参自行定义,非必传
    						sourceBusiness: this.$route.query.sourceBusiness || 2, //业务来源字段
    					}
    				})
    				.then(reg => {
    					this.$indicator.close();
    					localStorage.setItem('openId', reg.responseBody.openId || '');
    					localStorage.setItem('token', reg.responseBody.token || '');
    					localStorage.setItem('headimgurl', reg.responseBody.headimgurl || '');
    					localStorage.setItem('nickname', reg.responseBody.nickname || '');
    					localStorage.setItem('userId', reg.responseBody.userId || '');
    					this.isRouterAlive = true;
    					this.reload();
    				}, ero => {
    					this.isRouterAlive = true;
    					console.log(ero);
    				})
    		},
    		getCode() { //如果是微信公众号进入，获取code
    			if(!localStorage.getItem("openId")) {
    				this.code = getParams("code");
    				if(!this.code) {
    					window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + _config.appId + "&redirect_uri=" + encodeURIComponent(location.href) + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect');
    				} else {
    					this.getOpenId(this.code);
    				}
    			} else {
    				this.openId = localStorage.getItem("openId");
    				this.isRouterAlive = true;
    			}
    		},
    复制代码

2.根据code值前端获取openid，传给后端

window.location.href='https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=appsecret&code=CODE&grant_type=authorization_code';
    复制代码

错误状态：

\{"errcode":40030,"errmsg":"invalid refresh\_token"\}

刷新access\_token有效期

access\_token是调用授权关系接口的调用凭证，由于access\_token有效期（目前为2个小时）较短，当access\_token超时后，可以使用refresh\_token进行刷新，access\_token刷新结果有两种：

1.  若access\_token已超时，那么进行refresh\_token会获取一个新的access\_token，新的超时时间；
2.  若access\_token未超时，那么进行refresh\_token不会改变access\_token，但超时时间会刷新，相当于续期access\_token。

refresh\_token拥有较长的有效期（30天），当refresh\_token失效的后，需要用户重新授权。

正确返回参数如下： \{ "access\_token":"ACCESS\_TOKEN", "expires\_in":7200, "refresh\_token":"REFRESH\_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6\_bmasdasdsad6\_2sgVt7hMZOPfL" \}

实际项目运用： getCode()\{//如果是微信公众号进入，获取code if(!localStorage.getItem("openId"))\{ this.code = getParams("code"); if(!this.code)\{ window.location.href = "[open.weixin.qq.com/connect/oau…][open.weixin.qq.com_connect_oau]"+encodeURIComponent(location.href)+'&response\_type=code&scope=snsapi\_userinfo&state=STATE\#wechat\_redirect'; \}else\{ this.getOpenId(this.code); \} \}else\{ this.openId = localStorage.getItem("openId"); \} \}

##### 此文档创建于2018/10/30    #####

##### 希望对各位码友有所帮助 作者:前端小超 #####

[open.weixin.qq.com_cgi-bin_sho]: https://link.juejin.im?target=https%3A%2F%2Fopen.weixin.qq.com%2Fcgi-bin%2Fshowdocument%3Faction%3Ddir_list%26amp%3Bt%3Dresource%2Fres_list%26amp%3Bverify%3D1%26amp%3Bid%3Dopen1419316505%26amp%3Btoken%3D%26amp%3Blang%3Dzh_CN
[open.weixin.qq.com_connect_oau]: https://link.juejin.im?target=https%3A%2F%2Fopen.weixin.qq.com%2Fconnect%2Foauth2%2Fauthorize%3Fappid%3Dwx3f6f926fe8a0014a%26amp%3Bredirect_uri%3D