通过前端怎样在vue中进行微信网页授权登录

通过前端怎样在vue中进行微信网页授权登录

背景：

公司目前上一个新项目，需要使用微信授权登录，和后端商量了一下，决定使用微信登录的第一种方法进行授权登录，
就是后台给一个接口， 
由前端直接执行，跳转到一个新页面，新页面中生成一个二维码来进行授权登录。虽然，这种方式很多公司都在用，
但产品说这种方式的体验 
不够好，所以使用了下面的授权方法，也就是第二种的微信授权登录方案，能在当前页生成二维码登录：

步骤实现：

• 在vue中，能够用轮子的就用轮子，于是在npm中找到了一个微信登录的包vue-wxlogin

• 接下来在组件中引入：

      import wxlogin from 'vue-wxlogin';

• 组件中使用，可以声明一个对象来保存生成二维码的信息，为了数据的安全，我们不能直接在前端页面写死，生成二维码的信息，可以让后端通过接口来获取生成二维码的信息，接着就是以组件属性的参数传给wxlogin

    <wxlogin style="margin-left: 25px" :href="wx.href" :state="wx.state" :appid="wx.appid" :scope="wx.scope"
                     :redirect_uri="wx.redirect_uri"></wxlogin>

• 属性参数详解

   属性名   类型           描述
   appid    String        应用唯一标识，在微信开放平台提交应用审核通过后获得
   scope    String        应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
   redirect_uri    String        重定向地址，需要进行UrlEncode
   state    String        用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
   theme    String        提供"black"、"white"可选，默认为黑色文字描述。
   href    String        自定义样式链接，第三方可根据实际需求覆盖默认样式。
  
  

• 需要注意的属性，

   1.redirect_uri（回调地址）必须要进行**UrlEncode转码**，这是一个巨坑啊，本人在这个问题卡了一个下午
   2.href （自定义二维码样式的链接），必须是https的链接而且要带有证书才可以，如果不用链接的方式可以使用data_url的方法来进行样式的传递
   例如：`data:text/css;base64,`+你自己的样式内容把它转为base64然后拼接在一起就可以了，更具体的可阅读[自定义微信登录扫码样式解决办法][2]

• 测试时需要注意: 前端项目需要放在后台授权返回地址同一个域下

最后，有不明白的可加我wx: czr13692478981