.net开发 abp框架+vue的微信公众号的微信授权

1、在进行微信开发之前你首先你得需要一个微信公众号（具体的申请步骤省略）

2、进行微信开发的开发配置（我这里是配置一个测试账号后面的微信支付还是要走微信公众号配置是一样的）

URL为微信开发正确响应发送Token验证的地址目录，也就是公众号里的白名单配置

Token是微信开发中用于回调微信响应的标识根据个人需求进行配置即可

js接口安全域名是承接微信接口以供调用的域名地址

另外微信支付还需要微信支付平台的商户号以及支付密钥的配置

3、接下来就是配置微信公众号菜单初始化了

/// <summary>
/// 初始化公众号菜单
/// </summary>
/// <param name="appConfiguration"></param>
/// <param name="logger"></param>
public static void Init(IConfigurationRoot appConfiguration, ILogger logger)

{

logger.Error("菜单初始化失败：" + result.GetFriendlyMessage());

具体根据你的sdk提供的方法进行代码的编写

4、然后对于微信授权可以有很多调用的方法，对于一般的前后端分离的架构设计来说对微信接口进行封装然后通过自己的接口调用访问是比较常用的方式

/// <summary>
/// 获取授权地址
/// </summary>
/// <param name="url"></param>
/// <param name="state"></param>
/// <returns></returns>
[AbpAllowAnonymous]
[HttpGet("GetWeChatAuthUrl")]
public Task<string> GetWeChatAuthUrl(string url, string state = "")
{
WeChat.SDK.Apis.Token.OAuthApi oauthApi = new WeChat.SDK.Apis.Token.OAuthApi();
string result = oauthApi.GetAuthorizeUrl(url, state);
return Task.FromResult(result);

}

这是调用自己封装的微信接口的接口调用代码

封装代码如下：

/// <summary>
/// 获取网页授权链接
/// </summary>
/// <param name="redirectUrl">授权后重定向的回调链接地址，请使用urlencode对链接进行处理</param>
/// <param name="state">重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节</param>
/// <param name="scope">
/// 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo
/// （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
/// </param>
/// <returns></returns>
public string GetAuthorizeUrl(string redirectUrl, string state, OAuthScopes scope = OAuthScopes.snsapi_userinfo)
{
return string.Format(
"https://open.weixin.qq.com/connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type={2}&scope={3}&state={4}#wechat_redirect",
AppConfig.AppId, redirectUrl.UrlEncode(), "code", scope, state);

}

通过该接口调用生成定向的微信访问链接，输入自己前端需要重定向url输出定向微信的地址

5、前端定向微信地址：

//访问授权

getopenid:function(){

this.$http.get('/api/Users/GetWeChatAuthUrl',{

params: {

url:"http://medical.app.stoned.vip/#/mine"

}

}).then((response)=>{

if (response && response.data.success == true) {

window.location.href=response.data.result;

}

})

vue js代码调用接口然后定向到微信地址

6、点击确定授权后接口会重定向到你输入的重定向url 并将返回参数拼接在你的路径url上如下所示

7、使用返回参数code调用接口获取用户信息

//获取授权用户信息

getuser:function(){

var urlCode=(window.location.href.split('&')[0]).split('=')[1];

this.$http.get('/api/Users/GetWeChatUser',{

params: {

code:urlCode,

}

}).then((response)=>{

if (response && response.data.success == true) {

sessionStorage.setItem("openid",response.data.result.openid);

sessionStorage.setItem("username",response.data.result.nickname);

sessionStorage.setItem("userimage",response.data.result.headimgurl);

this.mine_name=sessionStorage.getItem("username");

this.imageurl=sessionStorage.getItem("userimage");

this.getuserid();

}

})

前端调用接口

后台接口：

/// <summary>
/// 获取微信用户信息
/// </summary>
/// <param name="code"></param>
/// <returns></returns>
[AbpAllowAnonymous]
[HttpGet("GetWeChatUser")]
public async Task<GetUserInfoApiResult> GetWeChatUser(string code)
{
WeChat.SDK.Apis.Token.OAuthApi oauthApi = new WeChat.SDK.Apis.Token.OAuthApi();
var token = oauthApi.Get(code);
if (!token.IsSuccess())
{
return null;
}
//拉取用户信息(需scope为 snsapi_userinfo)
var weUser = oauthApi.GetUserInfo(token.AccessToken, token.OpenId);
return weUser;

}

sdk封装代码：

/// <summary>
/// 拉取用户信息(需scope为 snsapi_userinfo)
/// </summary>
/// <param name="oauthAccessToken">网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同</param>
/// <param name="openId">用户的唯一标识</param>
/// <param name="lang">返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语</param>
/// <returns></returns>
public GetUserInfoApiResult GetUserInfo(string oauthAccessToken, string openId, string lang = "zh_CN")
{
var url = string.Format("https://api.weixin.qq.com/sns/userinfo?access_token={0}&openid={1}&lang={2}",
oauthAccessToken, openId, lang);
var result = Get<GetUserInfoApiResult>(url);
return result;

}

这样就完成了授权并获取了用户信息

.net开发 abp框架+vue的微信公众号的微信授权相关推荐

uniapp开发微信公众号网页-微信JSSDK使用
uniapp开发微信公众号网页-微信JSSDK使用一. 安装jweixin-module 二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例 1. 在js公共文件夹下创建wecha ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
vue微信H5(微信公众号)实现微信支付功能
最近做了一个答题应用,甲方要求,用户进入应用先答题,最后点微信支付的时候,再授权,支付. 我的实现思路是点击微信支付按钮时,跳转到某个地址获取授权 redirect_uri 需要先在微信公众号后台支付 ...
HTML5微信支付和微信公众号内微信支付(VUE)
实现html5微信支付以及微信公众号内微信支付微信公众号内微信支付首先进行微信授权获取code /*获取授权拿到code*/getCodeApi(state){//获取codelet urlNow ...
springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证
转:springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证开发前必读以及准备工作: 1.微信公众平台开发是指为微信公众号进行业务开发,为移动应用.PC端网站.公众号第三方平台 ...
JAVA版开源微信管家—JeeWx捷微3.1小程序版本发布，支持微信公众号，微信企业号，支付窗
支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1--多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在原有 ...
JeeWx捷微3.0多触点版本发布，支持微信公众号，微信企业号，支付窗——喜迎双“旦”
喜迎双旦,JeeWx捷微3.0多触点版本发布^_^ JeeWx捷微V3.0--多触点版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.0.0版本是一个颠覆和跨时代版本,官方团队历 ...
淘宝客CMS，微信公众号，微信淘客机器人
淘宝客CMS,微信公众号,微信淘客机器人一站式淘客导购解决方案先来写个序楼主程序员,两耳不闻窗外事,一心只知敲代码,2019年前没接触过淘客,也不懂淘客是什么? 后来有个朋友给我提到,说他在做淘客 ...
微信公众号：微信H5页面JSAPI充值
微信公众号:微信H5页面JSAPI充值,遇到的一些坑,以及解决方式. 首先说一下微信充值分为很多种:目前我所涉及到的只是APP支付.H5支付.JSAPI支付. 区别: 1.根据不同场景 APP支付:是 ...

.net开发 abp框架+vue的微信公众号的微信授权

.net开发 abp框架+vue的微信公众号的微信授权相关推荐

最新文章

热门文章