企业微信扫码登录网页功能实现代码
企业微信扫码登录网页功能，代码如下所示：
//jq写法完善版
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>信息平台</title>
<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#code{
/*wrp_code_rl_btn*/
width: 100px;
height: 100px;
}
iframe img{
width: 100px;
height: 100px;
}
</style>
</head>
<body >
<input type="text" id="state"/>
<div id="code" onclick="getSessionWX8()"></div>
<script>
function getSessionWX(){
let url = 'https://xxxxxxxxxxxxx.com/getState';
let vm=this;
$.ajax({
url: url,
method: 'get',
dataType: 'json',
success: function(data){
$('#state').val(data.payload.results.state);
getSession();
},
error:function(){
// alert("服务器或网络问题");
}
});
};
getSessionWX();
function getSession(){
var clientId= $('#state').val();
console.log(clientId);
window.WwLogin({
"id" : "code", //显示二维码的容器id
"appid" : "wx86dd16937ec6403f",
"agentid" : "1000014", //企业微信的cropID，在 企业微信管理端->我的企业 中查看
"redirect_uri" :"https://xxxxxxxxx.com", //重定向地址，需要进行UrlEncode
"state" : clientId, //用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数
"href" : "", //自定义样式链接，企业可根据实际需求覆盖默认样式。详见文档底部FAQ
});
}
setInterval(function(){
var clientId= $('#state').val();
let url = 'https://xxxxx.com/getSessionId?state=' + clientId;
$.ajax({
url: url,
method: 'get',
dataType: 'json',
success: function(data){
console.log(data);
// window.location.href='/index.html';
},
error:function(){
//alert("服务器或网络问题");
}
});
},3000);
</script>
</body>
</html>
//通用大众，不完整版，存在用户同时扫码，用户串登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>1111</title>
<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="code" ></div>
<script>
window.WwLogin({
"id" : "code", //显示二维码的容器id
"appid" : "xxxxxx",
"agentid" : "xxxxxx", //企业微信的cropID，在 企业微信管理端->我的企业 中查看
"redirect_uri" :"xxxxxxxxxxxx", //重定向地址，需要进行UrlEncode
"state" : "3828293919281", //用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数
"href" : "", //自定义样式链接，企业可根据实际需求覆盖默认样式。详见文档底部FAQ
});
</script>
</body>
</html>
B.vue完整版
<div class="itemLogin WXLogin" v-show="isWXCode == true">
<div class="pcOrWX">
<span class="webTitle webTitleWX">企业微信扫码登录</span>
<span class="iconfont icon-diannao pcCode" @click="pcWXCode(false)" title="手动输入登录"></span>
</div>
<div id="code" @click="getSessionWX1(1)">
<iframe id="iframe1" :src="WXCodeUrl" frameborder="0" scrolling="no" width="320px" height="313px"></iframe>
</div>
</div>
getSessionWX(){
let vm=this;
let url = 'https://xxxxx.com/getState';
$.get(url,function(data){
var data = JSON.parse(data);
//https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=wx86dd16937ec6403f&agentid=1000014&redirect_uri=https://xxxxxx.com/loginPCByWx&state=5245fc29-ff12-459d-b880-9f16047ba8cd&login_type=jssdk
vm.stateWX = data.payload.results.state;
var cssUrl = "https://xxxxx.com/static/css/wxerweima.css";
vm.WXCodeUrl = "https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=wx86dd16937ec6403f&agentid=1000014&redirect_uri=https://xxxxxx.com/loginPCByWx&state=" + vm.stateWX + "&href=" + cssUrl + " rel="external nofollow" &login_type=jssdk";
},"text");
},
getSessionWXLogin(){
let vm=this;
let url = 'https://xxxxxx.com/getSessionId?state=' + vm.stateWX;
$.get(url,function(data){},"text");
},
pcWXCode(val){
let vm = this;
this.isWXCode = val;
if(vm.isWXCode == true){
setInterval(function(){
vm.getSessionWXLogin();//轮询后台数据登录
},3000);
}
},
待完善码过期后传入的参数没有变化问题，后续优化...
到此这篇关于企业微信扫码登录网页功能的文章就介绍到这了,更多相关企业微信扫码登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
微信开发之企业付款到银行卡接口开发的示例代码
微信支付已上线企业付款至银行卡功能.商户可以将商户号余额付款至指定的收款银行账户.通过指定收款银行账户户名.卡号,以及收款银行信息即可实现付款.功能目前为灰度开放,已灰度新资金流直连普通商户及普通受理模式子商户,其他商户类型将在后续开放. 一.微信商户号须开通此功能: 二.应用环境TP5+Mysql+Centos 三.编写代码 3.1.Model层,Wechat.php <?php namespace app\home\model; use think\Cache; class Wechat e
-
企业微信扫码登录网页功能实现代码
企业微信扫码登录网页功能,代码如下所示: //jq写法完善版 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>信息平台</title> <script src="http://res
-
Spring Boot实现微信扫码登录功能流程分析
目录 1. 授权流程说明 第一步:请求CODE 第二步:通过code获取access_token 第三步:通过access_token调用接口 2. 授权流程代码 3. 用户登录和登出 4. Spring AOP校验用户有没有登录 5. 拦截登录校验不通过抛出的异常 微信开放平台:微信扫码登录功能 官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1. 授权
-
java实现微信扫码登录第三方网站功能（原理和代码）
目录 一.查看微信扫码登录官方文档 二.实现微信第三方登录流程: 三.代码实现: 为避免繁琐的注册登陆,很多平台和网站都会实现三方登陆的功能,增强用户的粘性.这篇文章主要介绍了java实现微信扫码登录第三方网站功能(原理和代码),避免做微信登录开发的朋友们少走弯路. 一.查看微信扫码登录官方文档 官方文档:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&
-
基于 Swoole 的微信扫码登录功能实现代码
随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务
-
自定义PC微信扫码登录样式写法
PC微信扫码登录 近期做一个PC端微信扫码登录的需求,微信扫码有两种方式,一种是新开一个二维码页面,另一种是内嵌入产品网页.本次以内嵌二维码为例,具体怎样在页面中显示一个登陆二维码,文档说的很清楚,就不赘述了,文档地址:https://open.weixin.qq.com/cg... 解决自定义微信二维码样式问题 当一切准备妥当之后,网页上的二维码初始默认是这个样子. 特别大不说(默认二维码大小280x280),还有微信登录的title,下方也有扫码登录的提示. 幸运的是,微信留了一个api给我
-
vue3 微信扫码登录及获取个人信息实现的三种方法
目录 一.流程: 二.前置条件: 三.具体登录实现 实现方式一: 方式二: 方式三:结合后端获取到二维码 四.登录微信后获取微信中用户头像和昵称 一.流程: 微信提供的扫码方式有两种,分别是: 跳转二维码扫描页面 内嵌式二维码 根据文档我们可以知道关于扫码授权的模式整体流程为: 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据 code 参数: 2. 通过 code 参数加上 AppID 和AppSecret等,通过 API
-
浅析微信扫码登录原理(小结)
微信扫码登录原理解析 扫码登录是现在流行的登录方式,使用这种方式及其方便,而且安全 扫码登录流程 原理 获取唯一的uuid, 以及包含uid信息的二维码 // 获取uuid getUUID: function() { var e = t.defer(); return window.QRLogin = {}, $.ajax({ url: i.API_jsLogin, dataType: "script" }).done(function() { 200 == window.QRLogi
-
Vue+abp微信扫码登录的实现代码示例
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册微信开放平台账号# 在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用.审核通过后获取到AppID和AppSecret以及登记的网站url.只有此url下的地址微信扫码后才能回调. 具体申请条件见官方文档. 生成登录二维码# 在vue登录页面嵌入登录二维码,根据官方文
-
Java实现微信扫码登入的实例代码
微信扫码登入 首先去通过微信开放平台做好开发者资质认证,创建网站应用然后等待审核 开发者资质认证 网站应用 审核通过的话就是这个样子 还有最底下的授权回调地址 (www.xxxxx.com) 填写域名即可 pom <!-- WeChatQrCode --> <dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId&
-
vue 微信扫码登录(自定义样式)
使用插件 https://www.npmjs.com/package/vue-wxlogin // 安装 npm install vue-wxlogin --save-dev // 组件中引入 import wxlogin from 'vue-wxlogin' ... components: { wxlogin } ... html中使用 <wxlogin :appid="$store.getters.wechat_app_id" :scope="'snsapi_log