实现自动匹配证书和批量选择证书功能

This commit is contained in:
刘祥超
2023-03-25 20:50:27 +08:00
parent 48e2907426
commit 2bc43ee2a5
9 changed files with 377 additions and 103 deletions

View File

@@ -2,9 +2,11 @@ package certs
import (
"encoding/json"
"errors"
"github.com/TeaOSLab/EdgeAdmin/internal/utils/numberutils"
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/sslconfigs"
"github.com/iwind/TeaGo/lists"
"github.com/iwind/TeaGo/maps"
@@ -23,15 +25,82 @@ func (this *SelectPopupAction) Init() {
}
func (this *SelectPopupAction) RunGet(params struct {
ServerId int64 // 搜索的服务
UserId int64 // 搜索的用户名
SearchingDomains string // 搜索的域名
SearchingType string // 搜索类型match|all
ViewSize string
SelectedCertIds string
Keyword string
}) {
// TODO 列出常用和最新的证书供用户选择
// 服务相关
if params.ServerId > 0 {
serverResp, err := this.RPC().ServerRPC().FindEnabledUserServerBasic(this.AdminContext(), &pb.FindEnabledUserServerBasicRequest{ServerId: params.ServerId})
if err != nil {
this.ErrorPage(err)
return
}
var server = serverResp.Server
if server != nil {
if server.UserId > 0 {
params.UserId = server.UserId
}
// 读取所有ServerNames
serverNamesResp, err := this.RPC().ServerRPC().FindServerNames(this.AdminContext(), &pb.FindServerNamesRequest{ServerId: params.ServerId})
if err != nil {
this.ErrorPage(err)
return
}
if len(serverNamesResp.ServerNamesJSON) > 0 {
var serverNames = []*serverconfigs.ServerNameConfig{}
err = json.Unmarshal(serverNamesResp.ServerNamesJSON, &serverNames)
if err != nil {
this.ErrorPage(err)
return
}
params.SearchingDomains = strings.Join(serverconfigs.PlainServerNames(serverNames), ",")
}
}
}
// 用户相关
this.Data["userId"] = params.UserId
// 域名搜索相关
var url = this.Request.URL.Path
var query = this.Request.URL.Query()
query.Del("searchingType")
this.Data["baseURL"] = url + "?" + query.Encode()
var searchingDomains = []string{}
if len(params.SearchingDomains) > 0 {
searchingDomains = strings.Split(params.SearchingDomains, ",")
}
const maxDomains = 2_000 // 限制搜索的域名数量
if len(searchingDomains) > maxDomains {
searchingDomains = searchingDomains[:maxDomains]
}
this.Data["searchingDomains"] = searchingDomains
this.Data["keyword"] = params.Keyword
this.Data["selectedCertIds"] = params.SelectedCertIds
var searchingType = params.SearchingType
if len(searchingType) == 0 {
if len(params.SearchingDomains) == 0 {
searchingType = "all"
} else {
searchingType = "match"
}
}
if searchingType != "all" && searchingType != "match" {
this.ErrorPage(errors.New("invalid searching type '" + searchingType + "'"))
return
}
this.Data["searchingType"] = searchingType
// 已经选择的证书
var selectedCertIds = []string{}
if len(params.SelectedCertIds) > 0 {
@@ -43,24 +112,68 @@ func (this *SelectPopupAction) RunGet(params struct {
}
this.Data["viewSize"] = params.ViewSize
countResp, err := this.RPC().SSLCertRPC().CountSSLCerts(this.AdminContext(), &pb.CountSSLCertRequest{
// 全部证书数量
countAllResp, err := this.RPC().SSLCertRPC().CountSSLCerts(this.AdminContext(), &pb.CountSSLCertRequest{
UserId: params.UserId,
Keyword: params.Keyword,
})
if err != nil {
this.ErrorPage(err)
return
}
var totalAll = countAllResp.Count
this.Data["totalAll"] = totalAll
page := this.NewPage(countResp.Count)
// 已匹配证书数量
var totalMatch int64 = 0
if len(searchingDomains) > 0 {
countMatchResp, err := this.RPC().SSLCertRPC().CountSSLCerts(this.AdminContext(), &pb.CountSSLCertRequest{
UserId: params.UserId,
Keyword: params.Keyword,
Domains: searchingDomains,
})
if err != nil {
this.ErrorPage(err)
return
}
totalMatch = countMatchResp.Count
}
this.Data["totalMatch"] = totalMatch
var totalCerts int64
if searchingType == "all" {
totalCerts = totalAll
} else if searchingType == "match" {
totalCerts = totalMatch
}
var page = this.NewPage(totalCerts)
this.Data["page"] = page.AsHTML()
listResp, err := this.RPC().SSLCertRPC().ListSSLCerts(this.AdminContext(), &pb.ListSSLCertsRequest{
Keyword: params.Keyword,
Offset: page.Offset,
Size: page.Size,
})
var listResp *pb.ListSSLCertsResponse
if searchingType == "all" {
listResp, err = this.RPC().SSLCertRPC().ListSSLCerts(this.AdminContext(), &pb.ListSSLCertsRequest{
UserId: params.UserId,
Keyword: params.Keyword,
Offset: page.Offset,
Size: page.Size,
})
} else if searchingType == "match" {
listResp, err = this.RPC().SSLCertRPC().ListSSLCerts(this.AdminContext(), &pb.ListSSLCertsRequest{
UserId: params.UserId,
Keyword: params.Keyword,
Domains: searchingDomains,
Offset: page.Offset,
Size: page.Size,
})
}
certConfigs := []*sslconfigs.SSLCertConfig{}
if listResp == nil {
this.ErrorPage(errors.New("'listResp' should not be nil"))
return
}
var certConfigs = []*sslconfigs.SSLCertConfig{}
err = json.Unmarshal(listResp.SslCertsJSON, &certConfigs)
if err != nil {
this.ErrorPage(err)
@@ -68,8 +181,8 @@ func (this *SelectPopupAction) RunGet(params struct {
}
this.Data["certs"] = certConfigs
certMaps := []maps.Map{}
nowTime := time.Now().Unix()
var certMaps = []maps.Map{}
var nowTime = time.Now().Unix()
for _, certConfig := range certConfigs {
countServersResp, err := this.RPC().ServerRPC().CountAllEnabledServersWithSSLCertId(this.AdminContext(), &pb.CountAllEnabledServersWithSSLCertIdRequest{SslCertId: certConfig.Id})
if err != nil {

View File

@@ -1,78 +1,100 @@
Vue.component("server-name-box", {
props: ["v-server-names"],
data: function () {
let serverNames = this.vServerNames;
if (serverNames == null) {
serverNames = []
}
return {
serverNames: serverNames,
isSearching: false,
keyword: ""
}
},
methods: {
addServerName: function () {
window.UPDATING_SERVER_NAME = null
let that = this
teaweb.popup("/servers/addServerNamePopup", {
callback: function (resp) {
var serverName = resp.data.serverName
that.serverNames.push(serverName)
}
});
},
props: ["v-server-names"],
data: function () {
let serverNames = this.vServerNames;
if (serverNames == null) {
serverNames = []
}
return {
serverNames: serverNames,
isSearching: false,
keyword: ""
}
},
methods: {
addServerName: function () {
window.UPDATING_SERVER_NAME = null
let that = this
teaweb.popup("/servers/addServerNamePopup", {
callback: function (resp) {
var serverName = resp.data.serverName
that.serverNames.push(serverName)
}
});
},
removeServerName: function (index) {
this.serverNames.$remove(index)
},
removeServerName: function (index) {
this.serverNames.$remove(index)
},
updateServerName: function (index, serverName) {
window.UPDATING_SERVER_NAME = teaweb.clone(serverName)
let that = this
teaweb.popup("/servers/addServerNamePopup", {
callback: function (resp) {
var serverName = resp.data.serverName
Vue.set(that.serverNames, index, serverName)
}
});
},
showSearchBox: function () {
this.isSearching = !this.isSearching
if (this.isSearching) {
let that = this
setTimeout(function () {
that.$refs.keywordRef.focus()
}, 200)
} else {
this.keyword = ""
}
},
},
watch: {
keyword: function (v) {
this.serverNames.forEach(function (serverName) {
if (v.length == 0) {
serverName.isShowing = true
return
}
if (serverName.subNames == null || serverName.subNames.length == 0) {
if (!teaweb.match(serverName.name, v)) {
serverName.isShowing = false
}
} else {
let found = false
serverName.subNames.forEach(function (subName) {
if (teaweb.match(subName, v)) {
found = true
}
})
serverName.isShowing = found
}
})
}
},
template: `<div>
updateServerName: function (index, serverName) {
window.UPDATING_SERVER_NAME = teaweb.clone(serverName)
let that = this
teaweb.popup("/servers/addServerNamePopup", {
callback: function (resp) {
var serverName = resp.data.serverName
Vue.set(that.serverNames, index, serverName)
}
});
},
showSearchBox: function () {
this.isSearching = !this.isSearching
if (this.isSearching) {
let that = this
setTimeout(function () {
that.$refs.keywordRef.focus()
}, 200)
} else {
this.keyword = ""
}
},
allServerNames: function () {
if (this.serverNames == null) {
return []
}
let result = []
this.serverNames.forEach(function (serverName) {
if (serverName.subNames != null && serverName.subNames.length > 0) {
serverName.subNames.forEach(function (subName) {
if (subName != null && subName.length > 0) {
if (!result.$contains(subName)) {
result.push(subName)
}
}
})
} else if (serverName.name != null && serverName.name.length > 0) {
if (!result.$contains(serverName.name)) {
result.push(serverName.name)
}
}
})
return result
}
},
watch: {
keyword: function (v) {
this.serverNames.forEach(function (serverName) {
if (v.length == 0) {
serverName.isShowing = true
return
}
if (serverName.subNames == null || serverName.subNames.length == 0) {
if (!teaweb.match(serverName.name, v)) {
serverName.isShowing = false
}
} else {
let found = false
serverName.subNames.forEach(function (subName) {
if (teaweb.match(subName, v)) {
found = true
}
})
serverName.isShowing = found
}
})
}
},
template: `<div>
<input type="hidden" name="serverNames" :value="JSON.stringify(serverNames)"/>
<div v-if="serverNames.length > 0">
<div v-for="(serverName, index) in serverNames" class="ui label small basic" :class="{hidden: serverName.isShowing === false}">

View File

@@ -5,7 +5,8 @@ Vue.component("ssl-certs-box", {
"v-protocol", // 协议https|tls
"v-view-size", // 弹窗尺寸normal, mini
"v-single-mode", // 单证书模式
"v-description" // 描述文字
"v-description", // 描述文字
"v-domains" // 搜索的域名列表或者函数
],
data: function () {
let certs = this.vCerts
@@ -43,8 +44,8 @@ Vue.component("ssl-certs-box", {
// 选择证书
selectCert: function () {
let that = this
let width = "50em"
let height = "30em"
let width = "54em"
let height = "32em"
let viewSize = this.vViewSize
if (viewSize == null) {
viewSize = "normal"
@@ -53,11 +54,37 @@ Vue.component("ssl-certs-box", {
width = "35em"
height = "20em"
}
teaweb.popup("/servers/certs/selectPopup?viewSize=" + viewSize, {
let searchingDomains = []
if (this.vDomains != null) {
if (typeof this.vDomains == "function") {
let resultDomains = this.vDomains()
if (resultDomains != null && typeof resultDomains == "object" && (resultDomains instanceof Array)) {
searchingDomains = resultDomains
}
} else if (typeof this.vDomains == "object" && (this.vDomains instanceof Array)) {
searchingDomains = this.vDomains
}
if (searchingDomains.length > 10000) {
searchingDomains = searchingDomains.slice(0, 10000)
}
}
let selectedCertIds = this.certs.map(function (cert) {
return cert.id
})
teaweb.popup("/servers/certs/selectPopup?viewSize=" + viewSize + "&searchingDomains=" + window.encodeURIComponent(searchingDomains.join(",")) + "&selectedCertIds=" + selectedCertIds.join(","), {
width: width,
height: height,
callback: function (resp) {
that.certs.push(resp.data.cert)
if (resp.data.cert != null) {
that.certs.push(resp.data.cert)
}
if (resp.data.certs != null) {
that.certs.$pushAll(resp.data.certs)
}
that.$forceUpdate()
}
})
},

View File

@@ -107,12 +107,23 @@ Vue.component("ssl-config-box", {
selectedCertIds.push(cert.id.toString())
})
}
teaweb.popup("/servers/certs/selectPopup?selectedCertIds=" + selectedCertIds, {
let serverId = this.vServerId
if (serverId == null) {
serverId = 0
}
teaweb.popup("/servers/certs/selectPopup?selectedCertIds=" + selectedCertIds + "&serverId=" + serverId, {
width: "50em",
height: "30em",
callback: function (resp) {
that.policy.certRefs.push(resp.data.certRef)
that.policy.certs.push(resp.data.cert)
if (resp.data.cert != null && resp.data.certRef != null) {
that.policy.certRefs.push(resp.data.certRef)
that.policy.certs.push(resp.data.cert)
}
if (resp.data.certs != null && resp.data.certRefs != null) {
that.policy.certRefs.$pushAll(resp.data.certRefs)
that.policy.certs.$pushAll(resp.data.certs)
}
that.$forceUpdate()
}
})
},
@@ -312,8 +323,15 @@ Vue.component("ssl-config-box", {
width: "50em",
height: "30em",
callback: function (resp) {
that.policy.clientCARefs.push(resp.data.certRef)
that.policy.clientCACerts.push(resp.data.cert)
if (resp.data.cert != null && resp.data.certRef != null) {
that.policy.clientCARefs.push(resp.data.certRef)
that.policy.clientCACerts.push(resp.data.cert)
}
if (resp.data.certs != null && resp.data.certRefs != null) {
that.policy.clientCARefs.$pushAll(resp.data.certRefs)
that.policy.clientCACerts.$pushAll(resp.data.certs)
}
that.$forceUpdate()
}
})
},
@@ -525,7 +543,7 @@ Vue.component("ssl-config-box", {
<td>客户端认证CA证书</td>
<td>
<div v-if="policy.clientCACerts != null && policy.clientCACerts.length > 0">
<div class="ui label small" v-for="(cert, index) in policy.clientCACerts">
<div class="ui label small basic" v-for="(cert, index) in policy.clientCACerts">
{{cert.name}} / {{cert.dnsNames}} / 有效至{{formatTime(cert.timeEndAt)}} &nbsp; <a href="" title="删除" @click.prevent="removeClientCACert()"><i class="icon remove"></i></a>
</div>
<div class="ui divider"></div>

View File

@@ -14,7 +14,6 @@ Tea.context(function () {
// 批量上传证书
this.uploadBatch = function () {
teaweb.popup("/servers/certs/uploadBatchPopup", {
height: "30em",
callback: function () {
window.location.reload()
}

View File

@@ -1,26 +1,48 @@
{$layout "layout_popup"}
<h3>选择证书</h3>
<h3>选择证书 <span v-if="searchingDomains.length > 0">(当前服务域名:{{searchingDomains[0]}}<var style="font-style: normal" v-if="searchingDomains.length > 1">等{{searchingDomains.length}}个域名</var></span></h3>
<!-- 搜索表单 -->
<form class="ui form" action="/servers/certs/selectPopup">
<input type="hidden" name="selectedCertIds" :value="selectedCertIds"/>
<input type="hidden" name="searchingType" :value="searchingType"/>
<input type="hidden" name="searchingDomains" :value="searchingDomains.join(',')"/>
<div class="ui fields inline">
<div class="ui field">
<user-selector :v-user-id="userId"></user-selector>
</div>
<div class="ui field">
<input type="text" name="keyword" v-model="keyword" placeholder="域名、说明文字等" size="30"/>
</div>
<div class="ui field">
<button class="ui button" type="submit">搜索</button> &nbsp;
<a :href="'/servers/certs/selectPopup?selectedCertIds=' + selectedCertIds" v-if="keyword.length > 0">[清除条件]</a>
<a :href="'/servers/certs/selectPopup?selectedCertIds=' + selectedCertIds + '&searchingType=' + searchingType + '&searchingDomains=' + encodeURL(searchingDomains.join(','))" v-if="keyword.length > 0">[清除条件]</a>
</div>
</div>
</form>
<!-- 选项卡 -->
<div v-if="searchingDomains.length > 0">
<div class="ui divider" style="margin-bottom: 0"></div>
<second-menu>
<menu-item :active="searchingType == 'all'" :href="baseURL + '&searchingType=all'">所有证书 <span class="small">({{totalAll}})</span></menu-item>
<span class="disabled item">|</span>
<menu-item :active="searchingType == 'match'" :href="baseURL + '&searchingType=match'">域名匹配证书 <span class="small"> ({{totalMatch}})</span></menu-item>
</second-menu>
</div>
<!-- 全选 -->
<div v-if="countChecked > 0">
<div class="margin"></div>
<button class="ui button small basic" type="button" @click.prevent="confirmChecked">使用选中的{{countChecked}}个证书</button>
</div>
<!-- 证书列表 -->
<p class="comment" v-if="certs.length == 0">暂时还没有相关证书。</p>
<p class="comment" v-if="certs.length == 0">暂时还没有<span v-if="searchingType == 'match'">跟所添加域名匹配的</span>相关证书。</p>
<table class="ui table selectable celled" v-if="certs.length > 0">
<thead>
<tr>
<th style="width:1em"><checkbox @input="changeAll"></checkbox></th>
<th>证书说明</th>
<th>域名</th>
<th>过期日期</th>
@@ -30,6 +52,9 @@
</tr>
</thead>
<tr v-for="(cert, index) in certs">
<td>
<checkbox v-model="cert.isChecked" ref="certCheckboxes" @input="changeCertChecked" v-if="!certInfos[index].isSelected"></checkbox>
</td>
<td>
<a href="" @click.prevent="selectCert(cert)" v-if="!certInfos[index].isSelected"><keyword :v-word="keyword">{{cert.name}}</keyword></a>
<span v-if="certInfos[index].isSelected">{{cert.name}}</span>

View File

@@ -11,4 +11,67 @@ Tea.context(function () {
}
})
}
this.encodeURL = function (arg) {
return window.encodeURIComponent(arg)
}
/**
* 复选框
*/
this.countChecked = 0
this.certs.forEach(function (cert) {
cert.isChecked = false
})
this.changeAll = function (b) {
let that = this
this.certs.forEach(function (cert) {
cert.isChecked = b
})
if (b) {
let countChecked = 0
this.certs.forEach(function (cert, index) {
if (cert.isChecked && !that.certInfos[index].isSelected) {
countChecked++
}
})
this.countChecked = countChecked
} else {
this.countChecked = 0
}
}
this.changeCertChecked = function () {
let countChecked = 0
this.certs.forEach(function (cert) {
if (cert.isChecked) {
countChecked++
}
})
this.countChecked = countChecked
}
this.confirmChecked = function () {
let resultCerts = []
let resultCertRefs = []
this.certs.forEach(function (cert) {
if (cert.isChecked) {
resultCerts.push(cert)
resultCertRefs.push({
isOn: true,
certId: cert.id
})
}
})
NotifyPopup({
code: 200,
data: {
certs: resultCerts,
certRefs: resultCertRefs
}
})
}
})

View File

@@ -7,14 +7,14 @@
<h3>新网站服务主要信息:</h3>
<table class="ui table selectable definition">
<tr v-show="hasUsers">
<td>所属用户<optional-label></optional-label></td>
<td class="title">所属用户<optional-label></optional-label></td>
<td>
<user-selector @change="changeUserId"></user-selector>
<p class="comment">当前服务所属平台用户。</p>
</td>
</tr>
<tr v-if="plans.length > 0">
<td>选择套餐</td>
<td class="title">选择套餐</td>
<td>
<select class="ui dropdown auto-width" name="userPlanId">
<option value="0">[选择套餐]</option>
@@ -23,7 +23,7 @@
</td>
</tr>
<tr>
<td>部署的集群 *</td>
<td class="title">部署的集群 *</td>
<td>
<div v-if="userId == 0">
<node-cluster-combo-box></node-cluster-combo-box>
@@ -47,7 +47,7 @@
<tr>
<td>{{tlsProtocolName.toUpperCase()}}证书</td>
<td>
<ssl-certs-box :v-protocol="tlsProtocolName.toLowerCase()"></ssl-certs-box>
<ssl-certs-box :v-protocol="tlsProtocolName.toLowerCase()" :v-domains="findServerNames"></ssl-certs-box>
</td>
</tr>
</tbody>
@@ -77,7 +77,7 @@
</tr>
<tr>
<td>绑定端口 *</td>
<td class="title">绑定端口 *</td>
<td>
<network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
</td>

View File

@@ -96,4 +96,11 @@ Tea.context(function () {
this.plans = resp.data.plans
})
}
/**
* 证书相关
*/
this.findServerNames = function () {
return this.$refs.serverNameBox.allServerNames()
}
})