[wechat official account H5] authorization

WeChat official account , Unable to get the user's mobile number

URL And Token All need to be configured in the background , Just call the backstage directly , The domain name must be the same as URL The domain name of the .

then , Find the web account in the experience interface permission table – Page authorization to obtain the user's basic information , Click Modify ：


Two 、 obtain code
After configuring the above callback domain name , You can write code . The first is acquisition code, You need to open the following page ：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

 If prompt “ The link is not accessible ”, Please check whether the parameter is filled in incorrectly , Owned or not scope Authorization scope permission corresponding to parameter .

among , These parameters are described on wechat JSSDK There are instructions in the documentation , Here's the picture ：

After the parameters are configured , Enter this page and wechat will return code In the callback url Give it to us ：

then , We just need to url Intercept this code that will do , But we found this code Not following url At the back of , So at first I used vue Of this.$route.query.code The method doesn't work , Have to use js Intercept , Here is my code

methods: {
    
getCode () {
     //  Non silent Authorization , First bullet frame 
                this.code = ''
                var local = window.location.href //  Access to the page url
                var appid = 'wx65adcf075369****' 
                this.code = this.getUrlCode().code //  Intercept code
                if (this.code == null || this.code === '') {
     //  without code, Then ask 
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
      appid}&redirect_uri=${
      encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
                } else {
    
                    //  Your own business logic 
                }
            },
getUrlCode() {
     //  Intercept url Medium code Method 
                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
            }
}

My code logic is to judge whether there is code, No, just get ,encodeURIComponent(), Is a callback url Encoding , This wechat JSSDK There are instructions in the documentation . Get code in the future , To the backstage , Let the background get the user information and send it to the front end . After we get the user information , such as openId, Head etc. , It can be used localStorage cached , So you don't have to ask every time code, Every time I go backstage to get information . therefore , We can do it in mounted Hook functions are handled like this ：

mounted() {
    
        if(!window.localStorage.getItem('openId')){
     //  If caching localStorage There is no wechat openId, You need code Go backstage to get 
            this.getCode()
        } else {
    
            //  Other business logic 
        }
    }

Detailed explanation of reference address ：https://www.jianshu.com/p/5e0644528a34