Posts on Bruce's Blog

BNBU 校园 VPN 一键连接：OpenConnect、AnyConnect 与宁盾令牌 TOTP 教程

Fri, 28 Aug 2026 00:00:00 +0800

我做这个项目，没有什么宏大的理由，只是每次连学校 VPN 都觉得麻烦。

以前打开 Cisco AnyConnect，要输入账号、密码，再拿出手机，打开宁盾令牌看六位验证码。有时宁盾令牌自己还要先输入安全锁密码。一套流程走完并不久，但每次都重复，次数多了就很烦。

原版 Cisco AnyConnect 还会安装后台服务，并随 Windows 启动。这个设计对企业设备可能很正常，对我却是一直挂着一个平时用不到的服务。我实在忍受不了，才开始找替代客户端。

最后的效果很简单：打开 OpenConnect-GUI，选中 BNBU VPN，点击 Connect。账号、静态密码和动态码都由客户端处理，不需要再拿手机。

现在连接 BNBU VPN 只剩一次点击。

这篇先讲我为什么一路折腾到这里，再给出一套可以照着做的完整流程。教程只适用于你本人有权使用的账号和学校发给你的个人令牌。二维码、seed、Base32 secret 和完整 otpauth:// URI 都是登录凭据，不要发给别人，也不要上传到在线转换网站。

四篇文章给我的启发

我不是从零猜出 OpenConnect 和宁盾令牌的用法。真正让我把思路串起来的是四篇博客：

HaoTian：UIC AnyConnect 的校园 VPN 研究，写于 2024 年。它从 Clash DNS、路由表、局域网和 ZeroTier 冲突一路研究到 OpenConnect-GUI，让我第一次意识到 Cisco AnyConnect 客户端本身也可以替换。文中的 v.uic.edu.cn 属于当时的 UIC 环境，当前 BNBU 配置应使用实际可用的 v.bnbu.edu.cn。
Kirin：将 Dkey Token（宁盾令牌）转换为标准 TOTP，写于 2022 年。它展示了宁盾 App 激活时下发的 seed、timeStep 和 passwordLength，并说明 Hex seed 可以转换成 Base32。
Steven：宁盾令牌（Dkey Token）转换为标准 TOTP，写于 2023 年。它同时记录了网页响应和二维码两条路线，还解释了 Base64 seed、Hex seed 与 Base32 secret 其实是同一串二进制密钥的不同表示。
唐长老：宁盾令牌转标准 2FA TOTP，写于 2020 年。它把二维码里的 token、Hex 到 Base32 的转换和 otpauth:// URI 结构连成了一条完整链路。

第一篇解决的是“为什么换客户端”和网络协同，后面三篇解决的是“怎样让宁盾验证码自动生成”。它们的学校、年份和客户端环境不完全相同，不能逐项照抄；放在一起之后，OpenConnect 替代、TOTP 参数和 BNBU 实测才组成一条完整路线。

整个项目是怎样走弯路的

我先确认 OpenConnect 能不能代替 Cisco AnyConnect。OpenConnect-GUI 可以连接 BNBU，登录窗口也能正确显示 Student 认证组，但当时仍要输入密码和宁盾验证码。

接着我试过命令行脚本。脚本能提交账号和静态密码，也能进入：

Please enter a dynamic token

可它提交动态码后总是 Login failed，同一时间用 GUI 却能成功。这说明密码不是问题，失败发生在宁盾挑战的交互方式。继续堆脚本只会增加登录失败次数，所以我停掉了命令行路线。

后来查看 OpenConnect-GUI 的行为，才确认 Batch mode 可以保存静态密码。这样已经能少输一项，但动态码仍要拿手机看。

最后卡住的是宁盾令牌。最初拿到的公共激活二维码只有服务器信息，没有个人 token。我一度准备抓宁盾 App 的激活流量。后来从 BNBU 门户重新获取个人手机令牌，才发现新二维码属于另一种结构，里面直接有个人 token，不需要抓包。

