Skip to content

A
apaas-login
Commit 25ed211a authored by 李丹's avatar 李丹
Browse files
Options

添加验证码

parent 2a6c4695
Show whitespace changes
Inline Side-by-side
Showing with 369 additions and 93 deletions
.beagle.yml
View file @ 25ed211a
......@@ -50,7 +50,7 @@ pipeline:
base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0
dockerfile: .beagle/dockerfile
repo: wod/apaas-login
version: v3.0.1
version: v3.0.2
channel: alpha
args: "TARGETOS=linux,TARGETARCH=amd64" ## 不同架构的构建参数
registry: registry.cn-qingdao.aliyuncs.com
......@@ -117,7 +117,7 @@ pipeline:
base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0-arm64
dockerfile: .beagle/dockerfile
repo: wod/apaas-login
version: v3.0.1
version: v3.0.2
channel: alpha-arm64
args: "TARGETOS=linux,TARGETARCH=arm64"
registry: registry.cn-qingdao.aliyuncs.com
......@@ -173,7 +173,7 @@ pipeline:
base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0-ppc64le
dockerfile: .beagle/dockerfile
repo: wod/apaas-login
version: v3.0.1
version: v3.0.2
channel: alpha-ppc64le
args: "TARGETOS=linux,TARGETARCH=ppc64le"
registry: registry.cn-qingdao.aliyuncs.com
......@@ -227,7 +227,7 @@ pipeline:
base: registry.cn-qingdao.aliyuncs.com/wod/bg-login-base:v3.0-mips64le
dockerfile: .beagle/dockerfile
repo: wod/apaas-login
version: v3.0.1
version: v3.0.2
channel: alpha-mips64le
args: "TARGETOS=linux,TARGETARCH=mips64le"
registry: registry.cn-qingdao.aliyuncs.com
......
src/pages/login.vue
View file @ 25ed211a
......@@ -2,34 +2,66 @@
<div class="login_backg">
<div class="login_all">
<div class="headercontainer">
<div class="center-logo" style="width:100%;">
<div class="center-logo" style="width: 100%">
<img class="logo" src="@/assets/image/img_logo.png" alt />
</div>
</div>
<el-card v-show="active == 'login'" class="box-card login">
<div slot="header" class="clearfix"></div>
<el-form :model="form" ref="form1" @submit.native.prevent class="login_forms">
<el-form
:model="form"
ref="form1"
@submit.native.prevent
class="login_forms"
>
<el-form-item>
<p class="item_p">账号</p>
<el-input v-model.trim="form.userid" autofocus="autofocus" placeholder="请输入账号"></el-input>
<el-input
v-model.trim="form.userid"
autofocus="autofocus"
placeholder="请输入账号"
></el-input>
</el-form-item>
<el-form-item>
<p class="item_p">密码</p>
<el-input
:type="visible ? 'password':'text'"
type="password"
v-model.trim="form.password"
placeholder="请输入密码"
>
<span
<!-- <span
slot="suffix"
:title="visible ? '显示密码':'隐藏密码'"
:title="visible ? '显示密码' : '隐藏密码'"
@click="changePass()"
style="cursor:pointer;"
:class="visible ? 'eye_dis':'eye'"
></span>
style="cursor: pointer"
:class="visible ? 'eye_dis' : 'eye'"
></span> -->
</el-input>
</el-form-item>
</el-form>
<el-form
:model="yzms"
:rules="yzmRules"
ref="yzms"
class="demo-ruleForm"
>
<el-form-item
prop="yzm"
class="yzm"
:class="ruleFormIcon.yzm ? '' : 'icon_show'"
>
<el-input
v-model.trim="yzms.yzm"
placeholder="请输入验证码"
></el-input>
<img
class="yzm_img"
title="看不清？换一张"
:src="imgSrc"
@click="getImg()"
/>
</el-form-item>
</el-form>
<el-form>
<el-form-item class="rembme">
<el-checkbox v-model="checked">记住密码</el-checkbox>
......@@ -39,7 +71,8 @@
class="btn_sub sub1"
type="primary"
@click.prevent="login_remember_info()"
>登 录</el-button>
>登 录</el-button
>
</el-form-item>
<el-form-item>
<el-button class="btn_sub sub2" @click.prevent="register">
......@@ -58,8 +91,16 @@
</el-steps>
</div>
<div v-show="registerActive == 0">
<el-form :model="ruleForm_0" :rules="rules_0" ref="ruleForm_0" class="demo-ruleForm">
<el-form-item prop="userid1" :class="ruleFormIcon.userid1?'':'icon_show'">
<el-form
:model="ruleForm_0"
:rules="rules_0"
ref="ruleForm_0"
class="demo-ruleForm"
>
<el-form-item
prop="userid1"
:class="ruleFormIcon.userid1 ? '' : 'icon_show'"
>
<p class="item_p">账号</p>
<el-input
v-model.trim="ruleForm_0.userid1"
......@@ -67,61 +108,91 @@
placeholder="为字母、数字、下划线或其组合"
></el-input>
</el-form-item>
<el-form-item prop="password1" :class="ruleFormIcon.password1?'':'icon_show'">
<el-form-item
prop="password1"
:class="ruleFormIcon.password1 ? '' : 'icon_show'"
>
<p class="item_p">登录密码</p>
<el-input
v-model.trim="ruleForm_0.password1"
autocomplete="new-password"
:type="pwdCheck?'text':'password'"
type="password"
placeholder="密码为大小写字母及数字组合，不少于6位"
>
<span
<!-- <span
slot="suffix"
:title="pwdCheck?'隐藏密码':'显示密码'"
:class="pwdCheck?'eye':'eye_dis'"
@click="pwdCheck=!pwdCheck"
></span>
:title="pwdCheck ? '隐藏密码' : '显示密码'"
:class="pwdCheck ? 'eye' : 'eye_dis'"
@click="pwdCheck = !pwdCheck"
></span> -->
</el-input>
</el-form-item>
<el-form-item prop="truePassword" :class="ruleFormIcon.truePassword?'':'icon_show'">
<el-form-item
prop="truePassword"
:class="ruleFormIcon.truePassword ? '' : 'icon_show'"
>
<p class="item_p">确认密码</p>
<el-input
autocomplete="new-password"
v-model.trim="ruleForm_0.truePassword"
:type="truePwdCheck?'text':'password'"
type="password"
placeholder="请确认密码"
>
<span
<!-- <span
slot="suffix"
:title="truePwdCheck?'隐藏密码':'显示密码'"
:class="truePwdCheck?'eye':'eye_dis'"
@click="truePwdCheck=!truePwdCheck"
></span>
:title="truePwdCheck ? '隐藏密码' : '显示密码'"
:class="truePwdCheck ? 'eye' : 'eye_dis'"
@click="truePwdCheck = !truePwdCheck"
></span> -->
</el-input>
</el-form-item>
<el-form-item prop="cname" :class="ruleFormIcon.cname?'':'icon_show'">
<el-form-item
prop="cname"
:class="ruleFormIcon.cname ? '' : 'icon_show'"
>
<p class="item_p">昵称</p>
<el-input v-model.trim="ruleForm_0.cname" placeholder="给自己取个昵称吧"></el-input>
<el-input
v-model.trim="ruleForm_0.cname"
placeholder="给自己取个昵称吧"
></el-input>
</el-form-item>
</el-form>
</div>
<div v-show="registerActive == 1">
<el-form :model="ruleForm_1" :rules="rules_1" ref="ruleForm_1" class="demo-ruleForm">
<el-form
:model="ruleForm_1"
:rules="rules_1"
ref="ruleForm_1"
class="demo-ruleForm"
>
<el-form-item
prop="businessSystemName"
:class="ruleFormIcon.businessSystemName?'':'icon_show'"
:class="ruleFormIcon.businessSystemName ? '' : 'icon_show'"
>
<p class="item_p">业务系统名</p>
<el-input v-model.trim="ruleForm_1.businessSystemName" placeholder="例：机关事务大数据平台"></el-input>
<el-input
v-model.trim="ruleForm_1.businessSystemName"
placeholder="例：机关事务大数据平台"
></el-input>
</el-form-item>
<el-form-item prop="domainName" :class="ruleFormIcon.domainName?'':'icon_show'">
<el-form-item
prop="domainName"
:class="ruleFormIcon.domainName ? '' : 'icon_show'"
>
<p class="item_p">域名</p>
<el-input v-model.trim="ruleForm_1.domainName" placeholder="填写业务系统的域名"></el-input>
<el-input
v-model.trim="ruleForm_1.domainName"
placeholder="填写业务系统的域名"
></el-input>
</el-form-item>
<el-form-item>
<p class="item_p">IP（白名单）</p>
<div class="ip_block">
<div v-for="(item, index) in ruleForm_1.ip_white" :key="index" class="ip_item">
<div
v-for="(item, index) in ruleForm_1.ip_white"
:key="index"
class="ip_item"
>
{{ item }}
<i class="el-icon-close ip_del" @click="delIp(index)"></i>
</div>
......@@ -131,10 +202,18 @@
v-model="newIpWhite"
@keyup.enter.native="watchKeyboardWhite"
></el-input>
<el-button class="add_ip" @click="addIp('white')" icon="el-icon-plus">增加</el-button>
<el-button
class="add_ip"
@click="addIp('white')"
icon="el-icon-plus"
>增加</el-button
>
</div>
</el-form-item>
<el-form-item prop="organization" :class="ruleFormIcon.organization?'':'icon_show'">
<el-form-item
prop="organization"
:class="ruleFormIcon.organization ? '' : 'icon_show'"
>
<p class="item_p">用户组织机构</p>
<el-select v-model="ruleForm_1.organization" placeholder="请选择">
<el-option
......@@ -148,10 +227,21 @@
</el-form>
</div>
<div v-if="registerActive == 1">
<el-form :model="yzms" :rules="yzmRules" ref="yzms" class="demo-ruleForm">
<el-form-item prop="yzm" :class="ruleFormIcon.yzm?'yzm':'yzm icon_show'">
<el-form
:model="yzms"
:rules="yzmRules"
ref="yzms"
class="demo-ruleForm"
>
<el-form-item
prop="yzm"
:class="ruleFormIcon.yzm ? 'yzm' : 'yzm icon_show'"
>
<p class="item_p">验证码</p>
<el-input v-model.trim="yzms.yzm" placeholder="请输入验证码"></el-input>
<el-input
v-model.trim="yzms.yzm"
placeholder="请输入验证码"
></el-input>
<s-identify
class="yzm_img"
:identifyCode="identifyCode"
......@@ -167,11 +257,22 @@
class="btn_sub sub1"
type="primary"
@click.prevent="submitForm()"
>完成注册</el-button>
<el-button v-else class="btn_sub sub1" type="primary" @click.prevent="nextStep()">下一步</el-button>
>完成注册</el-button
>
<el-button
v-else
class="btn_sub sub1"
type="primary"
@click.prevent="nextStep()"
>下一步</el-button
>
</el-form-item>
<el-form-item>
<el-button v-if="registerActive == 0" class="btn_sub sub2" @click.prevent="login">
<el-button
v-if="registerActive == 0"
class="btn_sub sub2"
@click.prevent="login"
>
<i class="el-icon-arrow-left"></i>&nbsp;&nbsp;登录已有账号
</el-button>
<el-button v-else class="btn_sub sub2" @click.prevent="previous">
......@@ -182,7 +283,9 @@
</el-card>
<div v-if="active == 'login'" class="footer_message">
登录即代表您已同意
<span class="footer_message_bg">《BD-aPaaS平台用户协议与隐私政策》</span>
<span class="footer_message_bg"
>《BD-aPaaS平台用户协议与隐私政策》</span
>
</div>
</div>
</div>
......@@ -190,6 +293,7 @@
<script>
import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
import SIdentify from "@/components/sidentify";
import CryptoJS from "crypto-js"; //加密js
export default {
components: { SIdentify },
data() {
......@@ -306,15 +410,21 @@ export default {
this.yzmState = false;
callback(new Error("请输入验证码"));
} else {
if (value !== this.identifyCode) {
this.ruleFormIcon.yzm = false;
this.refreshCode();
callback(new Error("验证码错误"));
} else {
// let url = `/iam/api/verifyCaptcha?id=${this.imgId}&value=${value}`;
this.$api.general
.validateRandomCode(this.imgId, value)
.then((response) => {
if (response.data.success == 1) {
this.ruleFormIcon.yzm = true;
this.yzmState = true;
callback();
} else {
this.ruleFormIcon.yzm = false;
this.yzmState = false;
callback(new Error(response.data.errMsg));
}
})
.catch(function (response) {});
}
};
return {
......@@ -342,7 +452,7 @@ export default {
yzms: {
yzm: "",
},
imgSrc: "",
yzmRules: {
yzm: [{ validator: validateYzm, trigger: "blur" }],
},
......@@ -392,6 +502,7 @@ export default {
} else {
this.checked = false;
}
this.getImg();
},
methods: {
init() {
......@@ -404,6 +515,7 @@ export default {
// ?ReturnUrl=/shop/video_service_list/7
login_request() {
let self = this;
if (self.form.userid == "") {
self.$message({
message: "请填写用户名",
......@@ -415,7 +527,30 @@ export default {
type: "error",
});
} else {
let query = self.form;
self.$refs["yzms"].validate((volid_yzm) => {
if (volid_yzm) {
self.submitLoginForm();
} else {
self.$message({
message: "请完善验证码",
type: "error",
});
self.refreshCode();
}
});
}
},
// 提交登录表单
submitLoginForm() {
let self = this;
var psw = CryptoJS.AES.encrypt(
this.form.password,
"swuE9cmCZQwrkYRV"
).toString();
let query = {
userid: this.form.userid,
password: psw,
};
self.$api.general.login(query).then((response) => {
if (response.data.success == 1) {
let redirect = self.$route.query.ReturnUrl;
......@@ -448,7 +583,6 @@ export default {
});
}
});
}
},
login_remember_info() {
if (this.checked) {
......@@ -461,6 +595,26 @@ export default {
}
this.login_request();
},
// 获取验证码
getImg() {
this.$api.general
.getrandomCode()
.then((response) => {
if (response.data.success == 1) {
// console.log(response.data.data.captcha);
this.imgId = response.data.data.id;
this.imgSrc = response.data.data.captcha;
// this.$router.push({
// path: "/login",
// query: {
// username: this.ruleForm.username,
// password: this.ruleForm.password
// }
// });
}
})
.catch(function (response) {});
},
changePass() {
this.visible = !this.visible;
},
......@@ -481,9 +635,8 @@ export default {
},
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
];
this.identifyCode +=
this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
}
},
getOrganizations() {
......@@ -752,10 +905,8 @@ export default {
}
.yzm .yzm_img {
position: absolute;
top: 26px;
right: 12%;
width: 150px;
height: 40px;
width: 30%;
margin-left: 5%;
cursor: pointer;
}
.footer_message {
......@@ -825,6 +976,19 @@ export default {
}
</style>
<style>
.login .yzm .el-input {
width: 40%;
margin-left: 10%;
}
.yzm {
position: relative;
}
.yzm .yzm_img {
position: absolute;
width: 30%;
margin-left: 5%;
cursor: pointer;
}
.login .el-input__suffix {
font-size: 20px;
right: 10px;
......
src/request/api/general.js
View file @ 25ed211a
......@@ -19,6 +19,15 @@ const general = {
getNowUser() {
return axios.get(`/iam/api/getCurUser`);
},
// 获取验证码
getrandomCode() {
return axios.get(`/iam/api/getCaptcha`);
},
// 校验验证码
validateRandomCode(id, value) {
return axios.get(`/iam/api/verifyCaptcha?id=${id}&value=${value}`);
}
}
export default general;
src/utils/common.js 0 → 100644
View file @ 25ed211a
import CryptoJS from 'crypto-js' //加密js
var data_flag = true
//标准时间转换成时间戳
var formatDateTime = function (te) {
if (te == '') {
return ''
} else {
var time = new Date(te);
var dateTime = time.getTime();
return dateTime;
}
}
// 取得cookie
function getCookie(name) {
if (document.cookie.length > 0) {
var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
console.log(arr)
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); //再次切割
//这里会切割出以username为第0项的数组、以password为第0项的数组，判断查找相对应的值
if (arr2[0] == 'username') {
name = arr2[1]; //拿到账号
} else if (arr2[0] == 'password') {
//拿到拿到加密后的密码arr2[1]并解密
var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'swuE9cmCZQwrkYRV');
var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
name = plaintext;
}
}
}
// var nameEQ = name + '='
// var ca = document.cookie.split(';') // 把cookie分割成组
// for (var i = 0; i < ca.length; i++) {
// var c = ca[i] // 取得字符串
// while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
// c = c.substring(1, c.length) // 有的话，从第二位开始取
// }
// if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
// return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
// }
// }
// return false
}
// 清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
// 设置cookie
function setCookie(username, password, days) {
var text = CryptoJS.AES.encrypt(password, 'swuE9cmCZQwrkYRV');//使用CryptoJS方法加密
var saveDays = new Date(); //获取时间
saveDays.setTime(saveDays.getTime() + 24 * 60 * 60 * 1000 * days); //保存的天数
console.log(saveDays)
console.log(saveDays.toGMTString())
//字符串拼接存入cookie
window.document.cookie = "username" + "=" + username + ";path=/;expires=" + saveDays.toGMTString();
window.document.cookie = "password" + "=" + text + ";path=/;expires=" + saveDays.toGMTString();
// seconds = seconds || 0; //seconds有值就直接赋值，没有为0，这个根php不一样。
// var expires = "";
// if (seconds != 0 ) { //设置cookie生存时间
// var date = new Date();
// date.setTime(date.getTime()+(seconds*1000));
// expires = "; expires="+date.toGMTString();
// }
// document.cookie = name+"="+escape(value)+expires+"; path=/"; //转码并赋值
}
//时间戳转时间格式
var formatDateTime_date = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
};
export {
data_flag,
formatDateTime,
getCookie,
clearCookie,
setCookie,
formatDateTime_date
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment