Talking about the development of front-end H5 enterprise WeChat third-party applications (2)

As mentioned above, it is only the beginning of the third-party application development of Enterprise WeChat. I encountered various problems when using it. The most serious one, which I have been neglecting, is the user authorization problem of Enterprise WeChat. Here I will directly attach the code, I hope it will be helpful to all programmers.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, 
			minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>企业微信授权</title>
	</head>

<body>
	
</body>
<script>

setTimeout(function(){
	getQywxCode();
},500)


function getQywxCode(){
	console.log('===================获取企业微信用户code==========');
	var myAppid = ''; // 企业id
	var myAgentid = ''; // 自建应用id
	// !授权成功后跳转的路径【重定向的地址】(重定向的【域名】,需要事先在企微自建应用的可信域名中添加上,否则会报错)
	var redirectUri = encodeURI(''); // 应用中配置的可信域名+授权后跳转到的路径
	// state=CJSTATE 就是一个自己设置的标记字段,可以不写
	var authorUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+myAppid+'&redirect_uri='+redirectUri+'&response_type=code&agentid='+myAgentid+'&scope=snsapi_base&state=CJSTATE#wechat_redirect';
	// 页面将跳转至 【配置的跳转后的路径url】,并且url中的格式为:redirect_uri?code='用户code信息'&state='STATE'
	// vue 可以在跳转后的页面中通过【this.$route.query.code】和【this.$route.query.state】来获取到这两个参数
	// 使用这种方法能够避开跨域问题造成的报错中断
    // 这里我使用的是原生js方法,并未使用框架
	window.location.href = authorUrl;
}

</script>

Here I will briefly say, first enter this authorization page, confirm the authorization and then enter the page we need to enter. The authorization problem is solved in this way. Of course, the parameters must be accurate. I have explained the details in the code.

Guess you like

Origin blog.csdn.net/Mr_LiangDaGe/article/details/126506407