ChatGPT 完成了 OpenConnect-GUI 配置、认证流程排查和 OpenConnect 9.21 升级，但在个人令牌转换这里停了下来。我只把宁盾令牌这一段交给 DeepSeek harness 继续处理。它调用本机离线二维码库读取我自己的二维码，检查字段结构，再完成 Hex 到 Base32 的转换。最终验收仍然是官方宁盾 App 对码和真实 VPN 连接，不是模型说“应该可以”。

准备工作与风险

开始前先确认这些条件：

你能正常登录 portal.bnbu.edu.cn。
你自己的 BNBU VPN 账号当前可用。
手机里的宁盾令牌当前能生成正确动态码。
Windows 自动设置时间和时区已经开启。
你接受把静态密码与第二因素放在同一台电脑上的风险。

重新获取手机令牌可能让旧令牌立即失效。先留出足够时间，一次做完重新绑定、转换、对码和 VPN 测试。不要在快要用 VPN 时临时操作。

第一步：安装并验证 OpenConnect-GUI

安装 OpenConnect-GUI 后，先不要碰 OTP。只配置服务器并完成一次普通连接，确认替代客户端本身可用。

基础项目如下：

项目	填写内容
Name	`BNBU VPN`
Gateway	`https://v.bnbu.edu.cn`
Username	你的 BNBU 账号
Groupname	`student`
VPN protocol	`Cisco AnyConnect or OpenConnect`
CA Certificate	留空，使用系统证书
Server Certificate	留空
User Certificate / User Key	留空
Disable UDP	默认不勾
Use Proxy	不勾

第一次测试时，把 OTP Token 设为 None 或 Disabled。连接窗口出现认证组时选择 Student，输入账号、密码和手机上的宁盾六位码。只有这一步成功，后面才有继续自动化的意义。

第二步：确认底层 OpenConnect 至少是 9.20

OpenConnect-GUI 1.6.2 当时附带的底层核心是 9.12。这个版本不能完整解析 otpauth:// URI，也不能从 URI 正确读取非默认的 60 秒周期。

OpenConnect 更新记录显示，otpauth:// URI 和非默认 TOTP 周期支持在 9.20 加入。我实际使用的是 9.21，GnuTLS 版本为 3.8.11。

在 PowerShell 中检查：

& 'C:\Program Files\OpenConnect-GUI\openconnect.exe' --version

应该看到类似：

OpenConnect version v9.21
Using GnuTLS 3.8.11
Features present: ... HOTP software token, TOTP software token ...

如果还是 9.12，不要只复制一个来路不明的 DLL。OpenConnect、GnuTLS 及依赖库要使用同一套 Windows 构建。优先使用 OpenConnect 官方发布页或可信发行包，并保留能够恢复的旧安装。升级后先启动 GUI，再重新做一次手动验证码连接。

第三步：从 BNBU 门户进入令牌解绑

图中的“令牌解绑”就是进入宁盾自助页面的入口。

进入后选择“手机令牌”。页面会显示当前令牌状态，并提供“重新获取手机令牌”和“显示激活码内容”。

点击重新获取后，以新页面生成的个人二维码为准。图中二维码区域已经留空。

公共激活二维码与这里重新生成的个人二维码可能不同：

类型	解码后的特征	应该怎样处理
公共激活码	`activationMethod: 2`，没有 `token`	不能直接转换，需要走官方 App 激活流程
个人手机令牌	`activationMethod: 1`，包含 `token`	可以在本人电脑上离线检查和转换

BNBU 这次实测走的是第二种。个人二维码中的 token 带有 Hex seed、算法编号、刷新周期和验证码长度。

第四步：完全离线地读取和转换

不要把个人二维码传给在线二维码网站。最方便的入口是宁盾页面的“显示激活码内容”，复制完整激活链接后，在本人电脑上处理。

下面脚本只使用 Python 标准库。它会读取粘贴的激活链接，解析 # 后的 Base64 JSON，检查是否包含个人 token，再把 Hex seed 转为 Base32 并生成 otpauth:// URI。

