怎么在Vue中使用abp实现一个微信扫码登录功能

  介绍

这篇文章将为大家详细讲解有关怎么在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

怎么在Vue中使用abp实现一个微信扫码登录功能

[HttpPost]   public  async  Task怎么在Vue中使用abp实现一个微信扫码登录功能