通过微信公众号实现H5登录授权

通过微信公众号实现H5登录授权

一、相关配置

1、配置参数测试公众平台信息（测试号相关配置示例）

2、配置JS接口安全域名

3、扫码关注公众号

4、添加网页授权地址

这里是指微信授权回调页面，同时发现可以前端页面可以配置127.0.01不需要在使用穿透。如果使用本地ip会提示Url错误，因为连接上因特网的每一台计算机都会有一个IP地址, 在linux下可以使用命令ifconfig来查看本机的ip地址（windows为ipconfig）, 而127.0.0.1被称为本地环回地址(loopback), 本地环回地址主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用环回地址发送数据，协议软件立即返回，不进行任何网络传输, 127.0.0.1可以认为是计算机上的一个虚拟网卡的ip地址

5、测试
微信开发者工具=》公众号网页项目=》输入地址

二、微信授权登录

相关代码如下

1.判断是否在微信浏览器环境中

onLoad() {
	let flag = this.is_weixin();
	if (flag) {
		this.checkWeChatCode()
	} else {
		window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+this.appid
	}
},

2.跳转url，获取code,登录授权

// 判断是否是微信浏览器
is_weixin() {
   var ua = navigator.userAgent.toLowerCase();
   if(ua.match(/MicroMessenger/i)=="micromessenger") {
	   return true;
   } else {
	   return false;
   }
}
checkWeChatCode() {
	let code = this.getUrlCode('code')
	if (code) {
		this.getOpenidAndUserinfo(code)
	} else {
		this.getCode()
	}
},
// 获取code
// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
getCode () {
	// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
	let code = this.getUrlCode('code')
	if (code === null || code === '') {
		//encodeURIComponent对链接进行处理
		window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid 
		+'&redirect_uri=' + this.callbackurl + '&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=1#wechat_redirect';
	} else {
		this.code = code; 
	}
},
getUrlCode (name) {
	return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
// 授权登录
getOpenidAndUserinfo(code) {
	axios('GET',"/wx/login?code="+code,code,"login").then(res=>{
		console.log(res)  //获取用户数据
	})
},

over: 对初级开发者来说应该够用了，高级开发者如果路过欢迎提出问题，很荣幸得到大佬指点。