Vue+abp微信扫码登录的实现代码示例


Posted in Javascript onJanuary 06, 2020

最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了。分享给需要的人,也作为自己的一个笔记。后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过。

注册微信开放平台账号#

在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用。审核通过后获取到AppID和AppSecret以及登记的网站url。只有此url下的地址微信扫码后才能回调。

Vue+abp微信扫码登录的实现代码示例

具体申请条件见官方文档。

生成登录二维码#

在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的id
    appid: 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

Vue+abp微信扫码登录的实现代码示例

[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; }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
Vue学习之axios的使用方法实例分析
Jan 06 #Javascript
vue 微信扫码登录(自定义样式)
Jan 06 #Javascript
React学习之JSX与react事件实例分析
Jan 06 #Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
You might like
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP常用技巧汇总
2016/03/04 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
详解python的argpare和click模块小结
2019/03/31 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
甜点店创业计划书
2014/01/27 职场文书
招聘专员岗位职责
2014/03/07 职场文书
效能监察建议书
2014/05/19 职场文书
护理专业自荐书
2014/06/04 职场文书
企业宣传口号
2014/06/12 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
计算机专业自荐信
2015/03/05 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
Python代码实现双链表
2022/05/25 Python