PC网页端第三方微信登录

1、window.open 弹出框

 loginClick(tab, event) {if (this.activeName == "third") {var top = (window.screen.availHeight - 450) / 2; //获得窗口的垂直位置;var left = (window.screen.availWidth - 400) / 2; //获得窗口的水平位置;window.open(`yourUrl/qrCode.html`,"_blank",`top=${top},left=${left},width=400,height=450,menubar=no,toolbar=no,status=no,scrollbars=yes`);}},

2、qrcode.html,获取二维码

<html><head></head><body><div style="height:400px"><iframeframeborder="no"border="0"marginwidth="0"marginheight="0"scrolling="no"id="qrcode"title="Inline Frame Example"width="400"height="400"src=""></iframe></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return false;}var userId = getQueryVariable("userId");console.log('userId: ', userId);var params = {source: "wechat_open",}if(userId){params.userId = userId}//生成二维码$.ajax({type: "get",url:"yourUrlblade-auth/oauth/render",data:params,success:function(res){$("#qrcode").attr("src",res.data)}})</script></body>
</html>

3、微信扫码回调页面

<html><head> </head><body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return false;}var code = getQueryVariable("code");var state = getQueryVariable("state");$.ajax({type: "get",url: "yourUrl/blade-auth/oauth/check/wechat_open",data: {code: code,state: state,},success: function (res) {var bindState = 1;var message = "绑定成功";if (res.data.binding == "0") {bindState = 0;tip = res.msg;} window.opener.postMessage({status: bindState,message:message,code:code,state:state,oauthId:res.data.oauthId}, '*');window.close();},});</script></body>
</html>

4、回调处理页面，根据返回结果，处理各自业务逻辑

created() {this.addEventListenerMessage();},
destroyed() {this.removeEventListener();},methods: {removeEventListener(){window.removeEventListener("message",this.eventHandle);},eventHandle(e){let that = this;let data = e.data;console.log('data.status: ', data.status);if (data.status == 1) {//获取用户信息that.$store.dispatch("LoginBySocial", {oauthId:data.oauthId}).then(() => {//获取用户信息getUserInfo().then((res) => {let user = res.data.data;window.localStorage.setItem("roleId", user.roleId);window.localStorage.setItem("deptName", user.deptName);window.localStorage.setItem("tenantId", user.tenantId);that.$router.push({ path: "/wel/index" });});});} else if (data.status == 0) {that.$router.push({ path: "/accountBind", query: {oauthId:data.oauthId} });}}}

PC网页端第三方微信登录相关推荐

web端第三方微信登录
最近接触了下微信登录,抽出空写下这次做微信登录的整个过程吧(包括自己遇到的坑),当做笔记记录下我所做的是第三方网站的微信登录,(也就是呢,用户通过扫描我们系统登录页面的微信二维码授权后登录到我们系统 ...
微信开放平台开发第三方授权登陆（二）：PC网页端
微信开放平台开发系列文章: 微信开放平台开发第三方授权登陆(一):开发前期准备微信开放平台开发第三方授权登陆(二):PC网页端微信开放平台开发第三方授权登陆(三):Android客户端微信开放平 ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
uni-app关于小程序及app端第三方微信登陆问题（app端如何取得code值）
加强安全保护,防止部分应用邀请新用户有奖励而产生的刷号行为,和后端配合,不从前端传openid,取得相应的code值给后端,后端再去拿到openid获取用户信息. 1.第三方微信登陆,主要是在获取co ...
iOS第三方微信登录时不走回调方法
ios 开发中第三方微信登录时,使用真机测试,授权登录按钮点击后不走微信demo的 -(void)onResp:(BaseResp*)resp 回调方法不走,无法判断是否成功查看网上一些解决方法,自 ...
Android App实现第三方微信登录
Android App实现第三方微信登录 Android App实现第三方微信登录 1.下载微信官方最新的sdk,集成到app中.如下图: 2.注册到微信可以在app的某个Activity的onCr ...
第三方微信登录 | 静默授权与网页授权的实现
一:介绍第三方登录有QQ.微信.微博.支付宝等等,如果现在自己的项目中实现这些登录,即可以使用友盟的sdk,也可以一个一个接入,各有各的有点,这里不做赘述. 今天和大家分享的是,在项目中实现微信登录 ...
微信PC电脑桌面端多账号登录微信多开方法
多开的微信登录图标首先:鼠标放在微信图标上"右键"后点击"属性"复制文件目标路径: 下面!创建6个微信客户端举例: 第二步:打开代码编辑软件"not ...
网页端企业微信扫码登录及其cookie问题
这个问题折磨了我6个小时,太痛苦了,特此记录! 1:企业微信扫码登录 1:环境前端 vue 后端spring-gateWay+springboot 2:实现过程 1:前端生成二维码,回调地址直接写 ...

PC网页端第三方微信登录

1、window.open 弹出框

2、qrcode.html,获取二维码

3、微信扫码回调页面

4、回调处理页面，根据返回结果，处理各自业务逻辑

PC网页端第三方微信登录相关推荐

最新文章

热门文章