写在前面
微信网页授权登陆是微信网页开发的第一步，由于框架限制需要使用.NET WebAPI的前后端分离模式进行开发，所以经过几天的摸索，写了这个简单的微信网页授权的实现Demo，本篇文章为微信公众号的配置与前端页面的实现，后端部分在下一篇文章中，链接也在文章底部。特别说明，本文章适用于微信内网页应用的授权登陆，不适用于普通网站的扫码授权登录，将在后续文章中进行论述。
后端篇：https://blog.csdn.net/weixin_42550800/article/details/94983616
正式开始
首先，我们需要对微信网页授权的机制有所了解，许多场景下，我们只需要获取微信用户的相关信息，包括暱称、头像、OpenId等信息。（OpenID是用户在访问公众号应用时分配的唯一标识，要注意的是，同一个用户在不同的微信公众号的OpenID不同）。
在确定了这个需求后，就要了解微信的授权机制。首先用户在微信中访问对应的网页应用，当应用检测到没有对应的用户信息时就会跳转到授权页面，用户选择同意或者不同意后返回到要跳转的页面（回调页面）。在回调页面中对微信的授权服务器进行请求，则可以顺利获取用户的相关信息。在请求过程中需要携带相关参数在正文中进行论述。
配置公众号
（相关操作需要认证后的服务号，如果没有认证服务号在左侧菜单底部选择开发者工具->公众平台测试账号进行相关配置）
正常配置如下：
1.登陆微信公众平台后进入功能设置
2. 配置授权域名
配置步骤不进行赘述，参见配置过程中的官方提示。值得注意的是这里只能配置两个域名，而且不能带端口，如果需要使用多个域名或端口则需使用Ngnix或其它的代理。所有前端页面必须在该域名下才能进行授权，不然会报错。
3.获取AppId和Secret
开发->基本配置 ，配置完成后开始网页编写
前端实现
目标：实现授权登陆并获取头像、暱称、所在省份城市
首先需要引入JQ <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
Js代码分为Common与Center两个类
Common中包含：getUrlParameter方法在Url中拆分对应参数
getWxUserInfo方法连接后台代码，获取用户信息，存入localStorage
Center中包含： Init方法用来初始化界面
enterWxAuthor方法判断是否存储了登陆状态，如果没有则跳转至授权界面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 如果添加此标签将把所有跨域请求转化为https请求 -->
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img id="headimgurl" src="">
<br />
欢迎,<span id="nickname"></span><br />
<span id="province"></span>,
<span id="city"></span>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
//替换为获取的APPID
var WX_APPID = 'XXXXXXXX';
//服务端地址
var WX_ROOT = 'http://xxxx/api/';
//一般工具类
var common = {
getUrlParameter:function(name) {//封装方法
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
},
/*** 授权后获取用户的基本信息*/
getWxUserInfo:function(par){
var code = common.getUrlParameter("code");
if (par) code = par;
$.ajax({
async: false,
data: {code:code},
type : "GET",
dataType:"json",
url : WX_ROOT + "Wechat/GetUserInfo",
success : function(json) {
if (json){
console.log(json);
try {
//保证写入的wxUserInfo是正确的
if (json.Accesstoken.openid) {
var str_jsonData = JSON.stringify(json);
localStorage.setItem('wxUserInfo',str_jsonData);//写缓存--微信用户信息
}
} catch (e) {
// TODO: handle exception
}
}
}
});
}
}
//页面逻辑控制类
var center = {
init: function(){
var getLocalData = localStorage.getItem('wxUserInfo');
var wxUserInfo = JSON.parse(getLocalData);
$('#nickname').html ( wxUserInfo.Accesstoken.nickname);
$('#province').html ( wxUserInfo.Accesstoken.province);
$('#city').html ( wxUserInfo.Accesstoken.city);
$("#headimgurl").attr("src",wxUserInfo.Accesstoken.headimgurl);
},
enterWxAuthor: function(){
var wxUserInfo = localStorage.getItem("wxUserInfo");
if (!wxUserInfo) {
var code = common.getUrlParameter('code');
if (code) {
common.getWxUserInfo();
center.init();
}else{
//没有微信用户信息，没有授权-->> 需要授权，跳转授权页面
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ WX_APPID +'&redirect_uri='+ 'http://shop.qimeng.group' +'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
}
}else{
center.init();
}
}
}
//页面函数入口
$(function() {
center.enterWxAuthor();
});
</script>
</body>
</html>