web-前端微信公衆號獲取受權詳解

微信公衆號嵌入項目開發基本操做

1. 第三方發起微信受權登陸請求，微信用戶容許受權第三方應用後，微信會拉起應用或重定向到第三方網站，而且帶上受權臨時票據code參數；

2. 經過code參數加上AppID和AppSecret等，經過API換取access_token；

3. 經過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操做。

連接地址：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…"+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

但願對各位碼友有所幫助 做者:前端小超