新建 convert_dkey.py：

import base64
import json
from urllib.parse import quote, urlsplit

raw = input("粘贴个人手机令牌的完整激活链接：").strip()
fragment = urlsplit(raw).fragment

if not fragment:
 raise SystemExit("链接中没有 #Base64 片段")

fragment += "=" * (-len(fragment) % 4)
payload = base64.urlsafe_b64decode(fragment).decode("utf-8")
data = json.loads(payload)
token = data.get("token")

if not token:
 raise SystemExit(
 "这个二维码没有个人 token，不能按本教程直接转换。"
 f" activationMethod={data.get('activationMethod')}"
 )

seed_hex = token["seed"]
seed_bytes = bytes.fromhex(seed_hex)
secret = base64.b32encode(seed_bytes).decode("ascii").rstrip("=")
digits = int(token["passwordLength"])
period = int(token["timeStep"])

label = quote("BNBU:DKEY")
issuer = quote("BNBU")
uri = (
 f"otpauth://totp/{label}?secret={secret}"
 f"&issuer={issuer}&algorithm=SHA1"
 f"&digits={digits}&period={period}"
)

print(f"activationMethod: {data.get('activationMethod')}")
print(f"seed 字节数: {len(seed_bytes)}")
print(f"digits: {digits}")
print(f"period: {period}")
print("\n下面一行是登录凭据，不要发给任何人：")
print(uri)

在脚本所在目录运行：

python .\convert_dkey.py

我这次实际读到的结构是：

{
 "activationMethod": 1,
 "token": {
 "crypto": 1,
 "seed": "<40 位 Hex，已删除>",
 "timeStep": 60,
 "passwordLength": 6
 }
}

seed 的 40 位 Hex 对应 20 字节，也就是 160 bit。crypto: 1 在这次部署中对应 HMAC-SHA1，验证码每 60 秒更新一次，共 6 位。教程里的数字来自这次 BNBU 实测，但脚本仍以你自己的 JSON 字段为准。

第五步：先对码，不要直接登录

先把脚本生成的 URI 导入支持自定义周期的验证器，例如 Bitwarden。不要急着填进 OpenConnect。

同时打开宁盾官方 App 和新的验证器，观察同一个 60 秒周期内的六位码。至少连续跨过 2 到 3 个周期，每次都完全一致，才能确认：

Hex 解码正确。
Base32 转换正确。
算法是 SHA-1。
digits=6。
period=60。
电脑和手机时间同步。

只对上一次不够。周期或时间刚好错位时，偶尔也可能造成误判。对码失败时，先检查自动时间与时区，再核对脚本读出的 timeStep、passwordLength 和 crypto，不要连续尝试 VPN 登录。

第六步：把 TOTP 与密码交给 OpenConnect-GUI

对码通过后，编辑 OpenConnect-GUI 配置：

Username 与 OTP URI 已脱敏，其余项目按实测配置保留。

需要改动的项目：

项目	设置
OTP Token	`TOTP (RFC6238)`
OTP 右侧输入框	粘贴完整 `otpauth://` URI
Batch mode	勾选
Minimize on Connect	按需勾选

保存后连接。第一次可能仍要完成一次密码输入，让 GUI 保存静态密码。成功后断开，再重新打开 GUI 测试第二次连接。

最终验收标准不是“配置保存成功”，而是：

点击 Connect 后不再要求输入静态密码。
不再弹出宁盾六位码输入框。
日志进入 Connected，学校内网资源可以正常访问。
断开后再次连接仍然成功。

如果二维码里没有 token

如果脚本提示 activationMethod=2 或没有 token，你拿到的是公共激活码。这种二维码只有宁盾服务器信息，不能凭空推导个人 seed。

宁盾转换的三篇参考文章还记录了两条备用路线：一种是在令牌绑定网页中检查本人 refreshMobileToken 响应，另一种是在本人 App 激活时检查返回数据。响应里的 seed 可能是 Base64，也可能是 Hex，而且某些 data 字段还是双重编码的 JSON。

