介绍
这篇文章将为大家详细讲解有关怎么在Vue中使用abp实现一个微信扫码登录功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>生成登录二维码# 强>
在Vue登录页面嵌入登录二维码,根据官方文档,在页面中放入一个div元素,二维码就放在此元素中,注意var obj=new WxLogin必须放在安装方法中执行,此时Vue才会把dom元素初始化挂载到dom树,可以参见Vue官方文档生命周期介绍。
& lt; template> ,& lt; div id=發ogin",类=發ogin"祝辞& lt;/div> & lt;/template> & lt; script> export default  { ,名字:“WXLogin", ,数据:函数(),{ return 才能,{}; }, ,安装(){ this.wechatHandleClick才能(); document.getElementsByTagName才能(“iframe") [0] .height=?20”; document.getElementsByTagName才能(“iframe") [0] .style.marginLeft=?0 px"; }, ,方法:{ wechatHandleClick才能(),{ ,,let ba64Css =,,,,的css代码base64编码“;//,微信需要https的样式路径,这里将样式内容加密base64,可以避免使用https,如果你的网站是https的可以直接使用安官方文档使用css文件路径 ,,const appid =,“你第一步申请的Appid"; ,,const redirect_uri =, encodeURIComponent (“http://*/#/login"); ,,var obj =, new WxLogin ({ ,,,,,“login",,//div的id ,,,appid:, appid, ,,,范围:,“snsapi_login",//固定内容 ,,,redirect_uri:, redirect_uri,,//回调地址 ,,,//,href:,“静态/UserCss/WeChart.css" http://*/,//自定义样式链接,第三方可根据实际需求覆盖默认样式只,,, ,,,href:,“数据:文本/css; base64,“, + ba64Css ,,,//,:,“,,,//参数,可带可不带 ,,,//,风格:,““,,//样式,提供“black",“white"可选,默认为黑色文字描述 ,,}); ,,} ,} }; & lt;/script>
<强>注册回调事件# 强>
用户扫码后微信会回调访问前一步提供的redirect_uri,这里要监控微信回调,并用微信返回的代码请求后端,在后端再去访问微信服务器获取令牌及用户openID
在回调页面中监控路由改变事件以监控微信回调(因为我的二维码和回调在同一个路由页面),如果有其他更好的方法请告诉我。
, @Watch (“route"美元) ,async RouteChange (newVal, oldVal), { await 才能this.weixinRedirect (); ,} ,//请求微信后台 ,async weixinRedirect (), { let 才能;code =,。route.query.code美元; let 才能;state =,。route.query.state美元; if 才能;(代码),{ ,,let wxTo =, { 代码,,,, ,,,的状态 ,,}; ,,//请求后台 美元,才能这样。http (“*/WeixinRedirect",数据:wxTo),然后((令牌)=祝辞{ ,,,,//登录成功,把令牌写入饼干 ,,,,//跳转到主页 ,,,,,,美元router.replace({,路径:“/?,取代:,true }); ,,}).catch (error =祝辞,{ ,,,,//保持当前页面 ,,,,,美元router.replace({,路径:“/login",,取代:,true }); ,,,}); ,,} ,} }
后端接收代码请求令牌#
在appsettings。json中配置AppId和AppSecret
[HttpPost] public async  Task怎么在Vue中使用abp实现一个微信扫码登录功能