评论

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等 进行请求 服务端相应接口。完成相应的登录逻辑


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


最后一次编辑于  03-19  
点赞 3
收藏
评论
登录 后发表内容