这两条路线会接触账号、激活流量和个人二次认证密钥，环境差异也很大。BNBU 当前可以从门户重新获取包含 token 的个人二维码，因此本文不把抓包作为默认步骤。没有 token 时，优先回门户确认是否点了“重新获取手机令牌”，或者联系 ITSC 获取正式支持。

收尾：把暴露面清干净

完成后检查并删除这些内容：

个人二维码截图。
保存完整二维码文本的文件。
解码后的 JSON。
包含 seed、Base32 或完整 URI 的终端历史、聊天记录和剪贴板。
为排查临时生成的日志与抓包文件。

如果真实 seed 或 Base32 曾经发进聊天、上传网盘或交给在线转换网站，按已经泄露处理。回 Portal 重新获取手机令牌，让旧令牌失效，再用新的二维码重新做一次。不要只删除聊天记录后继续使用旧密钥。

还要接受一个现实：把静态密码和 TOTP seed 都放进同一台电脑后，便利性提高了，双因素原本的设备隔离却减弱了。Windows 登录、磁盘加密和电脑的物理安全会变得更重要。

回头看这次折腾

我最开始只是受不了每次连接都要输入账号密码，再拿手机、解锁宁盾令牌、抄六位码，也不喜欢 Cisco AnyConnect 的服务一直随系统启动。

中间试过 GUI、命令行脚本、密码自动填写、宁盾 Push、二维码识别，甚至差点走到手机抓包。真正解决问题的几个点都很具体：Batch mode 能保存密码；个人重新获取的二维码与公共二维码不同；Hex、Base32 和 otpauth:// 只是同一密钥的不同表示；OpenConnect 9.20 之后才支持完整 URI 与非默认 TOTP 周期。

现在我打开 OpenConnect-GUI，点击一次 Connect 就结束了。折腾过程比每天多输几次验证码花的时间多得多，但我终于不用再和那个重复流程较劲。

参考资料

学校认证策略、门户页面和客户端版本以后都可能变化。重新操作时，以本人二维码里的字段、OpenConnect 实际版本和一次真实连接为准。

从毛玻璃到液态玻璃：这个博客是怎么搭起来的

Thu, 27 Aug 2026 00:00:00 +0800

家里已经买了 huangqixuan.com，一直空着有点可惜。我想拿它写教程，也给自己留一个整理问题的地方。

我以前用 InfinityFree 的免费空间和 wuaze.com 子域名建过网站，装过评论区，也折腾过论坛。后来账号因为长期没有使用被暂停并删除，子域名随之报出 DNS 解析错误。网页文件、域名和服务器原来是三件事，免费平台收回空间时，内容和网址都有可能一起失效。

所以这次我把源文件留在电脑里。以后可以换托管平台，也可以重新解析域名，但文章不能跟着平台消失。

先决定网站该怎么运行

动态网站会在访问时查询数据库，再生成页面。WordPress、论坛和带用户系统的网站通常这样运行。登录、发帖、后台管理和复杂评论都更容易实现，代价是要长期维护服务器、数据库、更新和安全设置。

静态网站会提前把文章生成成 HTML。读者打开网页时，服务器只需发送已经做好的文件。我的教程博客不需要注册和数据库，静态方案省事，也少了一批服务器配置问题。

我最后选了这条流程：

Markdown 文章
 ↓
Hugo 生成 HTML
 ↓
Cloudflare Pages 发布
 ↓
www.huangqixuan.com

GitHub 在这里不是必需的服务器，更像一个保存修改历史并触发自动部署的代码仓库。这个网站现在不依赖 GitHub，我可以直接用 Wrangler 发布到 Cloudflare Pages。以后如果改用 GitHub 自动构建，文章源文件也不用重写。

为什么用了 Hugo Stack

看了几个教程博客之后，我比较喜欢 Hugo Stack 的三栏布局。头像和导航在左边，文章在中间，搜索、分类和标签在右边。桌面上不会显得太空，到了手机上又能收成单栏。

