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

news2024/12/26 22:18:37

需求:通过微信公众号菜单跳转到手机端网页,跳转后通过微信授权登录获取微信公众号用户的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 中截取 code
    let code = this.getUrlCode().code;

    if (code) {
      console.log('code', code);
      //code已存在,使用code通过后端获取Openid
      let 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不存在,调用维修接口获取code
      this.getCodeApi();
    }
  },
  methods: {
    getCodeApi () {
      // 重定向地址重定到当前页面,在路径获取 code
      let 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通过后端获取Openid
      let 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://www.coloradmin.cn/o/114908.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于51单片机的电子闹钟设计

使用的单片机是 STC89C52 此设计可以 年 月 日 时 分 秒显示和闹钟功能 能通过8个按键自由调整 时 分 秒 闹钟响铃时间 带复位按键&#xff0c;要是模块抽风&#xff0c;摁复位按键即可&#xff01; 使用 LCD16020A 屏幕显示 屏幕电路设有电位器&#xff…

Tableau可视化设计案例-07 多边形地图和背景图地图

Tableau可视化设计案例 本文是Tableau的案例&#xff0c;为B站视频的笔记&#xff0c;B站视频 参考&#xff1a;https://www.bilibili.com/video/BV1E4411B7ef 参考&#xff1a;https://blog.csdn.net/lianjiabin/category_9826951.html 数据下载地址为&#xff1a;https://do…

Java项目:springboot药品管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目属于前后端分离的项目&#xff0c;分为两个角色药品管理员和取药处人员 药品管理员&#xff1a; 登录、退出、药品信息录入、药厂信息录入…

Huawei Certified ICT Professional work (一)

文章目录一&#xff0c; 要求二&#xff0c;搭建拓扑图三&#xff0c;配置接口IP和环回IP四&#xff0c;进行RIP版本的配置并且宣告网段五&#xff0c;实现不同版本的连通&#xff0c;在交界处配置对端的版本号六&#xff0c;R3访问R7的环回地址走R5&#xff0c;改变R4的度量值…

Java项目:SpringBoot+MyBatis送水公司管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 这个项目是一个基于SpringBootMyBatis的送水公司管理系统 管理员权限包括&#xff1a; 客户管理 送水工管理 送水历史管理 计算工资 统计送水数…

79页智慧应急指挥平台1 6 N体系建设方案

【版权声明】本资料来源网络&#xff0c;仅用于行业知识分享&#xff0c;供个人学习参考&#xff0c;请勿商用。【侵删致歉】如有侵权请联系小编&#xff0c;将在收到信息后第一时间进行删除&#xff01; 完整资料领取见文末&#xff0c;部分资料内容&#xff1a; 行业专网解决…

ARM_SMMU_下

SMMU驱动代码分析 本文主要分析linux kernel中SMMUv3的代码(drivers/iommu/arm-smmu-v3.c) linux kernel版本是linux 5.7, 体系结构是aarch64 SMMU的作用是把CPU提交给设备的VA地址&#xff0c;直接作为设备发出的地址&#xff0c;变成正确的物理地址&#xff0c;访问到物理内…

五、传输层(一)传输层的功能

目录 1.1传输层的主要功能 1.2传输层的寻址与端口 1.2.1端口的作用 1.2.2端口号 1.2.3套接字 1.3无连接服务与面向连接服务 1.1传输层的主要功能 物理层、数据链路层和网络层共同解决了主机通过异构网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。然而在…

【iOS】CAlayer的认识与使用

什么是CALayer CALayer是UIView里的一个图层&#xff0c;其主要功能是负责显示视图与动画。CALayer和UIView 功能是一致的、 不过因为其 更加底层 所以 CALayer 有一些接口、 UIView 里面没有。 CALayer与UIView UIView&#xff1a;用于管理视图的容器。每次创建UIView对象时…

当我阳了之后是如何用Python来自动买药的

人生苦短&#xff0c;我用Python序言准备工作代码实战序言 哈喽兄弟们&#xff0c;我是郑再阳&#xff0c;马上要成杨过了&#xff01; 读者&#xff1a;在下羊了个羊&#xff01; 最近总是听说哪里哪里阳了&#xff0c;哪个公司又团灭了&#xff0c;emmm~ 于是乎看了几天后…

【exgcd】扩展欧几里得

主要介绍扩展欧几里的和总结一些常用性质 首先介绍裴蜀定理 对于任意整数a,b,存在一对整数x,y 满足 axbygcd(a,b) 即存在x0,y0使得ax0by0gcd(a,b) 扩展欧几里得可以求出x0,y0 从而当axbyc 可以求出其通解 设dgcd(a,b) 显然当c%d!0时无整数解 通解可以表示为 x(c/d)x0k…

Java项目:springboot访客管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 springboot搭建的访客管理系统&#xff0c;针对高端基地做严格把控来访人员信息管理&#xff0c;用户后端可以设置多个管理员帐号&#xff0c;给…

力扣(LeetCode)207. 课程表(C++)

拓扑排序 根据示例看出&#xff0c;课程表是否存在环&#xff0c;是问题的关键。这题的环&#xff0c;和数组、链表的环不一样&#xff0c;不好判&#xff0c;要转化成图判拓扑序列。 考虑向右和向左的方向&#xff0c;拓扑序列的所有边可以指向同一方向。 无环图进行重排序…

论文阅读Measuring Regularity of Individual Travel Patterns

这是一篇发表在IEEE TRANSACTIONS ON INTELLIGENT TRANSPORTATION SYSTEMS上的论文&#xff0c;论文主要描述了一种刻画出行规律性的方法。 1.论文概述 论文主要描述了一种刻画出行规律性的方法。首先&#xff0c;论文给出了对出行活动序列&#xff08;travel event&#xff…

因果推断3--DRNet(个人笔记)

目录 Learning Counterfactual Representations for Estimating Individual Dose-Response Curves 1介绍 2相关工作 3方法 4实验 5结果和讨论 6结论 7理解 论文标题 Learning Counterfactual Representations for Estimating Individual Dose-Response Curves 收录会…

深度学习-AlexNet(第一个深度卷积网络)

文章目录简介数据集模型搭建模型训练模型测试前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 AlexNet是第一个深度卷积网络模型&#xff0c;赢得了2012年ImageNet图像分类竞赛的冠军…

Java项目:springboot销售团队后台管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 该项目为后管系统&#xff0c;主要功能包括&#xff1a; 看板、业务机会管理、客户管理、联系人管理、我的日报、团队日报、主数据管理&#x…

【Linux】进程间通信之共享内存

目录&#x1f308;前言&#x1f338;1、System V共享内存&#x1f361;1.1、概念&#x1f362;1.2、原理&#x1f33a;2、共享内存相关函数和指令&#x1f361;2.1、shmget函数&#xff08;创建&#xff09;&#x1f362;2.2、shmctl函数&#xff08;控制&#xff09;&#x1f…

TCP 的重传机制、选择确认、缓存与流量控制、连接管理、拥塞控制(计算机网络-运输层)

目录 TCP 的重传机制 TCP 的选择确认 TCP 的缓存与流量控制 TCP 的连接管理 TCP的拥塞控制 TCP 的重传机制 TCP 每发送一个报文段就设置一个超时计时器&#xff1b; TCP 使用指数加权移动平均算法计算 RTT 及其偏差的估计值&#xff0c;并据此计算超时重传时间&#xff1b…

8 NP完全性理论

8 NP完全性理论 p问题 NP问题 NP完全问题 NPC(complete ) NP难问题NP-hard p问题 是一类能够用**(确定的)算法**在多项式时间内求解的可判定问题 ●这种问题类型也称为多项式类型 NP问题 是一类能够用不确定算法在多项式时间内求解的可判定问题 在确定性计算模型下多项式时…