提交 ee56f737 编写于 作者: laizhilong's avatar laizhilong

普通注册,第三方登录及绑定注册

上级 97bc1de9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../favicon.ico">
<title>ibzuaa</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(function () {
var code = getUrlParam('code');
var state = getUrlParam('state');
// alert("code:" + code + "\n state:" + state);
if (code && state) {
// 通过授权code请求后台
var opt = {"code": code, "state": state};
$.ajax({
type: "post",
url: "../uaa/queryDingtalkUserByCode",
dataType: "json",
data: JSON.stringify(opt),
contentType: 'application/json',
success: function (data) {
// console.log(JSON.stringify(data));
if (data) {
if (data.token) {
localStorage.setItem('token', data.token);
}
if (data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
if (data.ibzuser) {
var ibzuser = JSON.stringify(data.ibzuser);
// 设置cookie,保存账号密码7天
setCookie(ibzuser.loginname, ibzuser.password, 7);
// 跳转首页
window.location.href = "../index";
} else {
// 跳转钉钉绑定
window.location.href = "../#/dingdingLoginRedirect?code=" + code + "&state=" + state;
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
// 回到登录页
window.location.href = "../";
}
});
} else {
alert("钉钉授权登录失败!");
// 回到登录页
window.location.href = "../";
}
});
// 获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
// 设置cookie
function setCookie(loginname, password, exdays) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
</script>
</head>
<body>
</body>
</html>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M511.999 1024a512 512 0 1 0-512-512 512 512 0 0 0 512 512z" fill="#23A0F0" /><path d="M735.765 604.422c-3.55-49.47-36.192-90.932-55.09-112.47a70.383 70.383 0 0 0-15.577-67.003v-1.718c0-97.235-68.028-167.254-153.35-167.55-85.333 0.342-153.35 70.315-153.35 167.55v1.718a70.383 70.383 0 0 0-15.576 67.003c-18.898 21.413-51.54 62.874-55.09 112.47a75.39 75.39 0 0 0 7.554 40.425c7.555 10.308 28.513-2.06 43.406-34.93a210.33 210.33 0 0 0 35.499 67.914c-36.307 8.477-46.729 44.897-34.475 64.853 8.59 14.086 28.445 25.657 62.419 25.657 60.473 0 87.267-16.611 99.18-28.057a16.259 16.259 0 0 1 20.844 0c11.913 11.57 38.684 28.057 99.18 28.057 34.02 0 53.715-11.57 62.419-25.657 12.253-19.922 1.831-56.342-34.475-64.853a211.627 211.627 0 0 0 35.499-67.914c14.893 32.87 35.85 45.124 43.406 34.93a76.493 76.493 0 0 0 7.577-40.425z" fill="#FFFFFF" /></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592560654178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17475" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M506.054591 880.192733c0 43.505863-63.615876 78.773088-142.089136 78.773088s-142.089136-35.268248-142.089135-78.773088 63.615876-78.773088 142.089135-78.773088 142.089136 35.268248 142.089136 78.773088z m153.385413-78.773088c-78.474282 0-142.089136 35.268248-142.089136 78.773088s63.615876 78.773088 142.089136 78.773088 142.089136-35.268248 142.089135-78.773088-63.615876-78.773088-142.089135-78.773088z" fill="#FFC817" p-id="17476"></path><path d="M825.904293 502.377852s-10.752902-11.024078-22.294772-21.221324V355.234607c0-161.052023-130.558521-291.610544-291.610544-291.610544S220.389456 194.182584 220.389456 355.234607v125.921921c-11.540847 10.197246-22.294772 21.221324-22.294772 21.221324-19.024286 28.53694-64.207347 102.256942-64.207348 171.815157s19.024286 81.449034 26.158777 82.043575c6.616698 0.551562 31.131021-6.063089 60.262502-50.654681 39.425941 131.09985 154.970514 226.037083 291.393603 226.037083 136.639007 0 252.337075-95.236038 291.583938-226.658229 29.309536 45.151339 54.020334 51.829436 60.667731 51.275827 7.134491-0.594541 26.158776-12.485359 26.158777-82.043575S844.928578 530.914792 825.904293 502.377852z" fill="#37474F" p-id="17477"></path><path d="M297.454646 552.317241a375.358947 375.358947 0 0 0-3.473101 51.128471c0 159.245887 99.199303 288.340057 221.567281 288.340057s221.567281-129.09417 221.567281-288.340057a375.522676 375.522676 0 0 0-3.473101-51.128471H297.454646zM435.307294 197.390649c-32.506345 0-58.857503 35.733852-58.857503 79.81379 0 44.079938 26.351158 79.81379 58.857503 79.813791s58.857503-35.733852 58.857502-79.813791c0-44.079938-26.352181-79.81379-58.857502-79.81379z m9.809413 112.660896c-11.82021 0-21.402449-14.639418-21.402449-32.698726s9.582239-32.698726 21.402449-32.698726c11.82021 0 21.402449 14.639418 21.402449 32.698726s-9.582239 32.698726-21.402449 32.698726zM590.476329 197.390649c-32.506345 0-58.857503 35.733852-58.857503 79.81379 0 44.079938 26.351158 79.81379 58.857503 79.813791s58.857503-35.733852 58.857503-79.813791c-0.001023-44.079938-26.352181-79.81379-58.857503-79.81379z m9.93221 82.787518l-0.030699 0.005117c0.001023 0.021489 0.023536 0.033769 0.023536 0.055258 0 0.896416-0.726547 1.622964-1.622964 1.622964-0.738827 0-1.25969-0.544399-1.455141-1.218758l-0.062422 0.00921v0.149403c-3.748371-9.331529-10.383488-15.635095-18.079774-15.635096-7.693216 0-14.325263 6.296403-18.074657 15.620769l-0.059352-0.036839-0.055258-0.012279c-0.264013 0.557702-0.722454 1.00284-1.380441 1.00284a1.647523 1.647523 0 0 1-1.648546-1.648547c0-0.016373 0.017396-0.025583 0.017396-0.040932l-0.035815-0.008186c-0.058328-0.895393-0.166799-1.768273-0.166799-2.688226 0-18.059308 9.582239-32.698726 21.402449-32.698726s21.402449 14.639418 21.402449 32.698726c0 0.966001-0.110517 1.883907-0.173962 2.823302z" fill="#FFFFFF" p-id="17478"></path><path d="M281.18817 536.26566c-5.350868 26.753317-16.646122 146.845463-11.296277 173.59878s27.855418 22.285562 60.046585 22.591531c31.211862 0.296759 67.774593 8.918114 68.369133-30.320563 0.594541-39.237653 0.594541-116.5249 9.512655-145.06184 8.91709-28.53694-126.632095-20.807908-126.632096-20.807908z" fill="#FF3B30" p-id="17479"></path><path d="M274.071076 593.588203l125.538181 40.585347c1.089821-30.820959 3.295046-61.368696 8.211009-77.101005 8.918114-28.53694-126.632095-20.807908-126.632096-20.807908-1.948375 9.739828-4.683672 31.851429-7.117094 57.323566z" fill="#DD2C00" p-id="17480"></path><path d="M512.594541 467.895503c97.846492 0 177.166025-35.671431 177.166025-57.668421 0-16.646122-79.319533-33.887808-177.166025-33.887808-97.845469 0-177.166025 15.458063-177.166026 33.887808 0 20.808932 79.319533 57.668421 177.166026 57.668421z" fill="#FFC817" p-id="17481"></path><path d="M514.378164 489.298975s112.363114 1.189082 202.13572-36.860512c89.771583-38.048571 88.880283-42.358737 98.689696-42.358737 9.809413 0 21.402449 14.123672 26.307156 39.61116 4.904707 25.487487 10.701736 45.552475-10.255575 58.037834-20.956288 12.484336-158.290119 93.190449-313.012993 93.190449h-7.729032c-154.722874 0-292.056706-80.706113-313.012993-93.190449s-15.160281-32.549324-10.255575-58.037834c4.904707-25.487487 16.497743-39.61116 26.307156-39.61116s8.918114 4.310166 98.689696 42.358737 202.136743 36.860513 202.136744 36.860512z" fill="#FF3B30" p-id="17482"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592559616839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8348" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M863.168 398.912c-1.568 6.56-5.376 16.16-10.752 27.744h0.128l-0.64 1.088c-31.296 67.072-113.024 198.624-113.024 198.624s-0.096-0.32-0.416-0.8l-23.872 41.6h115.104L609.856 960l49.888-199.2h-90.56l31.456-131.712a1282.24 1282.24 0 0 0-91.2 26.08s-48.224 28.288-138.88-54.4c0 0-61.184-53.952-25.728-67.424 15.104-5.76 73.216-13.024 118.976-19.2 61.792-8.384 99.84-12.8 99.84-12.8s-190.592 2.848-235.808-4.288c-45.216-7.104-102.56-82.656-114.784-149.12 0 0-18.88-36.448 40.64-19.2 59.52 17.28 305.92 67.232 305.92 67.232S239.2 297.568 217.888 273.568c-21.344-24-62.752-131.04-57.376-196.8 0 0 2.336-16.416 19.136-12.032 0 0 236.896 108.448 398.912 167.808 161.984 59.36 302.816 89.536 284.64 166.4z" fill="#3296FA" p-id="8349"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#36ab60" d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" /><path fill="#36ab60" d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" /><path fill="#36ab60" d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" /><path fill="#36ab60" d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" /><path fill="#36ab60" d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" /></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592560800799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18353" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1023 629.6c0-144.8-144.9-262.7-307.5-262.7-172.3 0-307.9 118-307.9 262.7 0 145 135.7 262.7 307.9 262.7 36.1 0 72.5-9.1 108.7-18.2l99.3 54.3-27.3-90.3c72.7-54.6 126.8-126.9 126.8-208.5zM620.2 589.4c-22.7 0-41-18.4-41-41 0-22.7 18.4-41 41-41 22.7 0 41 18.4 41 41s-18.3 41-41 41z m199.3-0.3c-22.7 0-41-18.4-41-41 0-22.7 18.4-41 41-41 22.7 0 41 18.4 41 41 0 22.7-18.4 41-41 41z m0 0" fill="#00C800" p-id="18354"></path><path d="M362.1 95.3C163.1 95.3 0 231 0 403.2c0 99.5 54.2 181.1 144.9 244.5l-36.2 108.9L235.2 693.1c45.3 8.9 81.6 18.2 126.8 18.2 11.4 0 22.7-0.5 33.8-1.4-7.1-24.2-11.2-49.5-11.2-75.9 0-158.2 135.9-286.6 307.8-286.6 11.8 0 23.4 0.8 34.9 2.2C696.1 203.7 540.1 95.3 362.1 95.3zM240.5 343.7c-27.2 0-49.2-22-49.2-49.2 0-27.2 22-49.2 49.2-49.2 27.2 0 49.2 22 49.2 49.2 0 27.2-22 49.2-49.2 49.2z m252.9 0c-27.2 0-49.2-22-49.2-49.2 0-27.2 22-49.2 49.2-49.2s49.2 22 49.2 49.2c0 27.2-22 49.2-49.2 49.2z m0 0" fill="#00C800" p-id="18355"></path></svg>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../favicon.ico">
<title>ibzuaa</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(function () {
var code = getUrlParam('code');
var state = getUrlParam('state');
alert("code:" + code + "\n state:" + state);
if (code && state) {
// 通过授权code请求后台
// alert(window.location.hostname);
var opt = {"code": code, "state": state};
$.ajax({
type: "post",
url: "../uaa/queryQQUserByCode",
dataType: "json",
data: JSON.stringify(opt),
contentType: 'application/json',
success: function (data) {
// console.log(JSON.stringify(data));
if (data) {
if (data.token) {
localStorage.setItem('token', data.token);
}
if (data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
if (data.ibzuser) {
var ibzuser = JSON.stringify(data.ibzuser);
// 设置cookie,保存账号密码7天
setCookie(ibzuser.loginname, ibzuser.password, 7);
// 跳转首页
window.location.href = "../index";
} else {
// 跳转微信绑定
window.location.href = "../#/weixinLoginRedirect?code=" + code + "&state=" + state;
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
// 回到登录页
window.location.href = "../";
}
});
} else {
alert("微信授权登录失败!");
// 回到登录页
window.location.href = "../";
}
});
// 获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
// 设置cookie
function setCookie(loginname, password, exdays) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../favicon.ico">
<title>ibzuaa</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(function () {
var code = getUrlParam('code');
var state = getUrlParam('state');
// alert("code:" + code + "\n state:" + state);
if (code && state) {
// 通过授权code请求后台
var opt = {"code": code, "state": state};
$.ajax({
type: "post",
url: "../uaa/queryWechatUserByCode",
dataType: "json",
data: JSON.stringify(opt),
contentType: 'application/json',
success: function (data) {
// console.log(JSON.stringify(data));
if (data) {
if (data.token) {
localStorage.setItem('token', data.token);
}
if (data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
if (data.ibzuser) {
var ibzuser = JSON.stringify(data.ibzuser);
// 设置cookie,保存账号密码7天
setCookie(ibzuser.loginname, ibzuser.password, 7);
// 跳转首页
window.location.href = "../index";
} else {
// 跳转微信绑定
window.location.href = "../#/weixinLoginRedirect?code=" + code + "&state=" + state;
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
// 回到登录页
window.location.href = "../";
}
});
} else {
alert("微信授权登录失败!");
// 回到登录页
window.location.href = "../";
}
});
// 获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
// 设置cookie
function setCookie(loginname, password, exdays) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
</script>
</head>
<body>
</body>
</html>
.login {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: #108cee;
> img {
width: 100vw;
height: 100vh;
min-width: 1280px;
min-height: 720px;
}
&-con {
position: absolute;
left: 0;
right: 0;
top: 150px;
margin: auto;
width: 450px;
.ivu-card-head {
padding: 30px 6px;
border-bottom: 0px;
> p {
line-height: 24px;
height: 24px;
margin-bottom: -2px;
font-size: 24px;
color: #666666;
font-weight: 700;
}
}
&-header {
font-size: 16px;
font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con {
padding: 0px 20px 0px 20px;
> i-button {
width: 170px;
height: 40px;
}
}
}
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.goLogin {
float: right;
font-size: 16px;
margin-right: 30px;
text-decoration: underline;
}
.confirm_register {
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.disabled {
background-color: #ddd;
border-color: #ddd;
color: #57a3f3;
cursor: not-allowed; // 鼠标变化
}
\ No newline at end of file
<template>
<div class='login'>
<img src="/assets/img/background.png" draggable="false"/>
<div class='login-con'>
<card :bordered="false">
<p slot='title' style="text-align: center">
账号绑定
<!--<a @click="goLogin" class="goLogin">返回登录</a>-->
</p>
<div class='form-con'>
<i-form ref='loginForm' :rules="rules" :model="form">
<form-item prop='loginname'>
<i-input
size='large'
prefix='ios-contact'
v-model.trim="form.loginname"
placeholder="用户名"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item prop='password'>
<i-input
size='large'
prefix='ios-key'
v-model.trim="form.password"
type='password'
placeholder="密码"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item>
<i-button
@click="handleRegister"
type='success'
class="confirm_register"
:class="{disabled: !this.canClick}"
long>{{this.BtnContent}}
</i-button>
</form-item>
</i-form>
</div>
</card>
<div class="log_footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank">{{appTitle}} is based on ibizlab .</a>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {Environment} from '@/environments/environment';
@Component({
components: {}
})
export default class dingdingLoginRedirect extends Vue {
/**
* 表单对象
*
* @type {*}
* @memberof Register
*/
public form: any = {loginname: '', password: ''};
/**
* 按钮可点击
*/
public canClick: any = true;
/**
* 按钮内容
*/
public BtnContent: any = "注册并绑定钉钉";
/**
* 钉钉授权成功返回的code和state
*/
public code: any;
public state: any;
/**
* 钉钉用户身份的唯一标识
*/
public openid: any;
/**
* 钉钉用户名称
*/
public nickname: any;
/**
* 应用名称
*
* @type {string}
* @memberof Register
*/
public appTitle: string = Environment.AppTitle;
/**
* 值规则
*
* @type {*}
* @memberof Register
*/
public rules = {};
/**
* 设置值规则
*
* @memberof Register
*/
public setRules() {
this.rules = {
loginname: [
{required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
],
password: [
{required: true, message: this.$t('components.login.password.message'), trigger: 'change'},
]
}
};
/**
* 生命周期Create
*
* @memberof Register
*/
public created() {
this.setRules();
}
/**
* 挂载
*/
public mounted() {
// 从url获取授权code和state
this.code = this.$route.query.code;
if (!this.code) {
this.code = this.getUrlParam('code');
}
this.state = this.$route.query.state;
if (!this.state) {
this.state = this.getUrlParam('state');
}
// alert("code:" + this.code + "\nstate:" + this.state);
// 获取失败,回到登录页
if (!this.code || !this.state) {
this.$message.error("钉钉授权,获取code失败");
this.goLogin();
}
else {
// 根据code获取钉钉用户信息
this.getDingtalkUserInfoByCode(this.code);
}
}
/**
* 监听语言变化
*
* @memberof Login
*/
@Watch('$i18n.locale')
onLocaleChange(newval: any, val: any) {
this.setRules();
}
/**
* 跳转登录页面
*
* @memberof Register
*/
public goLogin(): void {
const _this = this;
_this.$router.push('/login');
}
/**
* 获取url参数
*/
public getUrlParam(name: any) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
/**
* 根据code获取钉钉用户信息
*/
private getDingtalkUserInfoByCode(code: any) {
var param: any = {};
param.code = code;
const post: Promise<any> = this.$http.post('/uaa/getDingtalkUserInfoByCode', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.openid) {
this.openid = data.openid;
this.nickname = data.nickname;
} else {
this.$Message.error({
content: "获取钉钉用户信息失败,请重新授权",
duration: 3,
closable: true
});
}
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "获取钉钉用户信息失败,请重新授权",
duration: 3,
closable: true
});
}
});
}
/**
* 注册处理
*/
public handleRegister(): void {
if (this.canClick != true) {
return;
}
const form: any = this.$refs.loginForm;
let validatestate: boolean = true;
form.validate((valid: boolean) => {
validatestate = valid ? true : false;
});
if (!validatestate) {
return;
}
// 请求传参
var param: any = this.form;
if (this.code && this.state) {
param.openid = this.openid;
param.nickname = this.nickname;
} else {
this.$message.error("钉钉授权,获取code失败");
return;
}
const post: Promise<any> = this.$http.post('/uaa/bindDingtalkToRegister', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data) {
this.$Message.success({
content: "注册成功,正在登录"
});
if (data.token) {
localStorage.setItem('token', data.token);
}
if (data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
if (data.ibzuser) {
let ibzuser: any = JSON.stringify(data.ibzuser);
// 设置cookie,保存账号密码7天
this.setCookie(ibzuser.loginname, ibzuser.password, 7);
// 跳转首页
const url: any = '*';
this.$router.push({path: url});
}
}
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: "注册失败," + data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "注册失败",
duration: 3,
closable: true
});
}
});
}
/**
* 设置cookie,保存账号密码
* @param loginname
* @param password
*/
public setCookie(loginname: any, password: any, exdays: any) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
}
</script>
<style lang='less'>
@import 'dingdingLoginRedirect.less';
</style>
\ No newline at end of file
......@@ -67,6 +67,13 @@
float: right;
}
.goRegister {
float: right;
font-size: 14px;
}
.form_tipinfo {
font-family: MicrosoftYaHei-Bold;
font-size: 14px;
......@@ -101,11 +108,11 @@ form_tipinfo_more {
.sign-btn {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.wx-svg-container,
.qq-svg-container {
.qq-svg-container,
.dd-svg-container{
display: inline-block;
width: 40px;
height: 40px;
......@@ -113,6 +120,5 @@ form_tipinfo_more {
text-align: center;
padding-top: 1px;
border-radius: 4px;
margin-bottom: -20px;
margin-top: 10px;
}
\ No newline at end of file
margin: 10px 5px -20px 15px;
}
......@@ -41,6 +41,10 @@
</i-button>
</form-item>
<form-item>
<a @click="goRegister" class="goRegister" draggable="false">没有账号,现在注册一个</a>
</form-item>
<form-item>
<div style="text-align: center">
<span class="form_tipinfo">其他登录方式</span>
......@@ -52,6 +56,9 @@
<div class="sign-btn" @click="wechatHandleClick('wechat')">
<img src="/assets/img/weixin.svg" class="wx-svg-container" draggable="false">
</div>
<div class="sign-btn" @click="dingtalkHandleClick('dingtalk')">
<img src="/assets/img/dingding.svg" class="dd-svg-container" draggable="false">
</div>
</div>
</form-item>
......@@ -141,7 +148,12 @@ export default class Login extends Vue {
}
public mounted() {
this.getCookie("loginname");
if (this.getCookie("loginname") && this.getCookie("loginname") !== 'undefined') {
this.form.loginname = this.getCookie("loginname");
}
if (this.getCookie("password") && this.getCookie("password") !== 'undefined') {
this.form.password = this.getCookie("password");
}
}
/**
......@@ -220,6 +232,15 @@ export default class Login extends Vue {
_this.form={loginname: 'ibzadmin', password: '123456'}
}
/**
* 跳转注册页面
*/
public goRegister(): void {
const _this = this;
_this.$router.push('/register');
}
/**
* 设置cookie
*
......@@ -267,7 +288,135 @@ export default class Login extends Vue {
* @param thirddpart
*/
public wechatHandleClick(thirddpart: any) {
this.$Message.warning("微信授权登录暂未支持")
// 从后台获取微信开放平台提供的appid
const get: Promise<any> = this.$http.get('/uaa/getWechatAppId');
get.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.appid) {
// 截取地址,拼接需要部分组成新地址
const baseUrl = this.getNeedLocation();
// 1.微信开放平台提供的appId
const appId = data.appid;
// 2.微信扫码后回调地址,需要UrlEncode转码
const redirect_uri = baseUrl + 'assets/weixinRedirect.html';
const redirect_uri_encode = encodeURIComponent(redirect_uri);
// 3.微信扫码url
const url = 'https://open.weixin.qq.com/connect/qrconnect?response_type=code'
+ '&appid=' + appId
+ '&redirect_uri=' + redirect_uri_encode
+ '&scope=snsapi_login'
+ '&state=STATE';
// 4.跳转微信扫码
window.location.href = url;
}else {
this.$Message.error({
content: "获取网站应用appid失败," + data.detail,
duration: 5,
closable: true
});
}
}
}).catch((error: any) => {
const data = error.data;
if (data && data.detail) {
this.$Message.error({
content: "获取网站应用appid失败," + data.detail,
duration: 5,
closable: true
});
} else {
this.$Message.error({
content: "获取网站应用appid失败",
duration: 5,
closable: true
});
}
});
}
/**
* 钉钉授权登录
* @param thirdpart
*/
public dingtalkHandleClick(thirdpart: any) {
// 从后台获取钉钉开放平台提供的appid
const get: Promise<any> = this.$http.get('/uaa/getDingtalkAppId');
get.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.appid) {
// 截取地址,拼接需要部分组成新地址
const baseUrl = this.getNeedLocation();
// 1.钉钉开放平台提供的appId
const appId = data.appid;
// 2.钉钉扫码后回调地址,需要UrlEncode转码
const redirect_uri = baseUrl + 'assets/dingdingRedirect.html';
const redirect_uri_encode = encodeURIComponent(redirect_uri);
// 3.钉钉扫码url
const url = 'https://oapi.dingtalk.com/connect/qrconnect?response_type=code'
+ '&appid=' + appId
+ '&redirect_uri=' + redirect_uri_encode
+ '&scope=snsapi_login'
+ '&state=STATE';
// 4.跳转钉钉扫码
window.location.href = url;
}else {
this.$Message.error({
content: "获取网站应用appid失败," + data.detail,
duration: 5,
closable: true
});
}
}
}).catch((error: any) => {
const data = error.data;
if (data && data.detail) {
this.$Message.error({
content: "获取网站应用appid失败," + data.detail,
duration: 5,
closable: true
});
} else {
this.$Message.error({
content: "获取网站应用appid失败",
duration: 5,
closable: true
});
}
});
}
/**
* 获取需要的location部分
*/
public getNeedLocation() {
// 截取地址,拼接需要部分组成新地址
const scheme = window.location.protocol;
const host = window.location.host;
let baseUrl: any;
baseUrl = scheme + "//" + host;
const port = window.location.port;
console.log("scheme:" + scheme);
console.log("host:" + host);
console.log("port:" + port);
if (port) {
if (port == '80' || port == '443') {
baseUrl += "/";
} else {
baseUrl += ":" + port + "/";
}
} else {
baseUrl += "/";
}
console.log(baseUrl);
return baseUrl;
}
}
......
.login {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: #108cee;
> img {
width: 100vw;
height: 100vh;
min-width: 1280px;
min-height: 720px;
}
&-con {
position: absolute;
left: 0;
right: 0;
top: 150px;
margin: auto;
width: 450px;
.ivu-card-head {
padding: 30px 6px;
border-bottom: 0px;
> p {
line-height: 24px;
height: 24px;
margin-bottom: -2px;
font-size: 24px;
color: #666666;
font-weight: 700;
}
}
&-header {
font-size: 16px;
font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con {
padding: 0px 20px 0px 20px;
> i-button {
width: 170px;
height: 40px;
}
}
}
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.goLogin {
float: right;
font-size: 16px;
margin-right: 30px;
text-decoration: underline;
}
.confirm_register {
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.disabled {
background-color: #ddd;
border-color: #ddd;
color: #57a3f3;
cursor: not-allowed; // 鼠标变化
}
\ No newline at end of file
<template>
<div class='login'>
<img src="/assets/img/background.png" draggable="false"/>
<div class='login-con'>
<card :bordered="false">
<p slot='title' style="text-align: center">
账号绑定
<!--<a @click="goLogin" class="goLogin">返回登录</a>-->
</p>
<div class='form-con'>
<i-form ref='loginForm' :rules="rules" :model="form">
<form-item prop='loginname'>
<i-input
size='large'
prefix='ios-contact'
v-model.trim="form.loginname"
placeholder="用户名"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item prop='password'>
<i-input
size='large'
prefix='ios-key'
v-model.trim="form.password"
type='password'
placeholder="密码"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item>
<i-button
@click="handleRegister"
type='success'
class="confirm_register"
:class="{disabled: !this.canClick}"
long>{{this.BtnContent}}
</i-button>
</form-item>
</i-form>
</div>
</card>
<div class="log_footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank" draggable="false">{{appTitle}} is based on ibizlab .</a>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {Environment} from '@/environments/environment';
@Component({
components: {}
})
export default class qqLoginRedirect extends Vue {
/**
* 表单对象
*
* @type {*}
* @memberof Register
*/
public form: any = {loginname: '', password: ''};
/**
* 按钮可点击
*/
public canClick: any = true;
/**
* 按钮内容
*/
public BtnContent: any = "注册并绑定QQ";
/**
* 应用名称
*
* @type {string}
* @memberof Register
*/
public appTitle: string = Environment.AppTitle;
/**
* 值规则
*
* @type {*}
* @memberof Register
*/
public rules = {};
/**
* 设置值规则
*
* @memberof Register
*/
public setRules() {
this.rules = {
loginname: [
{required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
],
password: [
{required: true, message: this.$t('components.login.password.message'), trigger: 'change'},
]
}
};
// 注册方式
public registerType: any = "commom";
// 用户身份的唯一标识。建议保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。
public openId: any;
// 表示当前用户在此网站/应用的登录状态与授权信息,建议保存在本地。
public accessToken: any;
/**
* 生命周期Create
*
* @memberof Register
*/
public created() {
this.setRules();
}
/**
* 挂载
*/
public mounted() {
let _this = this;
// 获取qq授权登录的信息,用于后台请求
if (window.QC.Login.check()) {
console.log("qq已经登录");
window.QC.Login.getMe(function(openId:string, accessToken:string){
_this.openId = openId;
_this.accessToken = accessToken;
_this.registerType = "qq";
localStorage.setItem("openId",openId);
localStorage.setItem("accessToken",accessToken);
});
// 根据openId查用户
this.queryUserByOpenId(this.openId);
}
}
/**
* 根据openId查用户
* 1.没系统账号的,进行注册并绑定QQ
* 2.有系统账号的,直接登录
* @param openId
*/
private queryUserByOpenId(openId: any) {
var param: any = {};
param.openId = openId;
const post: Promise<any> = this.$http.post('uaa/queryUserByOpenId', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data.ibzuser) {
this.form.loginname = data.ibzuser.loginname;
this.form.password = data.ibzuser.password;
// 直接登录
this.countDown(0);
}
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "错误",
duration: 3,
closable: true
});
}
});
}
/**
* 监听语言变化
*
* @memberof Login
*/
@Watch('$i18n.locale')
onLocaleChange(newval: any, val: any) {
this.setRules();
}
/**
* 跳转登录页面
*
* @memberof Register
*/
public goLogin(): void {
const _this = this;
_this.$router.push('/login');
}
/**
* 注册处理
*/
public handleRegister(): void {
if (this.canClick!=true) {
return;
}
const form: any = this.$refs.loginForm;
let validatestate: boolean = true;
form.validate((valid: boolean) => {
validatestate = valid ? true : false;
});
if (!validatestate) {
return;
}
var param: any = this.form;
if (this.registerType === "qq") {
param.registerType = "qq";
param.openId = this.openId;
param.accessToken = this.accessToken;
}
else {
this.$Message.error({
content: "注册并绑定QQ失败",
duration: 3,
closable: true
});
return;
}
const post: Promise<any> = this.$http.post('/uaa/register', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.ibzuser) {
this.$Message.success({
content: "注册成功,用户名:" + data.ibzuser.loginname + ",密码:" + data.ibzuser.password,
duration: 3,
closable: true
});
} else {
this.$Message.success({
content: "注册成功",
duration: 3,
closable: true
});
}
// 3s后自动登录
this.countDown(3);
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: "注册失败," + data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "注册失败",
duration: 3,
closable: true
});
}
});
}
/**
* 自动登录倒计时
*/
public countDown(totalTime: any): void {
if (!this.canClick) return;
this.canClick = false;
this.BtnContent = totalTime + 's后自动登录';
// 设置定时器
let clock = window.setInterval(() => {
// 秒数-1
totalTime--;
this.BtnContent = totalTime + 's后自动登录';
if (totalTime < 0) {
// 清除定时器
window.clearInterval(clock);
// 登录请求
const loginname: any = this.form.loginname;
const password: any = this.form.password;
const post: Promise<any> = this.$http.post('v7/login', this.form, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.token) {
localStorage.setItem('token', data.token);
}
if (data && data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
// 设置cookie,保存账号密码7天
this.setCookie(loginname, password, 7);
// 跳转首页
const url: any = this.$route.query.redirect ? this.$route.query.redirect : '*';
this.$router.push({path: url});
}
}).catch((error: any) => {
const data = error.data;
if (data && data.detail) {
this.$Message.error({
content: "登录失败," + data.detail,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "登录失败",
duration: 3,
closable: true
});
}
});
}
}, 1000)
}
/**
* 设置cookie,保存账号密码
* @param loginname
* @param password
*/
public setCookie(loginname: any, password: any, exdays: any) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
}
</script>
<style lang='less'>
@import './qqLoginRedirect.less';
</style>
\ No newline at end of file
.login {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: #108cee;
> img {
width: 100vw;
height: 100vh;
min-width: 1280px;
min-height: 720px;
}
&-con {
position: absolute;
left: 0;
right: 0;
top: 150px;
margin: auto;
width: 450px;
.ivu-card-head {
padding: 30px 6px;
border-bottom: 0px;
> p {
line-height: 24px;
height: 24px;
margin-bottom: -2px;
font-size: 24px;
color: #666666;
font-weight: 700;
}
}
&-header {
font-size: 16px;
font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con {
padding: 0px 20px 0px 20px;
> i-button {
width: 170px;
height: 40px;
}
}
}
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.goLogin {
float: right;
font-size: 14px;
}
.confirm_register {
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.disabled {
background-color: #ddd;
border-color: #ddd;
color: #57a3f3;
cursor: not-allowed; // 鼠标变化
}
\ No newline at end of file
<template>
<div class='login'>
<img src="/assets/img/background.png" draggable="false"/>
<div class='login-con'>
<card :bordered="false">
<div class='form-con'>
<i-form ref='loginForm' :rules="rules" :model="form">
<form-item>
<a @click="goLogin" class="goLogin" draggable="false">返回登录</a>
</form-item>
<form-item prop='loginname'>
<i-input
size='large'
prefix='ios-contact'
v-model.trim="form.loginname"
placeholder="用户名"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item prop='personname'>
<i-input
size='large'
prefix='ios-person'
v-model.trim="form.personname"
placeholder="用户姓名"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item prop='password'>
<i-input
size='large'
prefix='ios-key'
v-model.trim="form.password"
type='password'
placeholder="密码"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item prop='confrimpassword'>
<i-input
size='large'
prefix='ios-checkbox'
v-model.trim="form.confrimpassword"
type='password'
placeholder="确认密码"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item>
<i-button
@click="handleRegister"
type='success'
class="confirm_register"
:class="{disabled: !this.canClick}"
long>{{this.confirmRegBtnContent}}
</i-button>
</form-item>
</i-form>
</div>
</card>
<div class="log_footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank" draggable="false">{{appTitle}} is based on ibizlab .</a>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {Environment} from '@/environments/environment';
@Component({})
export default class Register extends Vue {
/**
* 表单对象
*
* @type {*}
* @memberof Register
*/
public form: any = {loginname: '', personname: '', password: '', confrimpassword: ''};
/**
* 按钮可点击
*/
public canClick: any = true;
/**
* 确定注册按钮内容
*/
public confirmRegBtnContent: any = "确定注册";
/**
* 应用名称
*
* @type {string}
* @memberof Register
*/
public appTitle: string = Environment.AppTitle;
/**
* 值规则
*
* @type {*}
* @memberof Register
*/
public rules = {};
/**
* 设置值规则
*
* @memberof Register
*/
public setRules() {
this.rules = {
loginname: [
{required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
],
personname: [
{required: true, message: '用户姓名不能为空', trigger: 'change'},
],
password: [
{required: true, message: this.$t('components.login.password.message'), trigger: 'change'},
],
confrimpassword: [
{
validator: (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('确认密码不能为空'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致'));
} else {
callback();
}
},
trigger: 'change'
}
],
}
};
// 注册方式
public registerType: any = "commom";
/**
* 生命周期Create
*
* @memberof Register
*/
public created() {
this.setRules();
}
/**
* 监听语言变化
*
* @memberof Login
*/
@Watch('$i18n.locale')
onLocaleChange(newval: any, val: any) {
this.setRules();
}
/**
* 跳转登录页面
*
* @memberof Register
*/
public goLogin(): void {
const _this = this;
_this.$router.push('/login');
}
/**
* 注册处理
*/
public handleRegister(): void {
if (this.canClick!=true) {
return;
}
const form: any = this.$refs.loginForm;
let validatestate: boolean = true;
form.validate((valid: boolean) => {
validatestate = valid ? true : false;
});
if (!validatestate) {
return;
}
var param: any = this.form;
param.registerType = this.registerType;
const post: Promise<any> = this.$http.post('/uaa/register', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.ibzuser) {
this.$Message.success({
content: "注册成功,用户名:" + data.ibzuser.loginname + ",密码:" + data.ibzuser.password,
duration: 3,
closable: true
});
} else {
this.$Message.success({
content: "注册成功",
duration: 3,
closable: true
});
}
// 自动登录
this.countDown();
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: "注册失败," + data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "注册失败",
duration: 3,
closable: true
});
}
});
}
/**
* 自动登录
*/
public countDown(): void {
// 注册时不允许再点击‘确定注册按钮’
if (!this.canClick) return;
this.canClick = false;
this.confirmRegBtnContent = '登录中...';
// 登录请求
const loginname: any = this.form.loginname;
const password: any = this.form.password;
const post: Promise<any> = this.$http.post('v7/login', this.form, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.token) {
localStorage.setItem('token', data.token);
}
if (data && data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
// 设置cookie,保存账号密码7天
this.setCookie(loginname, password, 7);
// 跳转首页
const url: any = this.$route.query.redirect ? this.$route.query.redirect : '*';
this.$router.push({path: url});
}
}).catch((error: any) => {
const data = error.data;
if (data && data.detail) {
this.$Message.error({
content: "登录失败," + data.detail,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "登录失败",
duration: 3,
closable: true
});
}
this.canClick = true;
this.confirmRegBtnContent = '确定注册';
});
}
/**
* 设置cookie,保存账号密码
* @param loginname
* @param password
*/
public setCookie(loginname: any, password: any, exdays: any) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
}
</script>
<style lang='less'>
@import './register.less';
</style>
\ No newline at end of file
.login {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: #108cee;
> img {
width: 100vw;
height: 100vh;
min-width: 1280px;
min-height: 720px;
}
&-con {
position: absolute;
left: 0;
right: 0;
top: 150px;
margin: auto;
width: 450px;
.ivu-card-head {
padding: 30px 6px;
border-bottom: 0px;
> p {
line-height: 24px;
height: 24px;
margin-bottom: -2px;
font-size: 24px;
color: #666666;
font-weight: 700;
}
}
&-header {
font-size: 16px;
font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con {
padding: 0px 20px 0px 20px;
> i-button {
width: 170px;
height: 40px;
}
}
}
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.goLogin {
float: right;
font-size: 16px;
margin-right: 30px;
text-decoration: underline;
}
.confirm_register {
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.disabled {
background-color: #ddd;
border-color: #ddd;
color: #57a3f3;
cursor: not-allowed; // 鼠标变化
}
\ No newline at end of file
<template>
<div class='login'>
<img src="/assets/img/background.png" draggable="false"/>
<div class='login-con'>
<card :bordered="false">
<p slot='title' style="text-align: center">
账号绑定
<!--<a @click="goLogin" class="goLogin">返回登录</a>-->
</p>
<div class='form-con'>
<i-form ref='loginForm' :rules="rules" :model="form">
<form-item prop='loginname'>
<i-input
size='large'
prefix='ios-contact'
v-model.trim="form.loginname"
placeholder="用户名"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item prop='password'>
<i-input
size='large'
prefix='ios-key'
v-model.trim="form.password"
type='password'
placeholder="密码"
@keyup.enter.native="handleRegister">
</i-input>
</form-item>
<form-item>
<i-button
@click="handleRegister"
type='success'
class="confirm_register"
:class="{disabled: !this.canClick}"
long>{{this.BtnContent}}
</i-button>
</form-item>
</i-form>
</div>
</card>
<div class="log_footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank">{{appTitle}} is based on ibizlab .</a>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {Environment} from '@/environments/environment';
@Component({
components: {}
})
export default class weixinLoginRedirect extends Vue {
/**
* 表单对象
*
* @type {*}
* @memberof Register
*/
public form: any = {loginname: '', password: ''};
/**
* 按钮可点击
*/
public canClick: any = true;
/**
* 按钮内容
*/
public BtnContent: any = "注册并绑定微信";
/**
* 微信公众号授权成功返回的code和state
*/
public code: any;
public state: any;
/**
* 钉钉用户身份的唯一标识
*/
public openid: any;
/**
* 微信用户名称
*/
public nickname: any;
/**
* 应用名称
*
* @type {string}
* @memberof Register
*/
public appTitle: string = Environment.AppTitle;
/**
* 值规则
*
* @type {*}
* @memberof Register
*/
public rules = {};
/**
* 设置值规则
*
* @memberof Register
*/
public setRules() {
this.rules = {
loginname: [
{required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
],
password: [
{required: true, message: this.$t('components.login.password.message'), trigger: 'change'},
]
}
};
/**
* 生命周期Create
*
* @memberof Register
*/
public created() {
this.setRules();
}
/**
* 挂载
*/
public mounted() {
// 从url获取授权code和state
this.code = this.$route.query.code;
if (!this.code) {
this.code = this.getUrlParam('code');
}
this.state = this.$route.query.state;
if (!this.state) {
this.state = this.getUrlParam('state');
}
// alert("code:" + this.wechatCode + "\nstate:" + this.wechatState);
// 获取失败,回到登录页
if (!this.code || !this.state) {
this.$message.error("微信授权,获取code失败");
this.goLogin();
}
else {
// 根据code获取微信用户信息
this.getWechatUserInfoByCode(this.code);
}
}
/**
* 监听语言变化
*
* @memberof Login
*/
@Watch('$i18n.locale')
onLocaleChange(newval: any, val: any) {
this.setRules();
}
/**
* 跳转登录页面
*
* @memberof Register
*/
public goLogin(): void {
const _this = this;
_this.$router.push('/login');
}
/**
* 获取url参数
*/
public getUrlParam(name: any) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
/**
* 根据code获取微信用户信息
*/
private getWechatUserInfoByCode(code: any) {
var param: any = {};
param.code = code;
const post: Promise<any> = this.$http.post('/uaa/getWechatUserInfoByCode', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data && data.openid) {
this.openid = data.openid;
this.nickname = data.nickname;
} else {
this.$Message.error({
content: "获取微信用户信息失败,请重新授权",
duration: 3,
closable: true
});
}
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "获取微信用户信息失败,请重新授权",
duration: 3,
closable: true
});
}
});
}
/**
* 注册处理
*/
public handleRegister(): void {
if (this.canClick != true) {
return;
}
const form: any = this.$refs.loginForm;
let validatestate: boolean = true;
form.validate((valid: boolean) => {
validatestate = valid ? true : false;
});
if (!validatestate) {
return;
}
// 请求传参
var param: any = this.form;
if (this.code && this.state) {
param.code = this.code;
param.state = this.state;
param.openid = this.openid;
param.nickname = this.nickname;
} else {
this.$message.error("微信授权,获取code失败");
return;
}
const post: Promise<any> = this.$http.post('/uaa/bindWechatToRegister', param, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
if (data) {
this.$Message.success({
content: "注册成功,正在登录"
});
if (data.token) {
localStorage.setItem('token', data.token);
}
if (data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
if (data.ibzuser) {
let ibzuser: any = JSON.stringify(data.ibzuser);
// 设置cookie,保存账号密码7天
this.setCookie(ibzuser.loginname, ibzuser.password, 7);
// 跳转首页
const url: any = '*';
this.$router.push({path: url});
}
}
}
}).catch((e: any) => {
const data = e.data;
if (data && data.message) {
this.$Message.error({
content: "注册失败," + data.message,
duration: 3,
closable: true
});
} else {
this.$Message.error({
content: "注册失败",
duration: 3,
closable: true
});
}
});
}
/**
* 设置cookie,保存账号密码
* @param loginname
* @param password
*/
public setCookie(loginname: any, password: any, exdays: any) {
// 获取时间
let exdate = new Date();
// 保存的天数
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 字符串拼接cookie
window.document.cookie = "loginname" + "=" + loginname + ";path=/;expires=" + exdate.toUTCString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + exdate.toUTCString();
}
}
</script>
<style lang='less'>
@import './weixinLoginRedirect.less';
</style>
\ No newline at end of file
//用户自定义全局路由
export const globalRoutes:Array<any> = [
{
path: '/register',
component: ()=> import('@components/login/register.vue')
},
{
path: '/weixinLoginRedirect',
component: ()=> import('@components/login/weixinLoginRedirect.vue'),
},
{
path: '/dingdingLoginRedirect',
component: ()=> import('@components/login/dingdingLoginRedirect.vue'),
},
];
//用户自定义首页路由
export const indexRoutes:Array<any> = [
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册