Hugo 负责把内容生成网页，Stack 提供基础模板。文章仍然是普通的 Markdown，例如：

---
title: "文章标题"
date: 2026-08-28
categories: ["建站笔记"]
tags: ["Hugo"]
---

正文写在这里。

这样一来，重做网站样式不需要搬文章。哪天不想用 Stack，甚至不想用 Hugo，这些 Markdown 文件照样能打开。

第一版为什么看起来不像液态玻璃

刚开始时，我只知道自己喜欢苹果的 Liquid Glass 风格，于是先去找现成的 Skill。最早找到的是 apple-design、frontend-design 这类设计规范。它们能指导层级、动效和控件组织，却不会凭空产生真实折射。

第一批 Demo 主要用了这些 CSS：

background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.2);

这几行 CSS 能做出毛玻璃，但不会改变背景像素的位置。玻璃下面的线条没有弯曲，边缘也没有凸透镜感，更像一张半透明塑料片。

后来我不再只看模糊程度，而是检查这些细节：

背景细节在玻璃边缘发生位移。
曲面边缘有连续折射，不只是模糊。
色差和高光要克制，不能像霓虹描边。
控件移动时要重新采样它下面的画面。
内容仍然清楚，按钮和输入框也必须能点。

把六个原项目放在一起比较

截图很容易骗人。我把六个公开项目下载到本地，保留各自的引擎和默认参数，再做了一页统一入口。对比对象如下：

项目	实现路线	我最后记住的特点
ybouane/liquidglass	WebGL Shader	折射、色差和光照完整，适合独立按钮和工具栏
archisvaze/liquid-glass	SVG + WebGL	像一个光学实验台，适合理解厚度、IOR 和边缘宽度
xanaxknight/liquid-glass-css-svg	SVG displacement	单文件也能做出可见位移，适合研究位移图
el-gladiador/liquid-glass-react	React + WebGL2	共享 WebGL 上下文，适合 React 项目中的多层玻璃
deepika-builds/liquid-glass	JavaScript + SVG	中心清楚、边缘折射，普通 DOM 内容仍可交互
dpawlikowski/liquid-glass	CSS + SVG	不依赖 WebGL，也能组合折射和色差

对比之后，我放弃了把所有参数硬凑成一套的做法。一个项目里的 IOR 不能直接换算成另一个项目的 refraction。大多数时候，原项目调好的默认值比我随手改的数字平衡。

我最喜欢 1 号的 WebGL 光学和 5 号的可读窗口。5 号 Demo 还带了一套果冻拖动：窗口用 stiffness = 0.12 和 damping = 0.72 追赶鼠标，再按速度沿移动方向拉长，最大形变约 8%。折射负责玻璃的样子，拖动负责弹性，它们其实是两套机制。

把研究结果写成自己的 Skill

原项目解决了效果，但没有告诉我建站时该把效果放在哪里。我把对比结果整理成 liquid-glass-webgl-jelly Skill。以后改页面时先看组件是做什么的，不再见到一个框就套一层玻璃。

这套 Skill 目前遵循这些规则：

可读窗口、搜索框和信息面板使用边缘位移方案，中心尽量保持清楚。
独立按钮和紧凑工具栏可以使用 WebGL，但不能在一页堆几十个 Canvas。
长文章、表格和重复列表不做强折射，阅读比材质展示重要。
玻璃后面必须有可辨认的壁纸、线条或网格，否则无法确认折射是否真的存在。
选中、按下和成功状态不能只靠折射，还要有文字、边框或圆点提示。
prefers-reduced-motion 和降低透明度设置必须有对应降级。

有一条规则来自实际遇到的 Bug。早期 Demo 在玻璃导航条里又放了一层透明的 WebGL 选中透镜。它虽然没有填充色，却会重新折射下面的竹林背景。点击标签之后，画面不像胶囊在移动，反而像背景突然换了一块。我删掉第二层折射，只保留清楚的选中状态，问题才消失。

