Uni app wechat official account (1) - Web page authorization login

        Do small programs on wechat or official account , most important of all —— Authorized login .

        Wechat official account is different from applet , The official account is based on the H5 Developed web version “ Program ”, And the applet is more like a miniature “APP Program ”. Wechat official account is more for marketing . Small programs are designed to interact with users .

        I don't say much nonsense , Let's go straight to , How to start a wechat official account

（1） Application for official account , Developer basic configuration     

        There is no repetition here . Wechat developer documentation , It's very clear  # Wechat developer documentation 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） Webpage authorization login

        After the first step , We are about to log in with the user's authorization , the reason being that H5 Development , So use web authorization to log in

# Webpage authorization login 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        It is also written in detail on the wechat developer document , Now let's according to his documents , Complete the authorization step by step

（2.1） The user is authorized to log in , obtain code

        Guide users to Wechat client Open the following page , To get code.https://open.weixin.qq.com/connect/oauth2/authorize？appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

The link above , There are three blue marks , Each represents three parameters

（1）APPID：

         This is in the basic configuration of official account developer ID(AppID), Pictured

（2） REDIRECT_URI：

        This is the path returned when you authorize , in other words , That is, there is what you need in the path code, You need to be here url Medium intercept code.

  Here is what I got code, And intercept code Code for

        //  obtain code   
         getCode() { 
				var appid = 'wxa***************26'
				var url = 'https:/**************/index.html'
				this.code = '';
				this.code = this.getUrlCode().code //  Intercept code
				mapState({
					saveCode: this.code
				});
				console.log(this.code);
				localStorage.setItem('code', this.code)
				if (this.code == undefined || this.code == '' || this.code == null) { //  without code, Then ask 
					console.log(' No, 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'
				}
			},
            //  Intercept url Medium code Method 
			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：

        This is the parameter of the link , Yes snsapi_base and snsapi_userinfo Optional

 （2.2） adopt code Website authorization access_token

After the first step , We got it code value . take code Send to back end , Back end call interface link , In exchange for access_token.

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

The link above , There are also three blue marks , Each represents three parameters

（1）APPID and SECRET

 (2)CODE  

        code It is obtained above code

The back-end code is as follows

The second step will return three values , As shown in the circle in the red square above

 （2.3） Refresh access_token（ if necessary ）

because access_token Has a shorter period of validity , When access_token After a timeout , have access to refresh_token refresh ,refresh_token Valid for 30 God , When refresh_token After failure , User reauthorization required .

 https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

 （2.4） Pull the user information ( Need to be scope by snsapi_userinfo)

When 2.1,2.2 When it's done , We can get user information .

http：GET（ Please use https agreement ） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

ACCESS_TOKEN and OPENID Parameters , That is 2.2 Data returned in

in summary . Wechat official account web page authorization login , We're done .

What's wrong with the content of the article , Be on the right track , thank you ~