wx. Login and wx Getuserprofile simultaneous use problem

When developing wechat applet , Will call first wx.login obtain code in the future call wx.getUserProfile() obtain rawData、signature、encryptedData、iv Etc , Go to the background for processing ;

But as the 4 month 28 Japan 24 After the release of the new version of the applet , Interface adjustment , If you write like this, you will report a mistake ：error msg: ''getUserProfile:fail can only be invoked by user TAP gesture".

documentation ：

 

common problem

Before we start talking, let's say that I have personally encountered an accident that cannot be decrypted encryptedData, The prompt signature fails

1、 hold wx.login() On the wx.getUserProfile() Pre execution ; To ensure access sessionKey stay getUserProfile Before , Otherwise, the decryption will fail ;

2、 stay wx.logon() Of success Package in callback wx.getUserProfile, To ensure access code and obtain  encryptedData, So as to avoid decryption failure , But the official website clearly stipulates ,wx.getUserProfile() Only through tap Click to start , Otherwise error:getUserProfile:fail can only be invoked by user TAP gesture

3、 Refer to online practice hold wx.login() Put it in wx.getUserProfile() Of success Call back to execute , It is found that there will still be occasional Decryption failed ;

Realization ： adopt Promise Serial guarantees sequential execution

 Tips: Due to the use of uniapp Development , Writing and The syntax of the applet is different , But the thinking is the same

export default{
    data(){
        return{
    
        }
    },
    methods:{
        getUserProfile() {
			return new Promise((resolve, reject) => {
				uni.getUserProfile({
					desc: ' Get your nickname 、 avatar 、 Region and gender ',
					success: userRes => {
						console.log('getUserProfile-res', userRes);
						resolve(userRes);
					},
					fail: userErr => {
						uni.showToast({
							title: ' Authorization failed ',
							icon: 'error'
						});
						console.log('getUserProfile-err', userErr);
						reject(userErr);
					}
				});
			});
		},
		getLoginCode() {
			return new Promise((resolve, reject) => {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log('loginRes', loginRes);
						resolve(loginRes);
					}
				});
			});
		},
    }

}

html In the binding click event

<button @click.stop="goLogin" class="bottom-btn" type="default" size="mini"> Log in </button>

goLogin Method used in promise.all To ensure sequential execution

export default{
    data(){
        return{

        }
    },
    methods:{
        goLogin() {
            //  Pay attention to the way you write functions , Avoid mistakes 
			let userProFile = this.getUserProfile();
			let loginCode = this.getLoginCode();
			loginCode
				.then(code => {
					return code;
				})
				.then(logCode => {
					return new Promise((resolve, reject) => {
						userProFile
							.then(res => {
								resolve({ logCode, iv: res.iv, rawData: res.rawData, encryptedData: res.encryptedData, signature: res.signature });
							})
							.catch(err => {
								reject(err);
							});
					});
				})
				.then(res => {
					console.log('promise-res', res);
				})
				.catch(err => {
					console.log('userProfile-err', err);
				});
		}
    }
}

In this way, after several days of intermittent testing, no accidental The problem of decryption failure ！