pfz_smile
/
depositroy
2
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

添加企业微信扫码登录功能

lwx_dev
erdanergou 3 years ago
parent
210778f016
commit
e06c5d97ab
3 changed files with 259 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      src/main/resources/templates/pages/user/login.html
  2. 11
      src/test/java/com/dreamchaser/depository_manage/TestForOther.java
  3. 268
      target/classes/templates/pages/user/login.html

58
src/main/resources/templates/pages/user/login.html
View File

@ -114,17 +114,17 @@
width: 100%; width: 100%;
} }
#scanQrCodeLogin{ #scanQrCodeLogin {
float: right; float: right;
display: block; display: block;
padding: 9px 0!important; padding: 9px 0 !important;
line-height: 20px; line-height: 20px;
margin-right: 10px; margin-right: 10px;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
#login_panle{ #login_panle {
background-color: #fff; background-color: #fff;
padding: 40px 40px 40px 40px; padding: 40px 40px 40px 40px;
border-radius: 10px; border-radius: 10px;
@ -135,11 +135,12 @@
margin-top: -100px; margin-top: -100px;
} }
#nameAndPwdLogin{ #nameAndPwdLogin {
color: #666; color: #338cff;
font-size: larger;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
bottom: 10%; top: 0%;
left: 40%; left: 40%;
} }
</style> </style>
@ -187,25 +188,24 @@
</div> </div>
</div> </div>
<div id="login_panle" style="display:none;" > <div id="login_panle">
<span id="nameAndPwdLogin">账号登录</span>
<div id="login_mainPanle"> <div id="login_mainPanle">
</div> </div>
<div class="layui-form-item">
<span id="nameAndPwdLogin">账号密码登录</span>
</div>
</div> </div>
</div> </div>
<script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script> <script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script> <script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script> <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>
<script> <script>
layui.use(['layer', 'form'], function () { layui.use(['layer', 'form'], function () {
var form = layui.form, var form = layui.form,
layer = layui.layer; layer = layui.layer;
let wwLogin = null;
// 登录过期的时候，跳出ifram框架 // 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location; if (top.location != self.location) top.location = self.location;
@ -215,8 +215,11 @@
dotColor: '#7ec7fd', dotColor: '#7ec7fd',
lineColor: '#7ec7fd' lineColor: '#7ec7fd'
}); });
createLoginPanel()
}); });
// 进行登录操作 // 进行登录操作
form.on('submit(login)', function (data) { form.on('submit(login)', function (data) {
data = data.field; data = data.field;
@ -274,27 +277,36 @@
return false; return false;
}); });
$("#scanQrCodeLogin").click(function() { $("#scanQrCodeLogin").click(function () {
$("#login_panle").show(); $("#login_panle").show();
let url = "https://jy.hxgk.group/QyWxLogin"; // 初始化
createLoginPanel()
var wwLogin = new WwLogin({
"id": "login_mainPanle", // 登录页面显示二维码的容器id
"appid": "ww02f310301953277a",  // 企业微信的CorpID，在企业微信管理端查看
"agentid": "1000037", // 授权方的网页应用id，在具体的网页应用中查看
"redirect_uri": encodeURIComponent(url), // 重定向的地址，需要进行encode
"state": "loginState",
"href": "",  //自定义样式链接，只支持https协议的资源地址
"lang": "zh",
});
}); });
$("#nameAndPwdLogin").click(function () { $("#nameAndPwdLogin").click(function () {
$("#login_panle").hide(); $("#login_panle").hide();
// 卸载
wwLogin.unmount()
}) })
createLoginPanel = function () {
wwLogin = ww.createWWLoginPanel({
el: '#login_mainPanle',
params: {
login_type: 'CorpApp',
appid: 'ww02f310301953277a',
agentid: '1000037',
redirect_uri: 'https://jy.hxgk.group/QyWxLogin',
state: 'loginState',
redirect_type: 'Callback',
panel_size:'small'
}
});
}
// 卸载 // 卸载
}); });

11
src/test/java/com/dreamchaser/depository_manage/TestForOther.java
View File

