luci-app-tailscale插件编写的爬坑记录

由 AsVow 发布于 2024年1月30日 js • 笔记

背景

一直以来笔者都用OpenWrt的ZeroTier服务进行组网，最近网络环境不太稳定，经常出现内网无法连接的情况。于是笔者打算使用Tailscale作为替代方案。现有的LuCI插件不能完全满足如意，作为又菜又爱的人，笔者参考 openwrt-tailscale 和 luci-app-zerotier 自己动手编写一个适用于新版LuCI的 luci-app-tailscale 插件。本文记录一个没有任何LuCI插件编写经验菜鸟的爬坑过程。

关于LuCI2

早期的LuCI是主要使用Lua编写，通过ubus、luci.model.uci、nixio.fs等扩展来访问系统信息和设置。而新版Luci采用了不同架构，且称之为LuCI2。它不再使用Lua，转而通过JavaScript XHR方法来渲染页面。

基础构建

文件结构 - 参照luci-app-zerotier源码，创建以下文件

 luci-app-tailscale
 ├── Makefile
 ├── htdocs
 │   └── luci-static
 │       └── resources
 │           └── view
 │               └── tailscale
 │                   ├── base.js
 │                   └── interface.js
 ├── po
 │   ├── templates
 │   │   └── tailscale.pot
 │   ├── zh_Hans
 │   │   └── tailscale.po
 │   └── zh_Hant
 │       └── tailscale.po
 └── root
     ├── etc
     │   ├── config
     │   │   └── tailscale
     │   ├── hotplug.d
     │   │   └── iface
     │   │       └── 40-tailscale
     │   ├── init.d
     │   │   └── tailscale
     │   └── uci-defaults
     │       └── 40_luci-tailscale
     └── usr
         └── share
             ├── luci
             │   └── menu.d
             │       └── luci-app-tailscale.json
             └── rpcd
                 └── acl.d
                     └── luci-app-tailscale.json

编写base.js - 通过tailscale status —-json获取登录状态，未登录则执行tailscale login进行登录

function getLoginStatus() {
     return fs.exec("/usr/sbin/tailscale", ["status", "—json"]).then(function(res) {
         var status = JSON.parse(res.stdout);
         if (!status.AuthURL && status.BackendState == "NeedsLogin") {
             fs.exec("/usr/sbin/tailscale", ["login"]);
         }
         var displayName = status.BackendState == "Running" ? status.User[status.Self.UserID].DisplayName : undefined;
         return {
             backendState: status.BackendState,
             authURL: status.AuthURL,
             displayName: displayName
         };
     }).catch(function(error) {
         return { backendState: undefined, authURL: undefined, displayName: undefined };
     });
 }

坑1: fs.exec 报错提示权限不足。OpenWrt LuCI2前端调用后端命令需要rpcd配置授权（具体方法后文再说）。

编写base.js - 将Tailscale登录状态显示到页面中，并增加注销功能。

创建renderLogin函数以渲染页面

 function renderLogin(loginStatus, authURL, displayName) {
     var spanTemp = '<span style="color:%s">%s</span>';
     var renderHTML;
     if (loginStatus == "NeedsLogin") {
         renderHTML = String.format('<a href="%s" target="_blank">%s</a>', authURL, _('Needs Login'));
     } else if (loginStatus == "Running") {
         renderHTML = String.format('<a href="%s" target="_blank">%s</a>', 'https://login.tailscale.com/admin/machines', displayName);
         renderHTML += String.format('<br><a style="color:green" id="logout_button">%s</a>', _('Logout and Unbind'));
     } else {
         renderHTML = String.format(spanTemp, 'orange', _('NOT RUNNING'));
     }

     return renderHTML;
 }

定义界面表单元素

     o = s.option(form.DummyValue, 'login_status', _('Login Status'));
     o.renderWidget = function(section_id, option_id) {
         poll.add(function() {
             return Promise.resolve(getLoginStatus()).then(function(res) {
                 document.getElementById('login_status_div').innerHTML = renderLogin(res.backendState, res.authURL, res.displayName);
                 var logoutButton = document.getElementById('logout_button');
                 if (logoutButton) {
                     logoutButton.onclick = function() {
                         if (confirm(_('Are you sure you want to logout and unbind the current device?'))) {
                             fs.exec("/usr/sbin/tailscale", ["logout"]);
                         }
                     }
                 }
             });
         });

         return E('div', { 'id': 'login_status_div' }, _('Collecting data ...'));
     };

