vue实现pc端扫码登录

vue pc端微信扫码登录

文章目录

vue pc端微信扫码登录
- 效果图
- 方式一：npm
- - 安装并引入插件
  - 参数说明
  - 使用
  - 自定义样式
- 方式二：通过js
- - 引用js文件
  - vue
  - 使用
  - 注意

效果图

方式一：npm

安装并引入插件

wxlogin

    // 安装npm install vue-wxlogin -S// 局部引入import wxlogin from 'vue-wxlogin';// 注册组件components: {wxlogin}

参数说明

使用

<wxloginclass="login"appid="wxappid":scope="'snsapi_login'"  :theme="'black'"  :redirect_uri='encodeURIComponent(`https://www.test.com/project/#${fullPath}`)':href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogIHdpZHRoOiAyMjVweDsKICBoZWlnaHQ6IDIyNXB4Owp9'":state="`${Math.random()}`">
</wxlogin>

自定义样式

把自定义的样式，转换为base64格式
使用text/css模式

// 根据需求自定义二维码样式
.impowerBox .title {display: none;
}
.impowerBox .status.status_browser {display: none;
}
.impowerBox .qrcode {border: none;width: 225px;height: 225px;
}
.impowerBox .status{display: none
}

方式二：通过js

引用js文件

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

vue

<div id="container"><div id="wxLogin"></div>
</div>

使用

<script>export default {data() {return {QRCodeStyle: `data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsNCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSANCg==`}},mounted() {// 微信登录getWxLogin();},methods: {getWxLogin() {let url = 'https://www.xxxxx/#/shop';var obj = new WxLogin({id: "wxLogin",appid: "wxappid",scope: "snsapi_login",// 扫码成功后 跳转的地址redirect_uri: encodeURIComponent(url), // 授权成功后回调的urlstate: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验style: 'black',href: this.QRCodeStyle});}}}
</script>

注意

redirect_uri: 回调地址，进行编码【encodeURIComponent】
redirect_uri: 确定登录后会重定向url上携带code、state参数
首先，在开放平台申请账号，认证，创建网站应用

https://www.test.com/project/#/login?code=xxx&state=xxx

vue实现pc端扫码登录相关推荐

element-ui框架下通过SockJS、stompjs实现PC端扫码登录跳转页面（二）
上一篇介绍了PC扫码登录通过微信接口获取不限制的小程序码,此篇介绍剩下的内容 element-ui框架下通过SockJS.stompjs实现PC端扫码登录跳转页面(一) 2.已扫描待确认阶段流程图中 ...
微信开放平台PC端扫码登录
最近公司给我安排一个微信登录的功能,需求是这样的: 1.登录授权点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录: 若当前账号未绑定微信账号,扫描后提示& ...
PHP语言：微信开放平台PC端扫码登录
需求: 微信扫码时每次需要弹窗确认效果. 微信开放平台 :创建网站应用,绑定公众号,用于打通公众号用户数据. 注意域名填写规范,不带协议.eg:www.xxx-test.com 页面嵌套扫码登录二维码 ...
企业微信如何实现PC端扫码登录第三方网站
1 登录企业微信 https://work.weixin.qq.com/ 创建应用 2 在应用里需要配置工作台应用主页 (即扫码后的跳转地址) 和企业微信授权里的授权回调域 (必须跟跳转地址是相同 ...
微信授权登录：PC端扫码登录[unionid]（二）
专栏简介
Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录.相比传统的账号密码方便很多. 企业微信扫码登录流程文档:(链接) 对于前端来说,重要的是如何构造 ...
微信支付—微信H5支付「PC端扫码支付」
前言微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付微信支付-PC端扫码支付「本文」本篇是微信支付系列的第三篇,PC端扫码支付. 开发环境:Java + SpringBoot ...
支付宝支付-支付宝PC端扫码支付
前言支付宝支付-沙箱环境使用支付宝支付-支付宝PC端扫码支付「本文」支付宝支付-手机浏览器H5支付「待写」 PC端扫码支付,其实就是就是电脑网站支付,本文基于支付宝沙箱环境,不了解的可以看一下 ...
Java后端对接微信支付(微信小程序、APP、PC端扫码)非常全，包含查单、退款
首先我们要明确目标,我们点击微信支付官网 ,我们主要聚焦于这三种支付方式,其中JSPAI与APP主要与uniapp开发微信小程序与APP对接,而NATIVE主要与网页端扫码支付对接 1.三种支付统一 ...

vue实现pc端扫码登录

vue pc端微信扫码登录

文章目录

效果图

方式一：npm

安装并引入插件

参数说明

使用

自定义样式

方式二：通过js

引用js文件

vue

使用

注意

vue实现pc端扫码登录相关推荐

最新文章

热门文章