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

laoLiueizo 发布于2019-08-26 10:57 / 3243人阅读

摘要：通过前端怎样在中进行微信网页授权登录背景公司目前上一个新项目，需要使用微信授权登录，和后端商量了一下，决定使用微信登录的第一种方法进行授权登录，就是后台给一个接口，由前端直接执行，跳转到一个新页面，新页面中生成一个二维码来进行授权登录。

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

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

步骤实现：

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

接下来在组件中引入：

    import wxlogin from "vue-wxlogin";

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

最后，有不明白的可加我qq: 1350488130

云服务器 GPU云服务器微信网页授权 php微信登录授权 php 网页授权登录 php做微信授权登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106888.html

vue微信网页授权最终解决方案

摘要：微信网页授权，基于适配方案，开发的微信授权方案。项目地址又又又一次来写微信网页授权，一年前写过的微信授权解决方案。 vue微信网页授权，基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios，开发的微信授权方案。项目地址：vue-wechat-auth 又又又一次来写微信网页授权，一年前写过的 [vue 微信授权解决方案]。参考了[v...

wawor4827 2019-08-23 18:07 评论0 收藏0
巧用云函数打造微信网页授权公用服务

摘要：实现步骤应用创建在云函数的后台直接创建应用，使用模板。我们仅需要一个云函数就可以实现微信授权的本地调试以及几个项目几个公众号共用一个授权服务，免去独立域名独立服务器的烦恼。背景公司为客户开发微信公众号相关服务时，有时未能准备好公众号，所以需要使用公司的公众号，但是大家都知道微信网页授权域名最多只支持两个，这就...

番茄西红柿 2021-11-22 14:56 评论0 收藏2637
ajax 实现微信网页授权登录

摘要：项目背景因为项目采用前后端完全分离方案，所以，无法使用常规的微信授权登录作法，需要采用实现微信授权登录。其实实现这个也麻烦，在实现之前，我们需要了解一下微信授权的整个流程。用户微信登录授权以后回调过来的会携带两个参数，第一个是另一个就是。项目背景因为项目采用前后端完全分离方案，所以，无法使用常规的微信授权登录作法，需要采用 ajax 实现微信授权登录。需求分析因为本人是一个ph...

binaryTree 2019-06-28 18:29 评论0 收藏0
小程序登录、微信网页授权（Java版）

摘要：小程序登录微信网页授权版首先呢，登录授权授权登录，是一样的意思，不用纠结。写小程序授权登录的代码前，需要了解清楚与的区别，这里再简单介绍一下腾讯有个微信开放平台，只有企业才能注册账号，可理解为微信体系里，最顶级的账号。小程序登录、微信网页授权（Java版）首先呢，登录、授权、授权登录，是一样的意思，不用纠结。写小程序授权登录的代码前，需要了解清楚openid与unionid的区别...

joywek 2019-08-16 14:02 评论0 收藏0
微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0