获取appId
1.开通测试公众号
微信公众平台 (qq.com)https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
要想获取授权，必须要有公众号的相关信息
微信授权登录
从前面的步骤，我们可以获取到appId信息，获取到appId之后，我们就可以调微信的授权登录地址了。
注释：
APPID ：就是通过后端获取回来的公众号appId。
REDIRECT_URI：就是当前页面地址，前端可以使用encodeURIComponent(window.location.href.split("#")[0])方法获取。
response_type：默认code方式
scope：有snsapi_base，snsapi_userinfo两种。
snsapi_base：不弹出授权页面，只能获取openid。
snsapi_userinfo：弹出授权弹窗，可以通过openid获取到相关信息。
state：重定向之后会带上state参数
获取code
通过微信授权登录，成功之后，微信会重定向回到我们开发的页面，并且带了一个Code参数在url链接里面。
获取token
获取到code之后，就可以通过code传给后端，然后根据后端返回的token及其他数据进行后续操作。code仅使用一次，五分钟未使用自动过去。
实例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js21/com.yf.seting.js"></script>
<script src="/js21/com.yf.public.js"></script>
<script src="/js21/jquery-3.5.1.min.js"></script>
<script src="/js21/layui_v2.6.4/layui.js"></script>
<link rel="stylesheet" href="/js21/layui_v2.6.4/css/layui.css">
<title>微信页面授权登录</title>
</head>
<body>
<div>
首页
</div>
<script>
let appid = 'wxca3f6xxxxxbdab65c',redirect_uri = encodeURIComponent(window.location.href.split("#")[0]),response_type = '',scope = 'snsapi_base',state = '';
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`
//获取浏览器URL参数值
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
};
return null;
}
//判断地址是否有code 如果有code直接请求后端地址如果没有调用微信地址获取code 重定向到此页面
if(getQueryString('code')) {
alert(getQueryString('code'))
alert('yes');
getUserInfo()
}else {
location.href = url
}
//获取用户信息
function getUserInfo() {
$.ajax({
type:'GET',
url:Sys_Server.server + '/sso/weixinlogin?code=' + getQueryString('code') + '&state=' + getQueryString('state'),
data:{},
async:false,
success:function(result){
if(result.code == '000000') {
alert(JSON.stringify(result))
// layer.close(loading);
}else if(result.code == '401'){
}else {
}
},
error: function (xhr, type, exception) {
alert('授权失败')
}
})
}
</script>
</body>
</html>
