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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
JQuery for与each性能比较分析
May 14 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
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
php实现网站插件机制的方法
2009/11/10 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP页面中文乱码分析
2013/10/29 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Vue头像处理方案小结
2018/07/26 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python基于socket函数实现端口扫描
2020/05/28 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
教育局长自荐信范文
2013/12/22 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS