Write the Code. Change the World.

11月 26

tauri 2 默认打出的安装包是英文的。配置下,就可以打出中文安装包。

操作

修改 src-tauri/tauri.conf.json 文件,在 bundle 节点下追加 windows 节点(默认是没有的),然后将 wixlanguage 设置为 zh-CN 即可。

  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/icon.png",
      "icons/128x128.png",
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ],
    "windows": {
      "allowDowngrades": true,
      "certificateThumbprint": null,
      "digestAlgorithm": null,
      "nsis": null,
      "signCommand": null,
      "timestampUrl": null,
      "tsp": false,
      "webviewInstallMode": {
        "silent": true,
        "type": "downloadBootstrapper"
      },
      "wix": {
        "language": "zh-CN"
      }
    }
  }
11月 26

自古以来,对于桌面应用,系统托盘是不可缺少的一部分。tauri 2 也是一样。

官网文档:https://v2.tauri.app/learn/system-tray/
参考博客:https://blog.csdn.net/xiaoyuanbaobao/article/details/143781484

对于 tarui 2,很多服务端的功能,前端也可以实现。它会提供一套 api,使得前端可以构建服务端的能力。当然,也可以在服务端去实现,然后用前端去调用。

简单记录一下

有上边的文档和博客,就可以完成基础的托盘创建。这里做以下简单的记录。

继续阅读

11月 26

  1. Error failed to bundle project: https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反 应,连接尝试失败。 (os error 10060)

执行 pnpm tauri build,然后就会遇到上边这个问题。不管你是否用了梯子,都会出现这个问题。的却是有点坑。既然上边提示下载 zip 失败,那就手动下载下来,然后解压放到对应的位置就可以。这里放在

C:\Users\{user}\AppData\Local\tauri 下,可以在终端中使用 cd ~/AppData/Local/tauri 即可达到。然后将文件夹重命名为 WixTools314 即可,这个很重要,一定要命名为 WixTools314 而不是 WixTools

  1. Error failed to bundle project: error running light.exe: failed to run C:\Users\Windows\AppData\Local\tauri\WixTools314\light.exe

编辑 tauri.conf.json ,bundle 节点中新增以下配置。

    "windows": {
      "allowDowngrades": true,
      "certificateThumbprint": null,
      "digestAlgorithm": null,
      "nsis": null,
      "signCommand": null,
      "timestampUrl": null,
      "tsp": false,
      "webviewInstallMode": {
        "silent": true,
        "type": "downloadBootstrapper"
      },
      "wix": {
        "language": "zh-CN"
      }
    }

主要就是 wix 的 language 一定要设置成 zh-CN。这个是配置中,包名使用中文引起的。

参考

https://blog.csdn.net/qq_41614928/article/details/128145938

https://blog.csdn.net/weixin_44786530/article/details/143132166

11月 26

不需要额外的工具,直接使用 tauri 命令,就可以生成所有的 app icon

  1. 先准备一张宽高相同的 png 图片。最好是 1024 * 1024 宽高的。
  2. 将该图片命名为 app-icon.png,并放在项目根目录。
  3. 执行 pnpm tauri icon 即可生成所有的图片(会覆盖曾经的)。
11月 26

tauri 2 创建 webview。这里前端使用的 vue3。需要以下两步就可以。

  1. 配置权限和安全。
  2. 编写前端逻辑。

配置权限和安全

src-tauri/capabilities/default.json

增加以下配置。

{
   ……,
  "permissions": [
    "core:default",
    "shell:allow-open",
    {
      "identifier": "http:default",
      "allow": [
        {
          "url": "https://www.yuepaibao.com/"
        }
      ],
      "deny": [
        {
          "url": "https://private.tauri.app"
        }
      ]
    },
    "core:webview:allow-create-webview",
    "core:window:allow-show",
    "core:webview:allow-create-webview-window",
    "core:webview:allow-webview-close"
  ]
}

编写前端逻辑