注：在LuCI中，form 和 datatype 分别用来定义配置接口的组件、数据验证规则。

form 取值：

form.Value 单行文本框，用于输入文本
form.TextValue 多行文本框，可以输入更长的文本
form.ListValue 下拉列表，可以选择多个预定义的选项之一
form.Flag 复选框，通常用于布尔值（开/关）
form.MultiValue 多选框，可以选择多个值
form.DynamicList 动态列表，用户可以添加多个任意值
form.SectionValue 嵌套的配置段，用于复杂的配置结构
form.Button 按钮，用于执行一个动作，而不是保存一个值
form.FileUpload 文件上传，允许用户上传一个文件
form.DummyValue 虚拟值，用于显示信息而非输入

datatype 取值：

o.datatype=“uinteger” 无符号整数
o.datatype=“integer” 有符号整数
o.datatype=“float” 浮点数
o.datatype=“boolean” 布尔值，通常为0（假）或1（真）
o.datatype=“ipaddr” IP地址
o.datatype=“ip4addr” IPv4地址
o.datatype=“ip6addr” IPv6地址
o.datatype=“netmask” 网络掩码
o.datatype=“macaddr” MAC地址
o.datatype=“hostname” 主机名
o.datatype=“network” 网络接口名称
o.datatype=“port” 端口号
o.datatype=“string” 任意字符串
o.datatype=“wwan_apn” 无线广域网接入点名称
o.datatype=“file” 文件路径

预编译 - 使用OpenWrt SDK编译插件

make package/luci-app-tailscale/compile V=s

坑2: openwrt/packages/net/tailscale 占用了 /etc/config/tailscale 和 /etc/init.d/tailscale 导致编译和安装时报错。

 * check_data_file_clashes: Package luci-app-tailscale wants to install file /etc/config/tailscale
        But that file is already provided by package  * tailscaled
 * check_data_file_clashes: Package luci-app-tailscale wants to install file /etc/init.d/tailscale
        But that file is already provided by package  * tailscaled

本插件中的这两个文件均参考了tailscale官方标准编写，可以直接替换掉。笔者尝试在Makefile中加入以下preinst定义，无果…

define Package/luci-app-tailscale/preinst
#!/bin/sh
rm /etc/config/tailscale /etc/init.d/tailscale
exit 0
endef

那就…直接从根源上解决~~提出问题的人~~

sed -i '/\/etc\/init\.d\/tailscale/d;/\/etc\/config\/tailscale/d;' feeds/packages/net/tailscale/Makefile

RPC配置方式

在测试过程中，笔者遇到了一个问题：OpenWrt前端的fs.exec权限不足，无法执行/usr/sbin/tailscale命令。为了解决这个问题，需要对rpcd进行配置授权。

授权方法

创建rpcd配置文件 - 在/usr/share/rpcd/acl.d/路径下创建luci-app-tailscale.json。

 {
     "luci-app-tailscale": {
         "description": "Grant access to Tailscale configuration",
         "read": {
             "file": {
                 "/usr/sbin/tailscale": [ "exec" ]
             },
             "ubus": {
                 "service": [ "list" ]
             },
             "uci": [ "tailscale" ]
         },
         "write": {
             "uci": [ "tailscale" ]
         }
     }
 }

重启RPC服务
```
/etc/init.d/rpcd reload
```

创建语言包模板

最初笔者手敲.pot语言包模版以实现多语言支持，后来发现OpenWrt官方提供了perl脚本i18n-scan.pl来自动生成.pot文件。

使用i18n-scan.pl自动生成语言包

安装依赖
```
sudo apt-get install perl gettext
```

生成.pot文件

wget https://raw.githubusercontent.com/openwrt/luci/master/build/i18n-scan.pl
chmod +x i18n-scan.pl
./i18n-scan.pl luci-app-tailscale > luci-app-tailscale/po/templates/tailscale.pot

至此折腾告一段落，最终笔者成功地编写了luci-app-tailscale插件，并且在OpenWrt上顺利运行。GitHub项目地址：asvow/luci-app-tailscale。

等风起