公众号开发(2) —— 盛派.net SDK + vue搭建微信公众号网页开发框架

article/2025/10/8 16:59:00

需求：通过微信公众号菜单跳转到手机端网页，跳转后通过微信授权登录获取微信公众号用户的OpenId（用户关注公众号后，用户在公众号的唯一凭证），通过OpenId和后台数据库用户信息绑定起来并实现一些业务逻辑。
技术框架：网页端使用vue来作为前端框架，.net web api作为后端框架，本文主要记录前后端框架的搭建过程。

1 使用盛派.net SDK搭建后端框架

后端选择.net 6 webp api作为框架，并引入盛派.net SDK开简化开发流程，以下记录后端框架搭建流程。

1.1 创建.net6 webapi 项目

使用vs2022,创建一个.net core webp api项目，
在这里插入图片描述

因.net core 3.1 不再支持，所以框架选择.net 6：
在这里插入图片描述
创建后启动项目，能在浏览器中访问weatherforecast这个api则说明项目创建成功。
在这里插入图片描述

1.2 .net6 webapi 项目中引入Senparc.Weixin SDK

Senparc.Weixin SDK 是由盛派网络（Senparc）团队自主研发的针对微信各模块的开发套件（C# SDK），已全面支持微信公众号、小程序、微信支付、企业号、开放平台、JSSDK、摇一摇周边等模块。Senparc.Weixin SDK 在github上已经获得7K个start ,是最受欢迎的.net 微信开发SDK。既然别人已经造好了轮子，就引入到项目中可以有效的减少开发工作量。
接下来在项目中安装 Senparc.Weixin对应的Nuget 包：Senparc.Weixin.MP（对应公众号）、Senparc.Weixin.MP.Middleware（对应公众号消息中间件），Senparc.Weixin.MP选择的版本是16.12.101-preview2
在这里插入图片描述
Senparc.Weixin.MP.Middleware选择的版本是0.3.100.1-preview2，这两个Nuget包都有更新的版本，但是新版的部分API 有变，官方的教程中还是使用旧的版本，所以两个Nuget包的版本和官方教程里保持了一致。
在这里插入图片描述
接下来就是在Startup.cs中将Senparc.Weixin中引入，只需修改ConfigureServices 和Configure两个接口，修改后的Startup.cs如下：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Options;
using Senparc.CO2NET;
using Senparc.CO2NET.AspNet;
using Senparc.Weixin;
using Senparc.Weixin.Entities;
using Senparc.Weixin.MP;
using Senparc.Weixin.RegisterServices;namespace SenparcWeixin
{public class Startup{public Startup(IConfiguration configuration){Configuration = configuration;}public IConfiguration Configuration { get; }// This method gets called by the runtime. Use this method to add services to the container.public void ConfigureServices(IServiceCollection services){services.AddControllers();services.AddMemoryCache()//使用本地缓存必须添加.AddSenparcWeixinServices(Configuration);//Senparc.Weixin 注册（必须）}// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.public void Configure(IApplicationBuilder app, IWebHostEnvironment env,IOptions<SenparcSetting> senparcSetting, IOptions<SenparcWeixinSetting> senparcWeixinSetting){if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}//注册 Senparc.Weixin 及基础库var registerService = app.UseSenparcGlobal(env, senparcSetting.Value, _ => { }, true).UseSenparcWeixin(senparcWeixinSetting.Value, weixinRegister => weixinRegister.RegisterMpAccount(senparcWeixinSetting.Value));app.UseHttpsRedirection();app.UseRouting();app.UseAuthorization();app.UseEndpoints(endpoints =>{endpoints.MapControllers();});}}
}

启动项目没有报错说明Senparc.Weixin SDK已成功引入到项目。

1.3 微信公众号测试账号申请

通过认证的微信公众号才能调用一些高级接口，开发过程中一般选择申请一个测试账号来开发，测试号可以直接体验和测试公众平台的所有高级接口，测试账号申请地址https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login ，申请成功后会拿到appID等信息。
在这里插入图片描述
然后将公众号信息存放到项目中的appsetting.json文件中，程序中Token WeixinAppId WeixinAppSecret这些信息均从appsetting.json这一个地方读取。

{"Logging": {"LogLevel": {"Default": "Information","Microsoft": "Warning","Microsoft.Hosting.Lifetime": "Information"}},"AllowedHosts": "*",//CO2NET "SenparcSetting": {"IsDebug": true,"DefaultCacheNamespace": "DefaultCache"},//Senparc.Weixin SDK "SenparcWeixinSetting": {"IsDebug": true,"Token": "your Token","WeixinAppId": "your WeixinAppId","WeixinAppSecret": "your WeixinAppSecret"}
}

1.4 微信公众号测试账号申请

微信公众平号开发需要配置一个后台服务器的地址，配置的时候微信平台会调用特定的API来验证服务器是否有效，验证的逻辑如下，详细的逻辑可参考官方文档的入门指引 。
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html
配置维修后台服务器时就需要实现这个验证业务逻辑，并将程序发布到自己的服务器。服务器验证业务逻辑实现使用Senparc.Weixin 提供的接口，首先添加一个名为WeixinController的空api Controller。
在这里插入图片描述
在这里插入图片描述
WeixinController中添加一个get 方法，用以微信后台地址验证，get方法中主要使用了Senparc.Weixin 提供的CheckSignature方法，Token，EncodingAESKey，AppSecret均是从appsetting.json中获取。

using Microsoft.AspNetCore.Mvc;
using Senparc.Weixin;
using Senparc.Weixin.MP;namespace SenparcWeixin.Controllers
{[Route("api/[controller]")][ApiController]public class WinxinController : ControllerBase{public static readonly string Token = Config.SenparcWeixinSetting.Token;//与微信公众账号后台的Token设置保持一致，区分大小写。public static readonly string EncodingAESKey = Config.SenparcWeixinSetting.EncodingAESKey;//与微信公众账号后台的EncodingAESKey设置保持一致，区分大小写。public static readonly string AppId = Config.SenparcWeixinSetting.WeixinAppId;//与微信公众账号后台的AppId设置保持一致，区分大小写。public static readonly string AppSecret = Config.SenparcWeixinSetting.WeixinAppSecret;/// <summary>/// 微信后台验证地址（使用Get），微信后台的“接口配置信息”的Url填写如：http://www.xxxx.com/api/Weixin/// </summary>[HttpGet][ActionName("Index")]public ActionResult Get(string signature, string timestamp, string nonce, string echostr){if (CheckSignature.Check(signature, timestamp, nonce, Token)){return Content(echostr); //返回随机字符串则表示验证通过}else{return Content("failed:" + signature + "," + Senparc.Weixin.MP.CheckSignature.GetSignature(timestamp, nonce, Token) + "。如果您在浏览器中看到这条信息，表明此Url可以填入微信后台。");}}}
}

然后修改项目的启动地址，调试的时候选择不依赖IIS，所以修改项目中launchsettings.json中的SenparcWeixin配置，SenparcWeixin是项目的名称，将启动地址修改为http://192.168.1.4:9000。

    "SenparcWeixin": {"commandName": "Project","launchBrowser": true,"launchUrl": "weatherforecast","applicationUrl": "http://192.168.1.4:9000","environmentVariables": {"ASPNETCORE_ENVIRONMENT": "Development"}

调试启动的时候选择SenparcWeixin。
在这里插入图片描述
微信公众号接口服务器不能配置成http://192.168.1.4这样的数据域名，需要使用natapp将http://192.168.1.4:9000这个地址进行内网穿透，如何内网穿透可参考公众号开发(1) —— natapp 内网穿透，内网穿透后将微信公众号接口后台配置成natapp中的域名 ，如：http://xx.xx.xx/api/Weixin，提交后显示配置成功。
在这里插入图片描述
至此微信公众号服务接入部分工作结束。

2 vue微信公众号授权登录

2.1 vue授权登录基本方案

要获取用户的信息，就必须让用户进行授权，授权的时候要先调用微信的接口获取code，再用code去后端换取openid，微信公众号网页授权详细内容见官方网页授权文档。vue项目中授权放在主入口，建立一个Login.vue，Login.vue中内容如下：

<template><div><h2>我是Login</h2></div>
</template><script>
import axios from 'axios'export default {data () {return {appid: "your appid",openid: "",};},created () {// 从 window.location.href 中截取 codelet code = this.getUrlCode().code;if (code) {console.log('code', code);//code已存在，使用code通过后端获取Openidlet url = 'http://192.168.1.4/api/WeiXin/GetOpenId'axios.get(url, {params: {code: code,}}).then((res) => {console.log('openid', res.data);}).catch((error) => {alert(error);});} else {//code不存在，调用维修接口获取codethis.getCodeApi();}},methods: {getCodeApi () {// 重定向地址重定到当前页面，在路径获取 codelet urlNow = 'http://192.168.1.4';let url ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +this.appid +"&redirect_uri=" +urlNow +"&response_type=code&scope=snsapi_userinfo#wechat_redirect";window.location.href = url;},getUrlCode () {// 截取url中的code方法var url = location.search;var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);var strs = str.split("&");for (var i = 0; i < strs.length; i++) {theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];}}console.log(theRequest);return theRequest;},},
};
</script><style scoped>
</style>

基本的逻辑是前端页面用户同意授权，获取code，然后将code传回后端，通过 code 换取网页授权access_token。注意，这里通过 code 换取的是一个特殊的网页授权access_token,与基础支持中的access_token（该access_token用于调用其他接口）不同，access_token请求成功后返回的数据如下：

{"access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE","is_snapshotuser": 1,"unionid": "UNIONID"
}

在后台的WeixinController中添加一个GetOpenId 的api，通过调用SDK中提供的GetAccessToken实现用code 换取access_token的流程，access_token获取成功后给前端返回openid，后端GetOpenId 代码如下：

        /// <summary>/// 根据code获取维修公众号用户openid/// </summary>[HttpGet][Route("GetOpenId/")]public ActionResult GetOpenId(string code){OAuthAccessTokenResult result = null;result = OAuthApi.GetAccessToken(AppId, AppSecret, code);return Content(result.openid); }

前端对应的请求openId的代码：

      //code已存在，使用code通过后端获取Openidlet url = 'http://192.168.1.4/api/WeiXin/GetOpenId'axios.get(url, {params: {code: code,}}).then((res) => {console.log('openid', res.data);}).catch((error) => {alert(error);});

2.2 授权回调页面域名设置

需要注意的是微信公众号网页授权成功后会跳转到授权回调页面域名，所以测试前必须在公众号管理页面设置授权回调页面域名
在这里插入图片描述
授权回调页面是可以填写成数字域名的，为了调试方便，先填写成192.168.1.4这个数字域名（注意：授权回调域名只支持80 和443端口）。
在这里插入图片描述

2.3 反向代理解决授权回调页面域名端口问题以及后端api跨域问题

前端vue项目的启动地址是 http://192.168.1.4:8081/，原本的逻辑是授权登录后拿到code后再跳转回 http://192.168.1.4:8081/这个地址并获取openId，但是授权回调页面域名只支持80端口，上面的配置默认会 http://192.168.1.4:80/这个域名，与预期的逻辑不符。
这个时候就需要用到nginx反向代理，反向代理（Reverse Proxy）方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。对应本案例，用户访问http://192.168.1.4:80/这个域名时通过nginx将请求转到 http://192.168.1.4:8081/，用户实际访问的还是 http://192.168.1.4:8081/这个域名，这样就解决了授权回调页面域名端口问题。
另外，后端webp api的地址是 http://192.168.1.4:9000/，端口不同，前端调用后端api属于跨域访问。nginx支持带路径的反向代理，可以通过配置将http://192.168.1.4：80/api/ 反向代理到http://192.168.1.4:9000/api/，这样就解决了前端跨域的问题。
windows平台使用nginx反向代理很简单：
（1）从官网下载对应版本的nginx并解压。
（2）更改nginx\conf\nginx.conf文件，反向代理主要server节点，修改内容如下：

http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       80;server_name  192.168.1.4;location / {	proxy_pass http://192.168.1.4:8081/;}location ^~ /api/ {	proxy_pass http://192.168.1.4:9000/api/;}}
}

监听的是192.168.1.4:80，如果用户访问http://192.168.1.4:80/，会被转发到http://192.168.1.4:8081/域名；如果访问http://192.168.1.4:80/api/这个域名，会被转发到http://192.168.1.4:9000/api/域名。
（3）双击nginx.exe启动。

2.4 使用微信开发者工具测试授权登录

nginx反向代理启动后就可以测试授权登功能了，测试的时候需要在微信web 开发者工具中调试。web 开发者工具是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC上进行开发和调试工作。vue项目的调试地址为http://192.168.1.4:8081/，打开微信开发者工具，切换到公众号网页调试，地址栏输入http://192.168.1.4:8081/，即可进入公众号授权登录。
在这里插入图片描述

授权登录登录成功后通过console log中看到获取到的openId后台管理界面的openId一致。
在这里插入图片描述

公众号与后台看到的openId。
在这里插入图片描述
至此，微信公众号网页开发框架搭建完毕。

3 参考文章

1 https://sdk.weixin.senparc.com/
2 https://www.cnblogs.com/szw/p/wecaht-minimization-example.html


http://chatgpt.dhexx.cn/article/TKj6RPV3.shtml

相关文章

微信公众号开发框架讲解

微信公众号开发框架讲解

微信公众号的开发在基于微信给的开发文档基础上&#xff0c;特别做微商城那底层用Java框架会相当方便。下面长沙Java培训给大家具体讲讲微信公众号开发框架&#xff1a; 核心框架&#xff1a;Spring Boot2 Spring Cloud Alibaba Spring Cloud Gateway 配置中心、注册中心&am…
阅读更多...
人工智能博弈树极大极小搜索算法alpha-beta剪枝实现五子棋，带禁手

人工智能博弈树极大极小搜索算法alpha-beta剪枝实现五子棋，带禁手

由于2020的特殊情况&#xff0c;导致了一个被拖了挺久的大作业。。。。 五子棋其实大家很多时候会在闲暇时刻和朋友随便玩玩&#xff0c;这不仅让我回忆起了高中时候摸鱼休息就喜欢和同学在自己打的格子中用铅笔来一盘五子棋&#xff0c;回想起来确实是至今以来最快乐的一段时光…
阅读更多...
基于Python的人机交互的五子棋博弈树搜索

基于Python的人机交互的五子棋博弈树搜索

1. 算法原理 1.1 博弈树 博弈树针对的是二人零和博弈的问题&#xff0c;二人轮流行动&#xff0c;行动时令自己的优势最大。二人零和博弈有如下特点&#xff1a; 确定性&#xff1a;二人的行动有多种选择&#xff0c;但最终的行动是确定的信息完备性&#xff1a;博弈双方知道…
阅读更多...
C++实现基于博弈树的5x5一子棋人机对战

C++实现基于博弈树的5x5一子棋人机对战

基于博弈树的5x5一子棋人机对战 919106840637实验2 这是智能计算三个课程实验的第二个实验&#xff0c;即博弈树搜索 。我之前对博弈树的了解不多&#xff0c;所以实现起来比较的简略&#xff0c;仅仅是基本达到了要求 实验语言 C 实验内容 实践博弈树搜索——“5x5格子的一…
阅读更多...
人工智能作业——搜索树博弈树一阶逻辑表达式CNF范式

人工智能作业——搜索树博弈树一阶逻辑表达式CNF范式

1. 人工智能定义 1. 简述什么是人工智能 人工智能可分为两个维度:一个维度是从思维推理过程到行为结果(过程与结果);另一个维度是与人类表现的逼真度到数学与工程结合后的精确性(主观与客观)。 像人—样行动&#xff1a;图灵测试的途径&#xff1b;像人—样思考&#xff1a;认…
阅读更多...
AlphaBeta剪枝算法求解博弈树最优选择 头歌实验平台

AlphaBeta剪枝算法求解博弈树最优选择 头歌实验平台

AlphaBeta剪枝算法求解博弈树最优选择 头歌实验平台 前言一、AlphaBeta剪枝是什么&#xff1f;1.由来, 最大最小决策树2.发展3. AlphaBeta剪枝 二、实验算法伪代码三、实验算法代码四、实验结果在这里插入图片描述 五、感谢 前言 产生本文的缘由 人工智能原理课程 可选实验 “…
阅读更多...
并行博弈树搜索算法-第3篇 优秀的园丁：Alpha-Beta算法

并行博弈树搜索算法-第3篇 优秀的园丁：Alpha-Beta算法

3.1 Alpha-Beta算法 虽然博弈树的状态是有限的,但是状态个数却非常多.假设博弈树的深度为d,每个结点有b个分支,即分支因子&#xff08;branchingfactor&#xff09;为b,那么使用Min-Max方法搜索这个博弈树需要搜索个结点. 然而幸运的是,Min-Max方法的一些搜索是没有必要的,…
阅读更多...
利用α-β搜索的博弈树算法编写一字棋游戏 python

利用α-β搜索的博弈树算法编写一字棋游戏 python

游戏规则 “一字棋"游戏&#xff08;又叫"三子棋"或"井字棋”&#xff09;&#xff0c;是一款十分经典的益智小游戏。“井字棋"的棋盘很简单&#xff0c;是一个 33 的格子&#xff0c;很像中国文字中的"井"字&#xff0c;所以得名"井字…
阅读更多...
博弈树 极小极大分析法

博弈树 极小极大分析法

一、博弈概述 博弈特点&#xff1a; &#xff08;1&#xff09;博弈的初始格局是初始节点 &#xff08;2&#xff09;在博弈树中&#xff0c;“或”和“与”是交替出现的。自己一方的扩展节点是“或”关系&#xff0c;对方扩展的节点是“与”关系。双方轮流扩展节点。 &…
阅读更多...
第6-2课：决策树、博弈树和行为树

第6-2课：决策树、博弈树和行为树

在以各种“XX学习”为代表的人工智能技术普及之前，游戏里常见的角色 AI 都是各种预设的行为逻辑，比如博弈树和行为树，当然也会用到各种专家知识库。当这些预设的行为逻辑足够复杂的时候，往往会让游戏玩家觉得游戏里的人物很“智能”。从本质上来说，这些都还不算是真正的 A…
阅读更多...
并行博弈树搜索算法-第4篇 更上一层楼：Alpha-Beta算法的改进

并行博弈树搜索算法-第4篇 更上一层楼：Alpha-Beta算法的改进

在Alpha-Beta算法被广泛运用后,对该算法的很多改进算法也相继被提出.这些改进算法主要在以下几个方面对Alpha-Beta算法进行改进[7]: 1. 择序&#xff08;ordering&#xff09;.在搜索博弈树时,内部结点有多个可能的移动.择序指的是搜索这些分支的顺序.择序影响着搜索叶结点的个…
阅读更多...
博弈树的启发式搜索

博弈树的启发式搜索

什么是博弈树 在博弈过程中, 任何一方都希望自己取得胜利。因此,当某一方当前有多个行动方案可供选择时, 他总是挑选对自己最为有利而对对方最为不利的那个行动方案。 此时,如果我们站在A方的立场上,则可供A方选择的若干行动方案之间是“或”关系, 因为主动权操在A方手里,他或…
阅读更多...
博弈树 α-β剪枝

博弈树 α-β剪枝

由于搜索的复杂度有点高&#xff0c;所以在树上减少计算量肯定是剪枝了&#xff0c;这里我们把剪枝的办法称作的&#xff1a;α-β剪枝 我们在前面的文章中谈到&#xff0c;当第一次运作的是A&#xff0c;则所有的奇数深度的节点都是A做的选择&#xff0c;所有偶数深度的节点都…
阅读更多...
博弈树优化

博弈树优化

前言: 　　对弈类游戏的智能算法, 网上资料颇多, 大同小异. 然而书上得来终觉浅, 绝知此事要躬行. 结合了自己的工程实践, 简单汇总整理下. 一方面是对当年的经典<<PC游戏编程(人机博弈)>>表达敬意, 另一方面, 也想对自己当年的游戏编程人生做下回顾. 　　承接上两…
阅读更多...
博弈树中关于α-β剪枝树要点

博弈树中关于α-β剪枝树要点

目录 一&#xff0c;α-β剪枝树搜索方法&#xff1a;深度优先&#xff08;DFS&#xff09;&#xff0c;一般从博弈树最左边开始一直搜索到最右边。 人工智能导论复习&#xff1a;| 一&#xff0c;α-β剪枝树搜索方法&#xff1a;深度优先&#xff08;DFS&#xff09;&#…
阅读更多...
（只此一篇便绝b能懂的）五子棋AI算法原理，博弈树、极大极小搜索、αβ剪枝

（只此一篇便绝b能懂的）五子棋AI算法原理，博弈树、极大极小搜索、αβ剪枝

我在最近撰写五子棋AI程序设计报告时&#xff0c;翻阅了很多的资料博客&#xff0c;但却发现大佬们的博客&#xff0c;没有一篇是能让我只看它就能理解全部的AI算法。在看了众多博客后&#xff0c;我终于对博弈树、极大极小搜索、αβ剪枝恍然大悟&#xff0c;其实这些看似高大…
阅读更多...
五子棋智能算法-博弈树算法思想详解（一）

五子棋智能算法-博弈树算法思想详解（一）

学习这个算法之前必会链表 关于链表看这两篇博文 https://blog.csdn.net/viafcccy/article/details/84502334 https://blog.csdn.net/viafcccy/article/details/85041942 在五子棋下棋中 我们最容易想到的算法就是对于棋局的推演 从而找到一种最佳的情况去使棋局向这个方向发…
阅读更多...
基于博弈树的五子棋 AI 算法及其 C++ 实现

基于博弈树的五子棋 AI 算法及其 C++ 实现

基于博弈树的五子棋 AI 算法及其 C 实现 摘要一 五子棋的游戏规则二 五子棋对弈的算法描述2.1 博弈树搜索算法2.2 α ─ β 剪枝2.3 估价函数 三 五子棋对弈的算法实现3.1 Node类3.1.1 成员变量3.1.2 成员函数 3.2 GameTree类3.2.1 成员变量3.2.2 成员函数 四 五子棋对…
阅读更多...
博弈与博弈树

博弈与博弈树

博弈与博弈树 博弈 博弈双方根据事先制定的规则&#xff0c;轮流交替在对应的棋局上做出自己的选择&#xff0c;然后根据规则判定那一方获胜。 博弈树&#xff08;一种特殊的与或树&#xff09; 目标&#xff1a;将当前棋局作为根节点&#xff0c;选出最有利于自己获胜的一步…
阅读更多...
博弈树搜索算法

博弈树搜索算法

即使满腹经纶&#xff0c;但没有好的口才来授课&#xff0c;也会让学生听得昏昏欲睡、不知所云呢&#xff01;即使满腔热血&#xff0c;没有好的口才来凝聚共识&#xff0c;也会让这份理想温暖黯淡无光。但是&#xff0c;好的说话之道&#xff0c;也要有一颗赤诚的心、诚恳的情…
阅读更多...
推荐文章

Copyright @ 2022~2023