src/App.vue

<script setup lang="ts">
  import { WebviewWindow } from "@tauri-apps/api/webviewWindow";

  const webview = new WebviewWindow("search", {
    center: true,
    width: 540,
    height: 960,
    alwaysOnTop: true,
    skipTaskbar: true,
    decorations: true,
    closable: true,
    url: "https://www.yuepaibao.com",
  });

  webview.once("tauri://created", function () {
    console.log("webview created");
  });
  webview.once("tauri://error", function (e) {
    console.log("error creating webview", e);
  });
</script>

如果想创建 webview 后,马上进入全屏。可以这样弄。

  • 在权限配置那里,将设置全屏的权限配置进去。
  • 在 webview 创建成功的回调里,设置全屏。

增加配置

"core:window:allow-set-fullscreen"

编写代码,修改和编辑

  import { Window } from "@tauri-apps/api/window";

  webview.once("tauri://created", async function () {
    console.log("webview created");
    const window = await Window.getByLabel("search");
    if (window) {
      window
        .setFullscreen(true)
        .then(() => {
          console.log("Window is now fullscreen");
        })
        .catch((error) => {
          console.error("Error setting fullscreen:", error);
        });
    }
  })
11月 21

随着各个平台(github,阿里云,等)都开始使用 MFA 来增加软件使用的安全性。对软件进行 MFA 处理还是有必要。有些平台已经在强制使用了。

MFA(Multi-factor Authentication,多因素认证)是一种安全实践,它要求用户提供两种或两种以上的认证因素来验证身份,以增强账户和系统的安全性。

TOTP(Time-Based One-Time Password,基于时间的一次性密码)是一种基于时间的一次性密码算法,通常用于两步验证和多因素身份验证,以增强静态口令认证的安全性。它由互联网工程任务组(IETF)在RFC 6238中定义,是HOTP(基于哈希的消息认证码的一次性密码算法)的扩展,添加了时间因素。

TOTP 可以是 MFA 的一部分。

MFA 的工作原理

MFA的目的是建立一个多层次的防御,使未经授权的人访问计算机系统或网络更加困难,从而提高安全性。

MFA通常包括以下三个要素之一或多个的组合:

  1. 知识因素(用户知道的东西):如密码、PIN码、答案问题。
  2. 所有权因素(用户拥有的东西):如手机、硬件令牌、电子邮件。
  3. 生物特征因素(用户所具有的东西):如指纹、虹膜、面部识别

实现MFA的基本步骤通常包括:

  1. 第一步验证(通常是密码):用户输入用户名和密码,数据库对其进行验证。
  2. 第二步验证(如一次性密码 OTP):如果第一步验证通过,用户会收到一个一次性密码(OTP),通常通过短信、电子邮件或身份验证器应用生成。用户需要输入这个OTP。
  3. 验证通过:系统验证OTP的有效性,如果正确,则允许用户访问资源。

MFA的实现方法:
MFA可以通过多种方式实现,以下是一些常见的方法:

  1. 双因素身份验证(2FA):这是最常见的MFA形式,包括两个身份验证步骤,例如输入密码后,向用户的手机或电子邮件发送一次性密码(OTP)。

  2. 身份验证器软件:身份验证器软件会生成基于时间的一次性密码(TOTP),供用户在输入密码后使用。

  3. 硬件令牌:用户可以携带的物理设备,如安全密钥,用于生成一次性密码或提供认证响应。短信或电子邮件验证码:向用户的手机号或邮箱发送验证码,用户需要输入这个验证码来完成认证。

简要

上边这些,都是一些文字的简要介绍。真正的使用场景可以这样。

比如,先账号密码登录或扫码登录。这一步验证通过后,再进行短信验证或 TOTP 验证。毕竟短信的使用是有费用成本,使用 TOTP 来实现验证就是一个省钱的方式。只是 TOTP 也是需要客户端来做支撑。(自己开发或让用户使用市面上成熟的工具)