.NET WebAPI 微信网页授权的实现（一）前端篇_.net8 微信授权-程序员宅基地
写在前面
微信网页授权登陆是微信网页开发的第一步，由于框架限制需要使用.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>
智能推荐
tf.reduce_sum()方法深度解析-程序员宅基地
文章浏览阅读2k次，点赞6次，收藏5次。tf.reduce_sum()函数深度解析从矩阵，数组，数据存储的角度 解析axis参数的意义_tf.reduce_sum
adb获取app包名的方法_adb获取包名-程序员宅基地
文章浏览阅读9.8k次，点赞4次，收藏29次。adb获取app包名的方法_adb获取包名
虾皮、lazada店铺运营攻略，如何搭建高效、稳定的自养号测评系统-程序员宅基地
文章浏览阅读913次，点赞16次，收藏10次。总之，要做好虾皮店铺，不仅需要明确的定位和优质的产品，还需要精心的运营和持续的改进。通过不断优化店铺形象、制定有效的营销策略、提供优质的客户服务以及加强供应链管理等手段，您将能够在激烈的竞争中脱颖而出，实现店铺的长足发展。1.稳定的网络环境是基石，它需要经过技术手段的洗礼，将电脑或手机的底层硬件参数伪装成国外数据，以躲避平台通过IP进行的深度检测。这种真实性高的评价能够帮助商家获得更多的信任和认可，从而提升产品的排名和流量的分配。您可以关注行业动态，学习先进的经营理念和技术，以提高店铺的运营水平。
统计检验问题:Friedman Test,Nemenyi test检验和Bonferroni-Dunn test检验_统计测试 cd diagrams-程序员宅基地
文章浏览阅读5k次，点赞11次，收藏43次。统计检验_统计测试 cd diagrams
三、购物车案例_17(笔记)_购物车案例请求数据地址-程序员宅基地
文章浏览阅读332次。购物车_购物车案例请求数据地址
在unity中DOTween 使用方法_tween number-程序员宅基地
文章浏览阅读603次。DOTween 使用方法_tween number
随便推点
【合集】常见中间件漏洞_hrs中间件-程序员宅基地
文章浏览阅读2.9k次，点赞3次，收藏37次。1. IIS1. PUT漏洞用户配置不当，exp:https://github.com/hackping/HTTPMLScan.git2. 短文件名猜解IIS的短文件名机制，可以暴力猜解短文件名，访问构造的某个存在的短文件名，会返回404，访问构造的某个不存在的短文件名，返回400。exp:https://github.com/WebBreacher/tilde_enum3.远程代码执行(CVE-2017-7269))**exp**:https://github.com/zcgonv_hrs中间件
db2基本概念-程序员宅基地
文章浏览阅读368次。DB2支持以下两种类型的表空间： 1、 系统管理存储器表空间（SMS-SYSTEM MANAGED STORAGE） 2、 数据库管理存储器表空间（DMS-DATABASE MANAGED STORAGE） SMS、DMS用户表空间的特性对照 特性 ..._db2
模拟window桌面实现-程序员宅基地
文章浏览阅读84次。正在开发中的游戏有个全屏功能--可以在window桌面背景上运行，就像一些视频播放器在桌面背景上播放一样的，花了个上午整了个Demo放出来留个纪念。实现功能：显示图标，双击图标执行相应的程序，右击图标弹出该图标对应得菜单，点击非图标区则弹出桌面菜单。需要完整工程可以点此下载：DesktopWindow.rar。程序效果图如下：在这个程序里，定义了一个XShellItem..._模拟实现windows桌面效果
https://www.byhy.net/tut/webdev/django/01/-程序员宅基地
文章浏览阅读944次。https://www.byhy.net/tut/webdev/django/01/_byhy.net
vue玩转移动端H5微信支付和支付宝支付_移动端支付宝微信支付vue项目怎么写-程序员宅基地
文章浏览阅读5.8k次，点赞13次，收藏57次。业务场景介绍：H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付 官方API ]订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）一、移动端微信支付，vue中如何玩？在移动端微信支付分为微信内支付和微信外支付。1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：//判断是否微信 is__移动端支付宝微信支付vue项目怎么写
深度学习AI编译器-TVM简介_tvm编译器-程序员宅基地
文章浏览阅读2k次，点赞5次，收藏9次。深度学习编译器主要为解决不同框架下训练的模型部署到指定的某些设备上时所遇到的一系列复杂的问题，即将各种深度学习训练框架的模型部署到各种硬件所面临的问题；_tvm编译器