Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了。分享给需要的人,也作为自己的一个笔记。后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过。
注册微信开放平台账号
在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用。审核通过后获取到AppID和AppSecret以及登记的网站url。只有此url下的地址微信扫码后才能回调。
具体申请条件见官方文档。
生成登录二维码
在vue登录页面嵌入登录二维码,根据官方文档,在页面中放入一个div元素,二维码就放在此元素中,注意var obj = new WxLogin必须放在mounted方法中执行,此时vue才会把dom元素初始化挂载到dom树,可以参见vue官方文档生命周期介绍。
<template><div id="login" class="login"></div>
</template><script>
export default {name: "WXLogin",data: function() {return {};},mounted() {this.wechatHandleClick();document.getElementsByTagName("iframe")[0].height="320";document.getElementsByTagName("iframe")[0].style.marginLeft="30px";},methods: {wechatHandleClick() {let ba64Css ="css代码base64编码";// 微信需要https的样式路径,这里将样式内容加密base64,可以避免使用https,如果你的网站是https的可以直接使用安官方文档使用css文件路径const appid = "你第一步申请的Appid";const redirect_uri = encodeURIComponent("http://*/#/login");var obj = new WxLogin({id: "login", //div的idappid: appid,scope: "snsapi_login",//固定内容redirect_uri: redirect_uri, //回调地址// href: "http://*/static/UserCss/WeChart.css" //自定义样式链接,第三方可根据实际需求覆盖默认样式。 href: "data:text/css;base64," + ba64Css// state: "", //参数,可带可不带// style: "", //样式 提供"black"、"white"可选,默认为黑色文字描述});}}
};
</script>
注册回调事件
用户扫码后微信会回调访问前一步提供的redirect_uri,这里要监控微信回调,并用微信返回的code请求后端,在后端再去访问微信服务器获取token及用户openID
在回调页面中监控路由改变事件以监控微信回调(因为我的二维码和回调在同一个路由页面),如果有其他更好的方法请告诉我。
@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 });});}}
}
后端接收code请求token
在appsettings.json中配置AppId和AppSecret
[HttpPost]
public async Task<AuthenticateResultModel> 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<WeiXinAccess_tokenResponse>(resstr);}catch (Exception e){throw new UserFriendlyException("获取微信access_token失败");}if (res == null || res.openid.IsNullOrEmpty()){throw new UserFriendlyException("获取微信access_token失败");}var userId = //根据openID获取用户id,我们系统要求用户提前把微信和用户关联绑定,所以这里可以根据微信用户的openID获取到户农户id;//使用用户直接登录if (!userId.IsNullOrEmpty()&&long.TryParse(userId, out long id)){var user = await _userManager.GetUserByIdAsync(id);var loginResult = await _logInManager.LoginByUser(user);string accessToken = CreateAccessToken(CreateJwtClaims(loginResult.Identity));return new AuthenticateResultModel{AccessToken = accessToken,EncryptedAccessToken = GetEncrpyedAccessToken(accessToken),ExpireInSeconds = (int)_tokenConfiguration.Expiration.TotalSeconds,UserId = loginResult.User.Id};}throw new UserFriendlyException("微信尚未绑定账号,请使用账号登录后绑定微信。");}
WeiXinAccess_tokenResponse类型
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; }
}
转载于:https://www.cnblogs.com/missile/p/10727581.html
Vue+abp微信扫码登录相关推荐
- Vue - 实现微信扫码登录功能(项目植入微信扫码登录功能)超详细完整流程详解及详细代码及注释,附带完整功能源码、常见问题解决方案
前言 如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
- VUE实现微信扫码登录
获取access_token时序图: public中index.html引入 <script src="https://res.wx.qq.com/connect/zh_CN/html ...
- Vue企业微信扫码登录
根目录下引入JS文件 企业微信官方接口文档 index.html <script src="https://wwcdn.weixin.qq.com/node/wework/wwopen ...
- Nuxt - 实现微信扫码登录功能(SSR 服务端渲染项目植入微信扫码登录功能)超详细完整流程详解及详细代码及注释,附带完整功能源码、常见问题解决方案
前言 如果您需要 Vue.js 版本的教程,请访问 Vue.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 0 ...
- AbpVnext 扩展企业微信扫码登录(钉钉登陆、短信登陆、微信登陆等)Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...
- vue实现网页端企业微信扫码登录功能(前端部分)
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
- vue 微信扫码登录嵌入方式及开发踩的坑点
文章目录 1. 微信扫码登录开发文档 申请AppID,AppSecret,配置回调地址 2. 微信扫码登录方式 3. 微信扫码登录代码 4. 使用 href 更改内嵌的样式 5. 坑点1:redire ...
- VUE项目中的微信扫码登录
微信扫码登录功能 首先了解微信扫码登录的流程和详解,详见微信扫码登录,这边仅是vue前端相关流程 一.创建微信登录按钮及方法,配置相关参数 1.创建微信登录按钮 <!--微信授权登录按钮--&g ...
- Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录 需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录.相比传统的账号密码方便很多. 企业微信扫码登录流程文档:(链接) 对于前端来说,重要的是如何构造 ...
最新文章
- Oracle数据库日常维护
- 兼容多种屏幕分辨率的通栏大图实现方法
- 高服从编纂器 VIM-操作篇(1)
- Qt图形界面编程入门(7)
- 6、EIGRP配置实验之负载均衡
- android string.format()长度,Android通过String.format格式化(动态改变)字符串资源的显示内容...
- C#2.0泛型中的变化: default 关键字
- matplotlib显示图中标签
- FasterRCNN之整体框架详解
- 1055 集体照 (25 分)
- 天津等保测评机构项目测评收费价格标准参考
- 新东方雅思词汇---8.1、reckon
- [LOJ6198]谢特
- 消费升级背景下零食行业发展报告_趋势 | 保健食品 “零食化”升级
- 小巧精美原厂轴 Cherry发布全新MX Board 1.0
- Adobe Photoshop 2021 for Mac 或于2021年1月份发布 PS 2021新功能一览
- JAVA——JSch
- 人工智能安全政策与标准
- voip(语音电话)
- C语言九九乘法表示例
热门文章
- [转贴]Ultimate List of Free Windows Software from Microsoft
- 兄弟连区块链教程Fabric1.0源代码分析configupdate处理通道配置更新
- SVM学习(续)核函数 松弛变量和惩罚因子
- c++面试常用知识(sizeof计算类的大小,虚拟继承,重载,隐藏,覆盖)
- shell bash判断文件或文件夹是否存在
- MPMovieplayercontroller
- Ubuntu 12.04(64位)下载并编译 Android 4.1 源码[只有2条命令]
- GCDPlot 0.31 发布
- android 获取文件夹下的所有文件
- GC垃圾回收的三色标记算法