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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
JavaScript 调试器简介
Feb 21 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
浅析vue深复制
Jan 29 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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+Html+缓存
2006/12/20 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
解密效果
2006/06/23 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python扩展内置类型详解
2018/03/26 Python
Python实现多进程的四种方式
2019/02/22 Python
Python socket处理client连接过程解析
2020/03/18 Python
python学生管理系统的实现
2020/04/05 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
资深地理教师自我评价
2013/09/21 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
找工作最新求职信
2013/12/22 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
就业协议书范本
2014/04/11 职场文书
产品发布会策划方案
2014/05/12 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
看上去很美观后感
2015/06/10 职场文书
七一慰问简报
2015/07/20 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL