.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的微信公众号的微信授权

猜你喜欢