微信二维码登录大揭秘！Vue登录界面坑爹？别再被搞糊涂了

嗨喽！听听我说个超级有趣的事情！你猜微信二维码登录竟然会出现大问题?千万别觉得小事一桩，其实是个大事呢!我前阵子就遇到过这种情况，在电脑上用微信扫码都搞不定，赶紧过来跟大家分享解决方法！准备好听了没？

好嘞，咱们来聊聊咋整出一个登录二维码。哎哟喂，听谁说过，在vue登录界面添这东西可没那么容易呀~按照网上那些步骤做呗，先在网页弄个div元素，接着往里面添个二维码搞定。不过嘞，别忘了，得在mounted方法跑完后再创建那WxLogin对象，为啥？因为Vue得等你把所有DOM元素都画好了，它才开始工作如果你对Vue的生命周期啥的有点懵逼，那就去翻翻他家的文档！

说下咱们在微信上注册的事儿。你知道，别人扫了我们的二维码，微信会引导他们去往我们提前设置好的redirect_uri对不？然后，我们必须密切关注微信的动态，用code拿到后台的user’s token和openID哒。对了，回来后记得把那个返回的地址页修改一下因为咱们的二维码和回调都只在那儿呀。如果你有啥小技巧的话，也欢迎跟大家分享

 



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"可选，默认为黑色文字描述
   });
  }
 }
};

咱们接着说说back-end处理code请求token这事吧!记得在appsettings.json里设好AppID和AppSecret这可是关键！忍不住再提一句，别忘了WeiXinAccess_tokenResponse这个新样式这些小事儿可得留心嗷！

 @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 });
    });
  }
 }
}

朋友们好！先来告诉大家一个超级实用的小知识，接下来就是教你怎么利用微信扫描登录~不知道读完这篇文章后，你会发现些什么？欢迎大家积极提出自己的想法或者问题，如果遇到微信扫描登录有任何问题，也请随时扔过来让我瞧瞧~别忘了把这些好东西分享给更多的人！今天就让我们来探讨一下如何通过微信扫码登录以及解决方法哈。问题虽然出现得急迫，但解决起来却也并不困难~希望这篇短文本能够给你带来帮助，别忘记了点个赞并分享给你的亲朋好友！如果还有其他疑问，欢迎随时联系我们，看到好东西也别忘了点个赞分享出去！

[HttpPost]
public async Task 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=
&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(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("微信尚未绑定账号，请使用账号登录后绑定微信。");
}