perf: 双重验证显示secret

packages/ui/certd-client/src/views/certd/mine/security/api.ts

@@ -28,7 +28,7 @@ export async function TwoFactorAuthenticatorGet() {
     url: apiPrefix + "/twoFactor/authenticator/qrcode",
     method: "post",
   });
-  return res as string; //base64
+  return res as { qrcode: string; link: string; secret: string }; //base64
 }
 
 export async function TwoFactorAuthenticatorSave(req: AuthenticatorSaveReq) {

packages/ui/certd-client/src/views/certd/mine/security/index.vue

@@ -57,6 +57,17 @@
             <div class="ml-20">
               <img class="full-w" :src="authenticatorForm.qrcodeSrc" />
             </div>
+            <div class="ml-20 mt-5">
+              <div>您也可以手动添加：</div>
+              <div class="flex mt-5">
+                <a-tag type="primary" color="green" class="mr-2">Secret：</a-tag>
+                <fs-copyable :model-value="authenticatorForm.secret" />
+              </div>
+              <div class="flex mt-5">
+                <a-tag type="primary" color="green" class="mr-2">Link：</a-tag>
+                <fs-copyable :model-value="authenticatorForm.link" />
+              </div>
+            </div>
           </div>
           <h3 class="font-bold m-10">{{ t("certd.step3") }}</h3>
           <div class="ml-20">
@@ -97,6 +108,8 @@ const formState = reactive<Partial<UserTwoFactorSetting>>({
 const authenticatorForm = reactive({
   qrcodeSrc: "",
   verifyCode: "",
+  link: "",
+  secret: "",
   open: false,
 });
 
@@ -110,9 +123,14 @@ watch(
   async open => {
     if (open) {
       //base64 转图片
-      authenticatorForm.qrcodeSrc = await api.TwoFactorAuthenticatorGet();
+      const { qrcode, link, secret } = await api.TwoFactorAuthenticatorGet();
+      authenticatorForm.qrcodeSrc = qrcode;
+      authenticatorForm.link = link;
+      authenticatorForm.secret = secret;
     } else {
       authenticatorForm.qrcodeSrc = "";
+      authenticatorForm.link = "";
+      authenticatorForm.secret = "";
       authenticatorForm.verifyCode = "";
     }
   }

packages/ui/certd-server/src/controller/user/mine/setting-two-factor-controller.ts

@@ -48,8 +48,8 @@ export class UserTwoFactorSettingController extends BaseController {
   @Post("/authenticator/qrcode", { summary: Constants.per.authOnly })
   async authenticatorQrcode() {
     const userId = this.getUserId();
-    const qrcode = await this.twoFactorService.getAuthenticatorQrCode(userId);
-    return this.ok(qrcode);
+    const {qrcode,link,secret} = await this.twoFactorService.getAuthenticatorQrCode(userId);
+    return this.ok({qrcode,link,secret}); 
   }
 
   @Post("/authenticator/save", { summary: Constants.per.authOnly })

packages/ui/certd-server/src/modules/mine/service/two-factor-service.ts

@@ -33,7 +33,8 @@ export class TwoFactorService {
 
     //生成qrcode base64
     const qrcode = await import("qrcode");
-    return await qrcode.toDataURL(qrcodeContent);
+    const qrcodeBase64 = await qrcode.toDataURL(qrcodeContent);
+    return {qrcode:qrcodeBase64,link:qrcodeContent,secret}
 
   }