H5 wechat authorized login (wechat authorized login of the uniapp web version)

Today, let's redo the code Otherwise, this month will be over I may have nothing left in my mind I feel like a goldfish brain Very vicissitudes

1. First To do wechat authorization login You have a wechat official account Because the authorized login needs to be configured APPID And web authorization domain name

The authorized domain name of the web page here really makes me plant a lot of holes. It's hard to say Don't say anything Directly above
Development of official account —> Set in basic configuration

** The next step is the development of the official account —> Set the domain name in the interface permission **
This domain name must be correct And it is a secure domain name Because it's not just the code on top This is also the domain name of wechat authorization callback

In Web services The page is set in the basic information of authorized users A total of two can be set A development environment A test environment

After setting, you can develop Before development, it is recommended to read the official documents Of course, if you don't understand You can watch it a few more times I put the link here
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

Then there is the page

Because I have to bring the code in the later stage token Request header So I wrote a jump page

Pull up authorization in this interface After the authorization successfully obtains the information, it jumps to home page
（ps： I put this page on pages.json） One of the first So as soon as you come in, you can authorize

Don't talk much about code ：

By the way, please pay attention to the redirection path and... In the following link to pull the basic information appid Hidden by me Please configure by yourself
take URL And APPID Replace it with your own As for how to get it, please see the above The domain name configured above is the redirected path here

Jump interface springboard.vue

<template>
	<view class="springboard">
		
		<view class="">
		code:{
    {
    res}}
		</view>
		<view class="">
			access_token Interface ：{
    {
    result}}
		</view>
		<view class="">
			access_token :{
    {
    access_token}}
			<view class="">
				openid:{
    {
    openid}}
			</view>
		</view>
		<view class="">
			 User information  {
    {
    userInfo}}
		</view>
		<!--  Springboard page     This interface is mainly used for   Get cached information   If there is no cached information, go to authorization   If there is a direct jump to the mall interface -->
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				src:'',
				result:'',
				option:'',
				res:'',
				userInfo:'',
				access_token:'',
				openid:'',
				index:0
			};
		},
		methods:{
    
			getpower() {
    
				
				let url =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect"
							
				window.location.href = url
			},
			sendCode(code){
    
				uni.showToast({
    
					title:code
				})
				
				uni.request({
    
				    url: 'XXXXXXX/login/login_controller/access_token',
				    method:'POST',
					data: {
    
				        code: code
				    },
				    success: (res) => {
    
				        console.log(res.data);
				        this.result = res.data
						this.access_token = this.result.data.access_token
						this.openid = this.result.data.openid
						uni.request({
    
						    url: 'XXXXXXX/login/login_controller/access_user', // Just for the sample , Not the real interface address .
						    method:'POST',
							data: {
    
						       	access_token:this.access_token,
						       	openid: this.openid
						    },
						    success: (respones) => {
    
								this.userInfo = respones
						        console.log(res.respones);
								
						    }
						});	
				    }
				});
			},
		},
		onLoad(option) {
    
			this.option = option
			if (option.code == null) {
    
				this.getpower()
			} else {
    
				this.res =  option.code
				// uni.showToast({
    
				// 	title:option.code
				// })
				this.sendCode(option.code)
			}
		}
		
	}
</script>

<style lang="less" scoped>
.springboard{
    
	height: 99vh;
	position: relative;
	text-align: center;
	background-size: cover;
	// background-image: url('http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200703/20200703/1593768723d3eb9a9233e52948740d7eb8c3062d14.jpg');
	// background-image: url('http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200703/20200703/1593768995d3eb9a9233e52948740d7eb8c3062d14.jpg');
}
.LoginBtn{
    
	width: 50%;
	border: 1px solid  #409eff;
	padding:20rpx  ;
	display: inline-block;
	background-color: #409eff ;
	color: #fff;
	border-radius: 10rpx;
}
</style>

Here's an explanation When delegating Unable to test online That is to say, the local code cannot be tested It must be tested on the server

So I will show all the returned values on the page to see if there is a problem with the interface You can shield yourself later

And stepped on a huge pit Wechat authorization returns 40029 code Code failure
A lot of information Also set up There are several ways

Finally, according to our own situation, it is First of all Go to the mobile terminal for test after contract awarding Or test it in the wechat developer tool Be careful Even the tests in wechat developer tools are online code Secondly, in order to prevent the occurrence of 302 Unstable jump prevent code Code failure I added connect_redirect=1

Step on pit two ： If... Appears when running in wechat developer tool response_type Parameter error So there's a problem pulling up the authorization link Please reconfigure

Step on pit three The back-end interface configuration is used APPID Be consistent with the front end

Finally, let's talk about two interfaces

The first interface gets code Code later take code Pass the code to the back end Back end use code Code to get openID Then according to openID Get the user's personal information

The second interface here is based on the return value of the first interface To obtain the user's personal information Capturing the user information means that the authorization is successful
** Pay attention to pay attention to ！！！** Request to use post

All right. This is basically the end of the explanation The next one is about Step on the pit and several solutions

I hope you found that useful