Vue+abp微信扫码登录的实现代码示例
前端  /  管理员 发布于 3年前   259
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了。分享给需要的人,也作为自己的一个笔记。后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过。 注册微信开放平台账号# 在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用。审核通过后获取到AppID和AppSecret以及登记的网站url。只有此url下的地址微信扫码后才能回调。 具体申请条件见官方文档。 生成登录二维码# 在vue登录页面嵌入登录二维码,根据官方文档,在页面中放入一个div元素,二维码就放在此元素中,注意var obj = new WxLogin必须放在mounted方法中执行,此时vue才会把dom元素初始化挂载到dom树,可以参见vue官方文档生命周期介绍。 注册回调事件# 用户扫码后微信会回调访问前一步提供的redirect_uri,这里要监控微信回调,并用微信返回的code请求后端,在后端再去访问微信服务器获取token及用户openID 在回调页面中监控路由改变事件以监控微信回调(因为我的二维码和回调在同一个路由页面),如果有其他更好的方法请告诉我。 后端接收code请求token# 在appsettings.json中配置AppId和AppSecret WeiXinAccess_tokenResponse类型 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
@Watch("$route") async RouteChange(newVal, oldVal) { await this.weixinRedirect(); } // 请求微信后台 async weixinRedirect() { let code = this.$route.query.code; let state = this.$route.query.state; if (code) { let wxTo = { code, state }; //请求后台 this.$http("*/WeixinRedirect",data:wxTo).then((token)=>{ //登录成功,把token写入cookie //跳转到主页 this.$router.replace({ path: "/", replace: true }); }).catch(error => { //保持当前页面 this.$router.replace({ path: "/login", replace: true }); }); } }}
[HttpPost]public async Task WeixinRedirect(string code, string state){ if (code.IsNullOrEmpty()) { throw new UserFriendlyException("微信授权失败,请重新授权"); } var appid = configuration["Authentication:Wechat:AppId"]; var secret = configuration["Authentication:Wechat:AppSecret"]; var url = $"https://api.weixin.qq.com/sns/oauth2/access_token?appid={appid}&secret={secret}&code=[code]&grant_type=authorization_code"; var httpClient = httpClientFactory.CreateClient(); httpClient.DefaultRequestHeaders.Add("User-Agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)"); httpClient.Timeout = TimeSpan.FromMinutes(3); var resstr = await httpClient.GetStringAsync(url); try{ //如果微信授权返回失败这里序列化不成功 var res = JsonSerializationHelper.DeserializeWithType
public class WeiXinAccess_tokenResponse{ public string access_token { get; set; } public int expires_in { get; set; } public string refresh_token { get; set; } public string openid { get; set; } public string scope { get; set; } public string unionid { get; set; }}
您可能感兴趣的文章:
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号