Vue——构造内嵌登录二维码

企业微信开发文档地址：https://work.weixin.qq.com/api/doc/90000/90135/91019
为了满足网站更定制化的需求，我们还提供了第二种获取code的方式，支持网站将企业微信登录二维码内嵌到自己页面中，用户使用企业微信扫码授权后通过JS将code返回给网站。
JS企业微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到企业微信域下登录后再返回，提升企业微信登录的流畅性与成功率。网站内嵌二维码企业微信登录JS实现办法：

http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js

var wwLogin = new WwLogin({"id": "wx_reg",  "appid": "","agentid": "","redirect_uri": "","state": "","href": "","lang": "zh",
});

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none  !important}
.impowerBox .status {text-align: center;}

Demo实例：
第一步： 在vue项目中 public/index.html引入http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js

<script type='text/javascript' src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>

**第二步：**从后台请求回来appid、agentid、redirect_uri数据

appid：企业微信的CorpID，在企业微信管理端查看
agentid：授权方的网页应用ID，在具体的网页应用中查看
redirect_uri：重定向地址，需要进行UrlEncode

//渲染二维码,假如你的dom元素上加了展示与隐藏条件，切记不要用v-if，因为会检索不到这个qr_code 标签，需要用v-show
<div id="qr_code"></div>//假如从后台请求回来的数据是：
let res = {appid:"a565"agentid:"123456"redirect_uri:"http://api.3dept.com"
}new WwLogin({"id": "qr_code",  "appid": res.appid,"agentid": res.agentid,"redirect_uri": encodeURIComponent(res.redirect_uri)
});

实现的二维码效果不是你设计图想要的，很贴心企业微信二维码还提供了修改样式的地方

例如二维码想要修改成以下样式：

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none  !important}
.impowerBox .status {text-align: center;}

需要将以上样式用base64转一下
Base64在线编码解码地址：https://base64.us/

将样式编码后的结果写入 href中：

new WwLogin({"id": "qr_code",  "appid": res.appid,"agentid": res.agentid,"redirect_uri": encodeURIComponent(res.redirect_uri),"href":"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI0MHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLndycF9jb2RlX2lmcmFtZXttYXJnaW4tdG9wOiAwcHg7fQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIxMHB4O30KLmltcG93ZXJCb3ggLmljb24zOF9tc2cuc3VjYyB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLmljb24zOF9tc2cud2FybiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO309PQ"
});

Vue——构造内嵌登录二维码相关推荐

Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
vue将qrcodejs生成的二维码下载到本地
vue将qrcodejs生成的二维码下载到本地 dom结构如下 <div class="qr-code "id="qr-code"></div ...
登录二维码过期与切换账号登录
登录二维码过期与切换账号登录文章目录切换账号登录风险操作登录二维码过期如何处理专栏汇总链接: 教程.问题与解决方案汇总目录这两个问题最近一直有订阅的朋友在问我,本来不想弄的,因为会导致账 ...
Windows逆向微信登录二维码的字符串
获取微信的登录二维码,网上已有很多教程了,这里稍作总结,大概就以下两种方式: 1.直接获取二维码的图片数据,下载到本地: 2.获取二维码所表示的字符串,利用其它库(比如:libqrencode)来生成 ...
【原创】去掉微信登录二维码中的微信登录几个字的解决方法
去掉微信登录二维码中的微信登录几个字的解决方法通过分析,原来微信自己有参数可以去掉, 解决方法,如下: 链接中加上 &popup=0&href=https%3A%2F%2Fsta.g ...
vue app扫PC端二维码登录
通过接口获取二维码唯一标识,例如:qrcodeId 通过 qrcodejs2插件生成二维码(二维码内容就是 qrcodeId,具体根据APP 需要) 循环调用接口,查看扫码状态(app是否扫码确认登 ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
用herl工具解决微信内链接或二维码可直接用外部浏览器打开
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可. 下面给大家推荐 herl工具(http://www.nicejum ...

Vue——构造内嵌登录二维码

Vue——构造内嵌登录二维码相关推荐

最新文章

热门文章