@ -10,6 +10,7 @@ import com.alibaba.excel.write.metadata.fill.FillWrapper;
import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.JSONPObject; import com.alibaba.fastjson.JSONPObject;
import com.dreamchaser.depository_manage.config.QyWxConfig;
import com.dreamchaser.depository_manage.entity.*; import com.dreamchaser.depository_manage.entity.*;
import com.dreamchaser.depository_manage.mapper.DepositoryMapper; import com.dreamchaser.depository_manage.mapper.DepositoryMapper;
import com.dreamchaser.depository_manage.mapper.DepositoryRecordMapper; import com.dreamchaser.depository_manage.mapper.DepositoryRecordMapper;
@ -34,6 +35,8 @@ import org.springframework.web.jsf.FacesContextUtils;
import java.io.File; import java.io.File;
import java.io.IOException; import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.*; import java.util.*;
import java.util.concurrent.*; import java.util.concurrent.*;
@ -58,10 +61,10 @@ public class TestForOther {
@Test @Test
public void run() { public void run() {
ApprovalInfo_Details approvalInfo = new ApprovalInfo_Details(); ApprovalInfo_Details approvalInfo = new ApprovalInfo_Details();
ApprovalInfo_Details_Approver approver = new ApprovalInfo_Details_Approver(); // ApprovalInfo_Details_Approver approver = new ApprovalInfo_Details_Approver();
approver.setUserId("PangFuZhen"); // approver.setUserId("PangFuZhen");
approvalInfo.setApprover(approver); // approvalInfo.setApprover(approver);
depositoryRecordService.reviewByQyWxApprovalOut("1",approvalInfo,"8ffd487e6b203bffa21142d383b70f47","2","202303240030", false,2); // depositoryRecordService.reviewByQyWxApprovalOut("1",approvalInfo,"8ffd487e6b203bffa21142d383b70f47","2","202303240030", false,2);
// depositoryRecordService.reviewByQyWxApprovalIn("[1]",approvalInfo,"460f46eaefb46bb0c171029f62e2cea6","2","202303220009"); // depositoryRecordService.reviewByQyWxApprovalIn("[1]",approvalInfo,"460f46eaefb46bb0c171029f62e2cea6","2","202303220009");
// UserByPort userByPort = LinkInterfaceUtil.FindUserById(78, null); // UserByPort userByPort = LinkInterfaceUtil.FindUserById(78, null);
// List<String> s = excelService.writeExcelForPrint(2, 4,userByPort); // List<String> s = excelService.writeExcelForPrint(2, 4,userByPort);

268
target/classes/templates/pages/user/login.html
View File

@ -9,26 +9,140 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/static/css/public.css"> <link rel="stylesheet" href="/static/css/public.css">
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<style> <style>
html, body {width: 100%;height: 100%;overflow: hidden} html, body {
body {background: #1E9FFF;} width: 100%;
body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;} height: 100%;
.layui-container {width: 100%;height: 100%;overflow: hidden} overflow: hidden
.admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;} }
.logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
.logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;} body {
.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;} background: #1E9FFF;
.login-form .layui-form-item {position:relative;} }
.login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
.login-form .layui-form-item input {padding-left:36px;} body:after {
.captcha {width:60%;display:inline-block;} content: '';
.captcha-img {display:inline-block;width:34%;float:right;} background-repeat: no-repeat;
.captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;} background-size: cover;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.layui-container {
width: 100%;
height: 100%;
overflow: hidden
}
.admin-login-background {
width: 360px;
height: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -180px;
margin-top: -100px;
}
.logo-title {
text-align: center;
letter-spacing: 2px;
padding: 14px 0;
}
.logo-title h1 {
color: #1E9FFF;
font-size: 25px;
font-weight: bold;
}
.login-form {
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
padding: 14px 20px;
box-shadow: 0 0 8px #eeeeee;
}
.login-form .layui-form-item {
position: relative;
}
.login-form .layui-form-item label {
position: absolute;
left: 1px;
top: 1px;
width: 38px;
line-height: 36px;
text-align: center;
color: #d2d2d2;
}
.login-form .layui-form-item input {
padding-left: 36px;
}
.captcha {
width: 60%;
display: inline-block;
}
.captcha-img {
display: inline-block;
width: 34%;
float: right;
}
.captcha-img img {
height: 34px;
border: 1px solid #e6e6e6;
height: 36px;
width: 100%;
}
#scanQrCodeLogin {
float: right;
display: block;
padding: 9px 0 !important;
line-height: 20px;
margin-right: 10px;
color: #666;
cursor: pointer;
}
#login_panle {
background-color: #fff;
padding: 40px 40px 40px 40px;
border-radius: 10px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -180px;
margin-top: -100px;
}
#nameAndPwdLogin {
color: #338cff;
font-size: larger;
cursor: pointer;
position: absolute;
top: 0%;
left: 40%;
}
</style> </style>
</head> </head>
<body> <body>
@ -41,50 +155,67 @@
<h1>仓库管理系统登录</h1> <h1>仓库管理系统登录</h1>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-icon layui-icon-username" ></label> <label class="layui-icon layui-icon-username"></label>
<input type="text" name="username" lay-verify="required|account" placeholder="请输入工号或用户名" autocomplete="off" class="layui-input" > <input type="text" name="username" lay-verify="required|account" placeholder="请输入工号或用户名"
autocomplete="off" class="layui-input">
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-icon layui-icon-password" ></label> <label class="layui-icon layui-icon-password"></label>
<input type="password" name="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input"> <input type="password" name="password" lay-verify="required|password" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-icon layui-icon-vercode" ></label> <label class="layui-icon layui-icon-vercode"></label>
<input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha"> <input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码"
autocomplete="off" class="layui-input verification captcha">
<div class="captcha-img"> <div class="captcha-img">
<input type="text" id="captchaId" name="captchaId" style="display: none" th:value="${captchaid}"> <input type="text" id="captchaId" name="captchaId" style="display: none"
th:value="${captchaid}">
<img id="captchaPic" th:src="${picPath}" onclick="changerPic()"> <img id="captchaPic" th:src="${picPath}" onclick="changerPic()">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码"> <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
<span id="scanQrCodeLogin">扫码登录</span>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button> <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
lay-filter="login">登 入
</button>
</div> </div>
</form> </form>
</div>
</div>
<div id="login_panle">
<span id="nameAndPwdLogin">账号登录</span>
<div id="login_mainPanle">
</div> </div>
</div> </div>
</div> </div>
<script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script> <script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script> <script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
<script> <script>
layui.use(['layer', 'form'], function () {
layui.use(['layer','form'], function () {
var form = layui.form, var form = layui.form,
layer = layui.layer; layer = layui.layer;
let wwLogin = null;
// 登录过期的时候，跳出ifram框架 // 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location; if (top.location != self.location) top.location = self.location;
// 粒子线条背景 // 粒子线条背景
$(document).ready(function(){ $(document).ready(function () {
$('.layui-container').particleground({ $('.layui-container').particleground({
dotColor:'#7ec7fd', dotColor: '#7ec7fd',
lineColor:'#7ec7fd' lineColor: '#7ec7fd'
}); });
createLoginPanel()
}); });
@ -105,35 +236,35 @@
return false; return false;
} }
$.ajax({ $.ajax({
url:"/login", url: "/login",
type:'post', type: 'post',
dataType:'json', dataType: 'json',
contentType: "application/json;charset=utf-8", contentType: "application/json;charset=utf-8",
data:JSON.stringify(data), data: JSON.stringify(data),
beforeSend:function () { beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] }); this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
}, },
success:function(data){ success: function (data) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
if(data.status !== 200){ if (data.status !== 200) {
layer.msg(data.statusInfo.message);//失败的表情 layer.msg(data.statusInfo.message);//失败的表情
$.ajax({ $.ajax({
url:"/getCaptchaid", url: "/getCaptchaid",
type:"get", type: "get",
dataType:'json', dataType: 'json',
contentType: "application/json;charset=utf-8", contentType: "application/json;charset=utf-8",
success:function (data) { success: function (data) {
$("#captcha").val(""); $("#captcha").val("");
$("#captchaPic").attr("src",data.picPath); $("#captchaPic").attr("src", data.picPath);
$("#captchaId").val(data.captchaid); $("#captchaId").val(data.captchaid);
} }
}); });
return; return;
}else{ } else {
layer.msg("登录成功", { layer.msg("登录成功", {
icon: 6,//成功的表情 icon: 6,//成功的表情
time: 1000 //1秒关闭（如果不配置，默认是3秒） time: 1000 //1秒关闭（如果不配置，默认是3秒）
}, function(){ }, function () {
window.location = '/index'; window.location = '/index';
}); });
@ -145,20 +276,55 @@
}); });
return false; return false;
}); });
$("#scanQrCodeLogin").click(function () {
$("#login_panle").show();
// 初始化
createLoginPanel()
});
$("#nameAndPwdLogin").click(function () {
$("#login_panle").hide();
// 卸载
wwLogin.unmount()
})
createLoginPanel = function () {
wwLogin = ww.createWWLoginPanel({
el: '#login_mainPanle',
params: {
login_type: 'CorpApp',
appid: 'ww02f310301953277a',
agentid: '1000037',
redirect_uri: 'https://jy.hxgk.group/QyWxLogin',
state: 'loginState',
redirect_type: 'Callback',
panel_size:'small'
}
});
}
// 卸载
}); });
function changerPic() { function changerPic() {
$.ajax({ $.ajax({
url:"/getCaptchaid", url: "/getCaptchaid",
type:"get", type: "get",
dataType:'json', dataType: 'json',
contentType: "application/json;charset=utf-8", contentType: "application/json;charset=utf-8",
success:function (data) { success: function (data) {
$("#captchaPic").attr("src",data.picPath); $("#captchaPic").attr("src", data.picPath);
$("#captchaId").val(data.captchaid); $("#captchaId").val(data.captchaid);
} }
}); });
} }
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save