526 lines
13 KiB
Vue
526 lines
13 KiB
Vue
<template>
|
||
<el-card shadow="never" header="账户安全">
|
||
<div class="bindBxo">
|
||
<div class="title" style="margin-top: 5px;">账号绑定</div>
|
||
<div class="boxView">
|
||
<div class="leftImg">
|
||
<div class="leftIcon wechat" v-if="wechat.open_id=='' || wechat.avatar==''"><i class="el-icon"><sc-icon-WechartRound/></i></div>
|
||
<div class="leftIcon" v-else>
|
||
<el-avatar :size="38" :src="wechat.avatar" />
|
||
</div>
|
||
<div class="nameBox">
|
||
<div class="titleName nameRed" v-if="wechat.open_id==''">绑定微信</div>
|
||
<div class="titleName" v-else>{{wechat.nick_name==""?'-':wechat.nick_name}}</div>
|
||
<div class="msg">绑定微信，用于账号登录,客服咨询及其它消息提醒。</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightBtn">
|
||
<el-button type="primary" :size="size" v-if="wechat.open_id==''" @click="bindWechat">绑 定</el-button>
|
||
<el-button type="primary" :size="size" v-else plain @click="secureDingTalk(1)">解 除</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="boxView">
|
||
<div class="leftImg">
|
||
<div class="leftIcon alipay" v-if="dingTalk.open_id=='' || dingTalk.avatar==''"><i class="el-icon"><sc-icon-DingTalk/></i></div>
|
||
<div class="leftIcon" v-else>
|
||
<el-avatar :size="38" :src="dingTalk.avatar" />
|
||
</div>
|
||
<div class="nameBox">
|
||
<div class="titleName nameRed" v-if="dingTalk.open_id==''">绑定钉钉</div>
|
||
<div class="titleName" v-else>{{dingTalk.nick_name==""?'-':dingTalk.nick_name}}</div>
|
||
<div class="msg">绑定钉钉，用于账号登录。</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightBtn">
|
||
<el-button type="primary" :size="size" v-if="dingTalk.open_id==''" @click="bindDingTalk">绑 定</el-button>
|
||
<el-button type="primary" :size="size" v-else plain @click="secureDingTalk(2)">解 除</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="title">安全登录</div>
|
||
<div class="boxView boxViewCenter">
|
||
<div class="leftBox">允许多地登录</div>
|
||
<div class="rightBox">
|
||
<el-radio-group v-model="multipleLocation" @change="multipleLocationSet">
|
||
<el-radio :label="true">允许多地</el-radio>
|
||
<el-radio :label="false">限制单设备</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="boxView boxViewCenter bandTime">
|
||
<div class="leftBox">系统超时安全自动退出时间</div>
|
||
<div class="rightBox">
|
||
<div class="boxInput">
|
||
<el-input onkeyup="value=value.replace(/[^\d]/g,'')" @change="loginTime" controls-position="right" v-model="timeout" placeholder="请输入时间" style="width: 260px">
|
||
<template #suffix>分钟</template>
|
||
</el-input>
|
||
</div>
|
||
<div class="tip">光标移出自动更新退出时间。</div>
|
||
</div>
|
||
</div>
|
||
<div class="title">OA能力</div>
|
||
<div class="boxView boxViewCenter">
|
||
<div class="leftBox">启用阿里企业邮箱功能</div>
|
||
<div class="rightBox">
|
||
<!-- v-model="multipleLocation" @change="multipleLocationSet"-->
|
||
<el-radio-group>
|
||
<el-radio :label="true">启用</el-radio>
|
||
<el-radio :label="false">禁用</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="title">使用Passkey</div>
|
||
<div class="boxView passKeyView boxViewCenter">
|
||
<div class="nameBox passkeyView">
|
||
<!-- <el-button type="primary" :size="size" @click="createPasskey">添加passKey</el-button>-->
|
||
<div class="msg">借助 Passkey，你可以使用自己的指纹、面孔、屏锁设置或实体安全密钥登录你的账号。请仅在你自有的设备上设置 Passkey。</div>
|
||
</div>
|
||
</div>
|
||
<div class="boxView passKeyView boxViewCenter">
|
||
<div class="itemMain">
|
||
<div class="boxCom" v-for="item in passKeyList" :key="item">
|
||
<i class="icon"><sc-icon-Fingerprint /></i>
|
||
<span class="name">
|
||
<el-input class="nameInput" v-model="item.alias" @change="passKeyAlias(item)" placeholder="请输入"></el-input>
|
||
</span>
|
||
</div>
|
||
<div class="boxCom" @click="createPasskey">
|
||
<span class="iconBack">
|
||
<i class="icon"><el-icon-Plus/></i>
|
||
</span>
|
||
<span class="name">添加</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<el-dialog
|
||
v-model="showWechatLogin"
|
||
title="微信绑定"
|
||
:width="500"
|
||
destroy-on-close
|
||
>
|
||
<div class="qrCodeLogin">
|
||
<div class="code_container">
|
||
<object :data="WechatLoginCode" width="430" height="430" type="text/html"></object>
|
||
</div>
|
||
<p class="error" v-if="bind_wechat_error!=''">{{bind_wechat_error}}，请先解绑原账号绑定</p>
|
||
<p class="msg">
|
||
请使用微信扫一扫绑定
|
||
</p>
|
||
<div class="qrCodeLogin-result" v-if="isWechatLoginResult">
|
||
<el-result
|
||
icon="success"
|
||
title="绑定成功"
|
||
sub-title="您可以使用微信扫码登录了"
|
||
></el-result>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
size:'small',
|
||
wechat:{
|
||
avatar:'',
|
||
nick_name:'',
|
||
open_id:''
|
||
},
|
||
dingTalk:{
|
||
avatar:'',
|
||
nick_name:'',
|
||
open_id:'',
|
||
},
|
||
WechatLoginCode:'',
|
||
showWechatLogin:false,
|
||
isWechatLoginResult: false,
|
||
bind_wechat_error:'',
|
||
|
||
multipleLocation:false,
|
||
timeout:'10',
|
||
userInfo:{},
|
||
|
||
passKeyList:[],
|
||
}
|
||
},
|
||
created() {
|
||
// 监听缓存变化 addEventListener
|
||
window.addEventListener('storage',this.wechatStorageChange);
|
||
},
|
||
mounted() {
|
||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
||
this.userInfo = userInfo;
|
||
|
||
this.getUserInfo();
|
||
this.getSso();
|
||
this.getTimeOut();
|
||
this.getPassKeyList();
|
||
// 获取新消息
|
||
// this.$socketApi.getSock(this.getWsResult);
|
||
},
|
||
beforeUnmount() {
|
||
window.removeEventListener('storage', this.wechatStorageChange);
|
||
},
|
||
watch:{
|
||
|
||
},
|
||
methods:{
|
||
async getTimeOut() {
|
||
const res = await this.$API.user.timeoutGet.post();
|
||
if (res.code == 200) {
|
||
this.timeout = res.data.options && res.data.options.timeout?res.data.options.timeout:this.timeout;
|
||
}
|
||
},
|
||
async loginTime(e) {
|
||
const res = await this.$API.user.timeoutConfig.post({timeout:e});
|
||
if (res.code == 200) {
|
||
this.$message.success('设置成功');
|
||
}
|
||
},
|
||
|
||
async getSso(){
|
||
const res = await this.$API.system.sso.get.post();
|
||
if(res.code == 200){
|
||
if(res.data.options){
|
||
this.multipleLocation = res.data.options.is_sso_login;
|
||
}
|
||
}
|
||
},
|
||
async multipleLocationSet(){
|
||
const res = await this.$API.system.sso.setup.post({is_sso_login:this.multipleLocation});
|
||
if(res.code == 200){
|
||
this.$message.success('配置成功');
|
||
}
|
||
},
|
||
|
||
getWsResult(res){
|
||
if(res.type == 7){
|
||
this.isWechatLoginResult = true;
|
||
setTimeout(()=>{
|
||
this.showWechatLogin = false;
|
||
this.getUserInfo();
|
||
},2000)
|
||
}
|
||
if(res.type == 12){
|
||
this.bind_wechat_error = res.msg;
|
||
}
|
||
},
|
||
async bindWechat(){
|
||
this.isWechatLoginResult = false;
|
||
const res = await this.$API.auth.bindWechat.post();
|
||
if(res.code == 200){
|
||
const url = JSON.parse(JSON.stringify(res.data.qrcode));
|
||
localStorage.setItem('bindWechat','2');
|
||
this.WechatLoginCode = url;
|
||
this.showWechatLogin = true;
|
||
}
|
||
},
|
||
async bindDingTalk(){
|
||
const res = await this.$API.auth.bindDingTalk.post();
|
||
if(res.code == 200){
|
||
const url = JSON.parse(JSON.stringify(res.data.redirect));
|
||
localStorage.setItem('bindDingTalk','2');
|
||
window.open(url);
|
||
}
|
||
},
|
||
wechatStorageChange(e){
|
||
let dingTalk = localStorage.getItem('bindDingTalk');
|
||
let wechat = localStorage.getItem('bindWechat');
|
||
if(e.key == 'DINGTALK_LOGIN_MESSAGE'){
|
||
if(dingTalk == 2 && typeof e.newValue =="string" && e.newValue!=''){
|
||
this.dingTalkBind(e.newValue)
|
||
}
|
||
localStorage.removeItem("DINGTALK_LOGIN_MESSAGE");
|
||
}
|
||
|
||
if(e.key == 'WECHAT_LOGIN_MESSAGE'){
|
||
if(wechat == 2 && typeof e.newValue =="string" && e.newValue!=''){
|
||
this.wechatBind(e.newValue);
|
||
}
|
||
localStorage.removeItem("WECHAT_LOGIN_MESSAGE");
|
||
}
|
||
},
|
||
wechatBind(){
|
||
|
||
},
|
||
async dingTalkBind(e){
|
||
let item = JSON.parse(e);
|
||
let params = {code:item.code,state:item.state}
|
||
const res = await this.$API.auth.bindDingTalkUser.post(params);
|
||
if(res.code == 200){
|
||
await this.getUserInfo()
|
||
}
|
||
},
|
||
async secureDingTalk(num){
|
||
let params = {app_type:num}
|
||
const res = await this.$API.auth.unbindUser.post(params);
|
||
if(res.code == 200){
|
||
await this.getUserInfo();
|
||
}
|
||
},
|
||
async getUserInfo(){
|
||
const res = await this.$API.user.getInfo.post();
|
||
if(res.code == 200){
|
||
this.wechat={
|
||
avatar:'',
|
||
nick_name:'',
|
||
open_id:''
|
||
}
|
||
this.dingTalk={
|
||
avatar:'',
|
||
nick_name:'',
|
||
open_id:''
|
||
}
|
||
if(res.data && res.data.length){
|
||
res.data.forEach(em=>{
|
||
if(em.app_type == 1){
|
||
this.wechat = em;
|
||
}
|
||
if(em.app_type ==2){
|
||
this.dingTalk = em;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
// 获取指纹列表
|
||
async getPassKeyList() {
|
||
const res = await this.$API.system.user.publishList.post();
|
||
if(res.code == 200){
|
||
this.passKeyList = res.data;
|
||
}
|
||
},
|
||
// 修改指纹名称
|
||
async passKeyAlias(em) {
|
||
let params = {
|
||
id:em.id,
|
||
alias:em.alias
|
||
}
|
||
await this.$API.system.user.renameAlias.post(params);
|
||
},
|
||
|
||
// 创建通行秘钥
|
||
async createPasskey() {
|
||
try {
|
||
const res = await this.$API.system.user.generateRegistration.post();
|
||
const publicKey= {
|
||
challenge:Uint8Array.from(res.data.challenge),
|
||
rp:{
|
||
name:res.data.rp.name,
|
||
id:res.data.rp.id
|
||
},
|
||
user:{
|
||
id:Uint8Array.from(res.data.user.id),
|
||
name:res.data.user.name,
|
||
displayName:res.data.user.displayName,
|
||
},
|
||
pubKeyCredParams:res.data.pubKeyCredParams,
|
||
authenticatorSelection:{
|
||
authenticatorAttachment:'',
|
||
userVerification:res.data.authenticatorSelection.userVerification,
|
||
},
|
||
timeout:res.data.timeout,
|
||
attestation:res.data.attestation
|
||
};
|
||
const credential = await navigator.credentials.create({ publicKey });
|
||
|
||
await this.storeCredential(credential);
|
||
} catch (error) {
|
||
this.$message.warning('创建通行秘钥失败');
|
||
}
|
||
},
|
||
async storeCredential(credential){
|
||
const params = {
|
||
id: credential.id,
|
||
rawId: this.bufferToBase64URL(credential.rawId),
|
||
type: credential.type,
|
||
response: {
|
||
clientDataJSON: this.bufferToBase64URL(credential.response.clientDataJSON),
|
||
attestationObject: this.bufferToBase64URL(credential.response.attestationObject),
|
||
},
|
||
authenticatorAttachment: credential.authenticatorAttachment,
|
||
}
|
||
const res = await this.$API.system.user.verifyResponse.post(params);
|
||
if(res.code == 200){
|
||
await this.getPassKeyList();
|
||
}
|
||
},
|
||
bufferToBase64URL(buffer) {
|
||
return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)))
|
||
.replace(/\+/g, "-")
|
||
.replace(/\//g, "_")
|
||
.replace(/=/g, "");
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bindBxo{
|
||
padding: 0 10px;
|
||
.title{
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin: 25px 0 10px 0;
|
||
}
|
||
}
|
||
.boxView{
|
||
width: 460px;
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
margin-left: 5px;
|
||
.leftImg{
|
||
display: flex;
|
||
align-items: center;
|
||
.leftIcon{
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-items: center;
|
||
margin-right: 10px;
|
||
.el-icon{
|
||
font-size: 34px;
|
||
}
|
||
}
|
||
.titleName{
|
||
margin-bottom: 5px;
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
.nameRed{
|
||
color: var(--el-color-danger);
|
||
}
|
||
.msg{
|
||
font-size: var(--el-font-size-extra-small);
|
||
color: #837e7e;
|
||
}
|
||
}
|
||
}
|
||
.passKeyView{
|
||
width: 100%;
|
||
.itemMain{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin-top: 10px;
|
||
.boxCom{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 80px;
|
||
cursor: pointer;
|
||
.icon{
|
||
text-align: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
.iconBack{
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: #E9E9E9;
|
||
font-size: 14px;
|
||
display: flow;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 10px;
|
||
.icon{
|
||
width: 14px;height: 14px;font-size: 12px;
|
||
}
|
||
}
|
||
.name{
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: var(--el-input-text-color);
|
||
}
|
||
.nameInput{
|
||
text-align: center;
|
||
}
|
||
.el-input{
|
||
text-align: center;
|
||
border: 0;
|
||
|
||
::v-deep .el-input__wrapper{
|
||
border: 0;
|
||
padding: 0;
|
||
box-shadow:none;
|
||
}
|
||
::v-deep .el-input__inner{
|
||
text-align: center;
|
||
}
|
||
}
|
||
.el-input:hover ::v-deep .el-input__wrapper{
|
||
//border-bottom: 1px solid var(--el-input-border-color);
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.boxViewCenter{
|
||
align-items: center;
|
||
.leftBox{
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
}
|
||
.bandTime{
|
||
align-items: baseline;
|
||
.tip{
|
||
margin-top: 6px;
|
||
color: #999;
|
||
}
|
||
}
|
||
.qrCodeLogin {
|
||
text-align: center;
|
||
position: relative;
|
||
padding: 0 0 20px 0;
|
||
}
|
||
.code_container{
|
||
width: 430px;
|
||
height:430px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.qrCodeLogin img.qrCode {
|
||
background: #fff;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.qrCodeLogin .error{
|
||
color: var(--el-color-error);
|
||
}
|
||
.qrCodeLogin p.msg {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.qrCodeLogin .qrCodeLogin-result {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
text-align: center;
|
||
background: var(--el-mask-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.passkeyView{
|
||
.msg{
|
||
margin-top: 10px;
|
||
color: var(--el-color-warning);
|
||
}
|
||
}
|
||
</style>
|