网站分类卡也用了同一个处理。外层窗口已经有真实折射，内层卡片只保留稳定的浅色衬底、细边框和很小的悬浮变化。再套一层光学滤镜会让画面变脏，也会拖慢滚动。

把 Stack 改成现在的样子

我没有直接照搬某个 Demo，而是保留 Stack 的三栏结构，再慢慢替换里面的部件。

左栏删掉多余介绍，只留下头像、标题、首页、归档、关于和暗色模式。中间还是普通文章流，整张卡片都可以点击。右栏原本有好几个搜索入口，我把它们合并成一个苹果式搜索框，顶部和导航里不再重复放搜索按钮。

背景用的是 Tahoe 亮色壁纸。原图是 6016 × 6016 的 PNG，直接放进网页太大，我把它压成了 2560 像素的 WebP。线条和颜色变化还在，文件只剩几十 KB。

网站现在主要使用 SVG 位移滤镜。脚本会为头像区、导航、工具栏、搜索面板、文章卡和正文窗口初始化折射。不支持 SVG backdrop-filter 的浏览器会退回磨砂效果。研究时准备的 WebGL 和果冻拖动代码仍然留着，但没有一起铺满整页。少几个 Shader，滚动会更稳。

改样式的过程中，我遇到过这些问题：

整页套了暗色滤镜，导致亮壁纸变灰，文字也发闷。
搜索框沿用了暗色主题背景，变成一块纯黑矩形。
某些文字为了显得精致被缩得太小，在手机上很难看清。
卡片静止时完全透明，鼠标移上去才突然出现一大块底色。
移动端背景高度计算错误，页面底部出现黑色区域。
每次切页都重新加载全部效果，滚动和跳转显得卡。

我对着截图逐个修正，没有一次性推倒重做。现在卡片从静止到悬浮不会突然换色，正文对比度稳定，手机页面底部也不会再露出黑底。

发布到 Cloudflare Pages

本地写文章时先启动 Hugo：

hugo server -D

浏览器会立即显示本地修改。页面确认正常后，再生成发布用的静态文件：

hugo --minify --cleanDestinationDir --destination .cloudflare-dist

最后用 Wrangler 上传到已有的 Pages 项目：

npx wrangler pages deploy .cloudflare-dist `
 --project-name huangqixuan-blog `
 --branch main

Cloudflare Pages 会生成一个版本地址，并把生产版本更新到 huangqixuan-blog.pages.dev。项目已经绑定 www.huangqixuan.com，Hugo 的 baseURL 也指向这里。

现在的发布流程固定为四步：写 Markdown、本地构建、检查视觉和功能、同步到 Cloudflare 并确认生产状态。托管平台保存的是生成后的网页，我需要长期保留的是 Markdown、模板、样式和脚本。

现在回头看

这个网站不是选好技术后一次搭成的。我从一个闲置域名开始，先后考虑过免费空间、GitHub Pages、闲置电脑服务器和动态博客，最后才选定 Hugo 与 Cloudflare Pages。

液态玻璃也绕了不少路。我先做出毛玻璃，发现不对后又下载原项目比较，接着处理玻璃叠加、背景突变、文字对比度和性能问题。最后整理出了一套使用边界。

这篇文章也算一份备忘录。以后网站哪里改坏了，我可以回来看看当时为什么这样选，不用再从十几个标签页和聊天记录里重新找答案。

你好，欢迎来到我的博客

Wed, 26 Aug 2026 00:00:00 +0000

我想给自己留个能长期写东西的地方。以后遇到值得记下来的问题，就把过程和最后能用的办法放在这里，不再只丢进聊天记录或收藏夹。

这里会写什么

大多是软件怎么用、电脑出了问题怎么查，还有搭这个网站时踩过的坑。偶尔也会放一点我不想忘掉的东西。

📝 备注

现在还是个刚搭起来的空架子，内容会慢慢补。

一段示例代码

教程里可以直接放命令。比如查看网络配置：

ipconfig /all

搜索和分类已经能用。下一步是把真正遇到过的问题整理成文章。