证书申请、查询、验证

fe/README.md

@@ -14,5 +14,11 @@ Since TypeScript cannot handle type information for `.vue` imports, they are shi
 
 ``` bash
 $ pnpm install
-$ pnpm run dev
+$ pnpm start
+```
+
+## 打包
+
+``` bash
+$ pnpm run build
 ```

fe/package.json

@@ -2,11 +2,12 @@
   "name": "blockchain-explorer",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.2.15",
     "axios": "^1.3.4",
     "less": "^4.1.3",

fe/src/App.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script setup lang="ts">
-
+import { TITLE } from "@/common/constants";
+document.title = TITLE;
 </script>
 
 <style>

fe/src/api/cert/index.ts

@@ -28,10 +28,10 @@ export function revoke(params: API.RevokeParams) {
 /**
  * 查询证书详细信息
  */
-export function info(params: API.InfoParams) {
-    return request<API.Cert>(
+export function query(params: API.QueryParams) {
+    return request<API.QueryResponse>(
         {
-            url: '/GetCertificateByUID',
+            url: '/GetCertificate',
             method: 'get',
             params
         }
@@ -42,11 +42,25 @@ export function info(params: API.InfoParams) {
  * 申请证书
  */
 export function apply(params: API.ApplyParams) {
-    return request<any>(
+    return request<API.QueryResponse>(
         {
             url: '/ApplyForABSCertificate',
             method: 'get',
             params
         }
     );
 }
+
+/**
+ * 验证证书
+ */
+export function verify(data: API.VerifyParams) {
+    return request<API.VerifyResponse>(
+        {
+            url: '/VerifyABSCert',
+            method: 'post',
+            headers: { "Content-Type": "application/json-patch+json" },
+            data
+        }
+    );
+}

fe/src/api/cert/types.d.ts

@@ -5,13 +5,12 @@ declare namespace API {
 
   type RevokeResponse = string | 'Revoke OK.';
 
-  type InfoParams = {
-    uid: string;
+  type QueryParams = {
+    no: string;
   };
 
   type ApplyParams = {
     uid: string;
-    attribute: string;
   };
 
   type Cert = {
@@ -24,4 +23,13 @@ declare namespace API {
     validityPeriod: string;
     version: string;
   };
+
+  type QueryResponse = {
+    absSignature: string;
+    certificate: Cert;
+  }
+
+  type VerifyParams = string;
+
+  type VerifyResponse = string;
 }

fe/src/api/factory.ts

@@ -12,7 +12,7 @@ import type { Ref } from 'vue'
  * @returns 组合式函数
  */
 export function useFetchFactory<T extends Object, R>
-    (fetchMethod: (params: T) => Promise<API.Response<R>>) {
+    (fetchMethod: (params: T) => Promise<R>) {
 
     const data: Ref<R | null> = ref(null);
     const error: Ref<string | null> = ref(null);
@@ -25,7 +25,7 @@ export function useFetchFactory<T extends Object, R>
             error.value = null;
 
             fetchMethod(params)
-                .then((res) => data.value = res.data)
+                .then((res) => data.value = res)
                 .catch((err) => (error.value = err))
         }
 

fe/src/common/constants.ts

@@ -1,6 +1,9 @@
 
 /** UI 上的常量*/
 export const UNKNOWN_ERROR_MSG = '未知错误，请重试';
+export const TITLE = '分布式公钥基础设施';
+export const SEARCH_PLACE_HOLDER = '请输入证书编号进行检索';
+
 
 /** 设置 */
 export const REQUEST_BASE_URL = import.meta.env.MODE === 'development'? '/dev/': '/dpki/';

fe/src/components/CertDetail.vue

@@ -10,17 +10,14 @@
     <a-form-item label="版本">
       {{ cert?.version }}
     </a-form-item>
-    <a-form-item label="设备">
+    <a-form-item label="用户">
       {{ cert?.ABSUID }}
     </a-form-item>
     <a-form-item label="证书序号">
       {{ cert?.serialNumber }}
     </a-form-item>
-    <a-form-item label="标签">
-      {{ cert?.ABSAttribute }}
-    </a-form-item>
     <a-form-item label="签名人">
-      {{ cert?.issuer }}
+      {{ cert?.issuerCA }}
     </a-form-item>
     <a-form-item label="签名">
       {{ cert?.signatureName }}

fe/src/components/CreateCert.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { message, Modal } from "ant-design-vue";
+import { apply } from "@/api/cert";
+
+const createFormVisible = ref(false);
+const certApplyUID = ref("");
+const placeholder = "请输入 UID";
+
+function createCert() {
+  const uid = certApplyUID.value;
+  
+  if (uid === undefined || uid === "") {
+    message.error("UID 不能为空");
+    return;
+  }
+  apply({ uid })
+    .then((res) => {
+      Modal.success({
+        title: "创建成功",
+        content: `证书编号为：${res.certificate.serialNumber}`,
+        okText: "好的",
+        onOk() {
+          createFormVisible.value = false;
+        },
+      });
+    })
+    .catch((err) => {
+      message.error(err);
+    });
+}
+</script>
+
+<template>
+  <a-button @click="createFormVisible = true"> 创建证书 </a-button>
+  <a-modal v-model:visible="createFormVisible" title="创建">
+    <a-form
+      ref="formRef"
+      name="custom-validation"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      labelAlign="left"
+    >
+      <a-form-item label="UID">
+        <a-input
+          v-model:value="certApplyUID"
+          :placeholder="placeholder"
+        ></a-input>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button key="submit" type="primary" @click="createCert">
+        确认创建
+      </a-button>
+    </template>
+  </a-modal>
+</template>

fe/src/components/SearchInput.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="group">
+    <input
+      type="text"
+      required
+      v-model="searchKey"
+      @keydown.enter="onSearch(searchKey)"
+      :placeholder="dynamicPlaceholder ? '' : placeholder"
+    />
+    <span class="bar"></span>
+    <a-button
+      type="link"
+      class="search-icon"
+      size="large"
+      @click="onSearch(searchKey)"
+    >
+      <template #icon>
+        <SearchOutlined />
+      </template>
+    </a-button>
+    <label v-if="dynamicPlaceholder">{{ placeholder }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { onSearch } from "@/composition/useSearch";
+import { SearchOutlined } from "@ant-design/icons-vue";
+
+defineProps({
+  placeholder: {
+    type: String,
+    default: "请在此输入",
+  },
+  dynamicPlaceholder: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const searchKey = ref("");
+</script>
+
+<style scoped>
+.group {
+  position: relative;
+}
+
+input {
+  width: 100%;
+  border: none;
+  display: block;
+  font-size: 18px;
+  padding: 10px 10px 10px 0;
+  background-color: transparent;
+  border-bottom: 1px solid #757575;
+}
+
+input:focus {
+  outline: none;
+}
+
+label {
+  left: 0;
+  top: 10px;
+  color: #999;
+  font-size: 18px;
+  position: absolute;
+  font-weight: normal;
+  pointer-events: none;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+/* active state */
+input:focus ~ label,
+input:valid ~ label {
+  top: -20px;
+  font-size: 14px;
+  color: #646464;
+}
+
+.bar {
+  width: 100%;
+  display: block;
+  position: relative;
+}
+
+.bar:before {
+  left: 0%;
+  width: 0;
+  bottom: 1px;
+  content: "";
+  height: 2px;
+  position: absolute;
+  background: #646464;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+/* active state */
+input:focus ~ .bar:before {
+  width: 100%;
+}
+
+.search-icon {
+  position: absolute;
+  right: 0;
+  bottom: 3px;
+  color: black;
+}
+
+.search-icon:hover {
+  color: #1890ff;
+}
+</style>

fe/src/components/VerifyCert.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { verify } from "@/api/cert";
+import { readLocalFile } from "@/utils/files";
+import { message } from "ant-design-vue";
+
+function verifyCert() {
+  readLocalFile(
+    (_, content) => {
+      verify(content)
+        .then((res) => {
+          if (res === "True") {
+            message.success("验证通过");
+          }
+        })
+        .catch(console.log);
+    },
+    (err) => {
+      console.log(err);
+      message.error(err);
+    }
+  );
+}
+</script>
+
+<template>
+  <a-button @click="verifyCert"> 验证本地证书 </a-button>
+</template>

fe/src/composition/useSearch.ts

@@ -0,0 +1,16 @@
+import router from "@/router";
+import { message } from 'ant-design-vue';
+
+/**
+ * 搜索框复用
+ * @param searchKey 搜索关键词
+ */
+export function onSearch(searchKey: string) {
+  const s = searchKey;
+  if (s.length > 0) {
+    router.push(`/query/${s}`);
+  }
+  else {
+    message.error('请输入证书编号')
+  }
+}