评论

vue等前后端分离微信授权登录的解决方案

vue类前后端分离解决微信授权登录到一种方法

  • 准备工作

前提:1、在阅读此实践方案之前,确保已经对OAuth2.0授权流程以及完整阅读了【开放平台-网站应用-微信登录功能-网站应用微信登录开发指南(点击红字去阅读)】并理解相应的授权流程

2、在开放平台注册并申请了相关到网站应用,填写了开发信息-授权回调域,获得了接口 (微信登录)。

  • 原理简介

1.将微信登录二维码内嵌到自己的vue前端登录页面中,扫码后用户点击确认登录后会跳转回授权回调域(授权回调域设置与vue前端域名一致

2,此时携带code和state参数,vue在路由拦截中判断code和state参数,并携带code和state跳转到登录页面实现后续登录逻辑

3,登录页面在钩子函数mounted()中判断是否是微信授权登录,通过相关接口传送code和state给服务端,

4.由服务端携带code通过请求access_token接口请求access_token并完成后续登录逻辑,返回相应结果给vue前端。此时授权登录完成。

  • 实现
1.将二维码内嵌到vue前端登录页面中:文档中已介绍相关案例代码如下

步骤1:在页面中先引入如下JS文件(支持https)

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2:在需要使用微信登录的地方实例以下JS对象:

var obj = new WxLogin({
 self_redirect:false,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

x相关参数说明请仔细阅读文档中的参数说明;其中参数self_redirect的参数为false 即确认登录后再top window跳转到redirect_uri

内嵌二维码示例:

程序实现片段:引入js文件 ,通过自定义组件,将js文件引入页面


export default {
    components: {
        'remote-js': {
            render(createElement) {
                return createElement('script',{attrs:{type:'text/javascript',src:this.src}});
            },
            props:{
                src:{type:String,required:true}
            }
        }
    }
}

页面内添加js相关组件,并实例WxLogin:具体实现方式结合自己的登录页面业务逻辑实现:注意回调地址不支持#号输入,会将#号后内容清除

var obj = new WxLogin({
          self_redirect: false,
          id: "wechat-qrcode",
          appid: res.data.appid,
          scope: "snsapi_login",
          redirect_uri: '',
          state: ''
        });

h回调后,路由拦截设置:获取code,以及state,注意vue会自动添加 '#/' 在url地址后边,注意获取参数时去除

通过next()设置query参数 将code,state传到登录页面,

登录页面钩子函数mounted()中判断并请求服务端相应接口,例如判断参数有误code和state等 进行请求 服务端相应接口。完成相应的登录逻辑


此方案已经实现并使用中,如果有相关咨询问题,欢迎各位开发者大拿进行讨论。


最后一次编辑于  2020-03-19  
点赞 7
收藏
评论

3 个评论

  • AAA谭吉利
    AAA谭吉利
    2020-08-05

    太坑,我vue项目用的hash模式。结果微信那边重定向的路由总是错的,然后我这边有默认路由redirect,这样就重定向到默认路由去了,特别坑,微信那边就不能处理一下吗?这种机制真的特别垃圾

    2020-08-05
    赞同
    回复 6
    • 维百特
      维百特
      2020-08-05
      这个,真没办法,咱只能适应它
      2020-08-05
      回复
    • 维百特
      维百特
      2020-08-05
      你有没有把url encode一下试试
      2020-08-05
      回复
    • AAA谭吉利
      AAA谭吉利
      2020-08-05回复维百特
      url encode肯定也没用啊,你没发现,微信那边重定向回来之后不会触发导航守卫,这个是最坑的,马上就会呗vue router重定向到默认路由去了,你又不能在导航守卫里面直接获取code,因为其他指不定带了一个query参数(名字叫做code的东西),你只能先判断一下重定向的那个路由字符串,然后再去获取code,奈何它重定向回来之后又没法触发导航守卫。特别操蛋。
      2020-08-05
      回复
    • 维百特
      维百特
      2020-08-05回复AAA谭吉利
      也是吃过亏,踩过坑,你这还真没什么好办法,我是避免其他传参code,不行分离开吧,单独弄个页面处理微信回调,然后再进入vue,也是挺绕
      2020-08-05
      回复
    • Sherlock
      Sherlock
      2020-09-08
      不带# 就要把hash模式切换history模式 后端在配置一下重定向就能访问到了
      2020-09-08
      回复
    查看更多(1)
  • నక్షత్రం
    నక్షత్రం
    2020-07-07

    微信扫码授权后如何返回结果给前端

    2020-07-07
    赞同
    回复 2
    • 维百特
      维百特
      2020-07-08
      授权回调地址填写前端的地址,授权后直接跳回前端,路由拦截并获取相关参数code,state ,携带相应参数去后端做相应的登录等处理
      2020-07-08
      回复
    • Sunny___
      Sunny___
      2020-10-29回复维百特
      你好,授权后直接跳回前端,这种跳转是不是得改成history模式才行啊?
      2020-10-29
      回复
  • 非洲小白脸
    非洲小白脸
    2020-05-10

    你好,这种引入JS文件什么浏览器都支持吗?我这边引入JS文件报错

    2020-05-10
    赞同
    回复 1
    • 维百特
      维百特
      2020-05-26
      具体报什么错误,浏览器类型,版本信息等
      2020-05-26
      回复
登录 后发表内容