关于react.js:如何搭建需认证wifi并把你的前端能力延伸到路由器上

日常生活中常碰到一些商场或餐饮店提供一种非凡的 wifi，连贯之后需进一步认证能力应用。

这种 wifi 的英文学名叫Captive Portal，在商业活动中，带认证的 wifi 给商家提供了一种更间接的获客渠道，帮忙商家向线下用户做到某种程度的品牌推广或精准宣传，更重要的是，它自身的后劲带来的可能性仿佛还暗藏着更大的价值。因而，这种 wifi 越来越多的呈现在咱们的生存中。

比方下图中的麦当劳和沃尔玛截图：

作为一名前端开发，让我始终好奇的是：

• 这种 wifi 认证页面是如何搭建的？
• 它的认证机制是怎么的？
• 它跟失常的网站会有哪些不一样？

带着这些问题我用树莓派搭建了一个这种类型的 wifi 热点来一探到底。

如果你只在意前端和认证原理，对 linux 的配置不感兴趣，能够跳过上面 创立需认证的 wifi这一节，间接从前面的 wifi 认证的机制和原理 这一节开始看。

创立需认证的 wifi

筹备工作

• 树莓派 4B
• hostapd和dnsmasq (用于创立 wifi 热点)
• nodogsplash (外围组件，治理 wifi 热点，提供认证性能)

nodogsplash能够装置 OpenWrt 和 Linux 中，前者是开源的智能路由器操作系统，国内的一些路由器厂商通常是基于此零碎定制的，后者就不用多介绍了，这次的示例就是装置在 Linux 零碎上，为了不便装置调试，我间接应用一个树莓派 4 作为载体，用网线连通网络，用无线创立热点 wifi。

创立 wifi 热点

在装置组件之前，首先将依赖包更新，而后装置 hostapd 和dnsmasq两个组件，前者用来创立 wifi 热点，后者用来解决 DNS 和 DHCP 等服务。

sudo apt-get update
sudo apt-get upgrade

sudo apt-get install hostapd dnsmasq

批改配置并指定一个 wifi 网段，配置文件在/etc/dhcpcd.conf

sudo vi /etc/dhcpcd.conf

# ...

# 文件内容如下：interface wlan0
    static ip_address=192.168.220.1/24
    nohook wpa_supplicant

其中 wlan0 是无线网卡的名称，能够通过 ifconfig 命令查问，IP 地址可任意指定，只有不跟家中的 wifi 抵触即可，比如说此处设置的是 192.168.220.*，而我家中的 wifi 网段是 192.168.31.*。

重启一下服务，让配置失效：

sudo systemctl restart dhcpcd

批改 hostapd 配置，用于设置 wifi 的名称和明码，其中 ssid 示意此 wifi 的名称，wpa_passphrase 示意此 wifi 的明码。

sudo vi /etc/hostapd/hostapd.conf

# ...

# 文件内容如下：interface=wlan0
driver=nl80211

hw_mode=g
channel=6
ieee80211n=1
wmm_enabled=0
macaddr_acl=0
ignore_broadcast_ssid=0

auth_algs=1
wpa=2
wpa_key_mgmt=WPA-PSK
wpa_pairwise=TKIP
rsn_pairwise=CCMP

# wif 的名称
ssid=Pi4-AP
# wifi 的机密
wpa_passphrase=pimylifeup

批改配置文件/etc/default/hostapd

这时还须要再批改两个配置文件，一个是 hostapd 启动时的加载文件，须要将配置文件字段 DAEMON_CONF 指定为下面的文件地址，默认状况下该字段是被正文掉的。

sudo nano /etc/default/hostapd

# ...
# 文件内容如下：# 将 #DAEMON_CONF="" 批改为上面这行
DAEMON_CONF="/etc/hostapd/hostapd.conf"

批改配置文件/etc/init.d/hostapd

另一个配置文件是零碎服务配置，批准将上文的配置文件地址赋值给 DAEMON_CONF 字段。

sudo vi /etc/init.d/hostapd

# ...

# 文件内容如下：# 将 DAEMON_CONF= 批改为上面这行
DAEMON_CONF=/etc/hostapd/hostapd.conf

批改配置文件/etc/dnsmasq.conf

在此文件配置自定义 wifi 的网段、dns 服务器等信息。

sudo vi /etc/dnsmasq.conf

# ...

# 文件内容如下：interface=wlan0       # 指定无线网卡名称 
server=114.114.114.114       # 应用 dns 服务器
dhcp-range=192.168.220.50,192.168.220.150,12h  # 指定可用 IP 的网段范畴和开释工夫

无线网卡转发有线网卡

批改零碎配置文件中的 net.ipv4.ip_forward 字段，激活转发性能，默认状况下，该字段是被正文掉的。

sudo vi /etc/sysctl.conf

# ...

# 文件内容如下：# 将原 #net.ipv4.ip_forward= 1 的正文符号去掉，批改为上面这行
net.ipv4.ip_forward=1

重启零碎，让此批改失效。

sudo reboot

而后，通过 iptables 命令实现网卡之间的信息转发，其中 eth0 是有线网卡的名称，可通过 ifconfig 命令查问。

sudo iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE

最初，须要将以后 iptables 的配置保留下来，保障每次机器重启时该配置都能失效，先将配置保留到文件中/etc/iptables.ipv4.nat。

# 将配置写入 /etc/iptables.ipv4.nat 文件
sudo sh -c "iptables-save > /etc/iptables.ipv4.nat"

批改 rc.local，保障每次启动时都会读取iptables 配置。

sudo vi /etc/rc.local

# ...
# 文件内容如下：# ...
# 在“exit 0”这一行之前增加上面命令读取 iptables 的配置
iptables-restore < /etc/iptables.ipv4.nat

exit 0

启动 wifi 热点

最初，对于热点的配置终于配置结束，运行一下命令启动服务：

sudo systemctl unmask hostapd
sudo systemctl enable hostapd
sudo systemctl start hostapd
sudo service dnsmasq start

这时，应该能够用手机检测到配置的 wifi 呈现了Pi4-AP，该名称即下面配置的 wifi 名称，输出对应明码即可连上网络。此时可重启一下再连，确保重启后配置仍然失效。

sudo reboot

装置 nodogsplash

首先装置对应依赖 git 和libmicrohttpd-dev。

sudo apt install git libmicrohttpd-dev

而后应用 git 间接将 nodogsplash 源码拿下来，间接装置。

git clone https://github.com/nodogsplash/nodogsplash.git
cd ./nodogsplash
make
sudo make install

增加 nodogsplash 配置

增加配置到文件 /etc/nodogsplash/nodogsplash.conf 中，指定对应网卡、网关、最大连贯用户数和认证过期工夫。其中，wlan0是下面配置的无线网卡名，IP 地址是下面配置的 wifi 热点的网关。

sudo vi /etc/nodogsplash/nodogsplash.conf

# ...

# 文件内容如下：GatewayInterface wlan0
GatewayAddress 192.168.220.1
MaxClients 250
AuthIdleTimeout 480

配置实现后，启动 nodogsplash。

sudo nodogsplash

此时，用手机连贯创立的 wifi 并输出明码当前，即可看到以下弹窗，要求登录认证。

点击登录后进入认证页面。

配置自定义 wifi 认证页面

nodogsplash自身提供了自定义验证机制 – Forwarding Authentication Service (FAS)，它能够指定自定义的认证页面和认证形式，通过简略配置对应服务器的 IP 和端口即可。

比方，我在同一台机器上开启一个 react 站点，端口为 8080，若想把此站点设置为认证入口页，只需在配置文件中增加上面四行代码即可，其中 fas_secure_enabled 有从 0 到 3 的多个等级值，从低到高会让安全性和复杂性递增，此处选了最简略等级用于做演示。

sudo vi /etc/nodogsplash/nodogsplash.conf

# ...

# 要增加的内容如下
fasport 8080
fasremoteip 192.168.220.1
faspath /
fas_secure_enabled 0

最初，出现的样子如下，点击按钮即实现认证，顺利联网。

wifi 认证的机制和原理

每当设施连贯 wifi 后，零碎会主动做一个连通性校验，此校验的实质是发送一个 HTTP 申请。如果申请失败，则会触发相应机制要求用户输出登录凭证。如果申请胜利，则示意网络已通，无任何回应，这个网络校验过程叫 Captive Portal Detection (CPD)。

不同的操作系统校验时的申请地址不一样，比方我用手边的 android 和 iphone 手机别离做了测试，他们对应校验地址如下：

• http://connectivitycheck.smar…（坚果 pro3）
• http://captive.apple.com/hots…（iphone 6）

简略来说，wifi 的认证过程通过一个 HTTP GET 申请即可实现。以我本文示例中应用的 nodogsplash 组件为例，其外部用 C 语言实现了一个服务器运行在 2050 端口。设施连上 wifi 时，wifi 端会生成一个 token，当设施被重定向到认证页面时，页面模板中蕴含此 token，此时用户只需发送一个 GET 申请将此 token 传入到对应服务器的认证地址即可。

如果你配置了 FAS，也就是说设置了自定义认证机制，比如说你想增加了一个手机验证环节，须要用户填入手机和验证码能力实现认证。那么 nodogsplash 在重定向登录页面的时候会把一些重要参数附带在申请地址的前面，让你的自定义入口页能获取到这些认证凭证，比方 token 之类的参数。

等你的自定义验证手机验证通过了，再抉择将 token 以 HTTP GET 申请发送回原 2050 端口上的认证服务器，整个流程如下图所示：

认证站点的限度

须要留神的是，当用户设施连上 wifi 但还尚未通过验证时，网络拜访是受限的，此时能拜访的内容取决于防火墙的设置。比方我下面示例中，将站点配置在路由器上，网站端口是 8080，依赖的后端服务器运行在端口 8081 上，此时必须在 nodogsplash 的防火墙规定中凋谢这两个端口，能力让未认证的用户设施拜访的到。如果服务器配置在外网，就要将对应的域名或 IP 在防火墙中凋谢进去，具体配置形式参考 nodogsplash 对于 FAS 的文档。

另外，wifi 认证页面的实现上要有一些额定的平安考量。比方在 nodogsplash 的官网文档中倡议网站遵循一下平安准则：

1. 当认证胜利后需立即敞开浏览器
2. 禁止应用链接
3. 禁止文件下载性能
4. 禁止执行 javascript

对于第二条，能够应用表单提交的形式替换链接调整，而对于第四条，它的本意并不是禁止 js 性能，只是为了避免执行 js 语句引起的安全性问题。我在示例中搭建的网站应用了 react 框架，在 android 和 ios 上都能失常显示。

因而，在性能实现上相比拟通常的前端站点，自定义的 wifi 认证网站局部性能受限，但影响并不大，能够应用你本人善于的前端框架来搭建。

结语

带认证的 wifi 在商业活动中越来越常见，开源社区中，nodogsplash是其中一种实现形式，在大量限度的状况下，提供了足够的灵活性让你用相熟的形式像搭建其余网站一样搭建 wifi 认证页面。最终，把你的前端能力延长到路由器上。

备注：对于 nodogsplash 的版本

nodogsplash 源码中的 master 分支指向的 3.3.5 版本，而此时最新版是 5.0.0（笔者写此文章工夫 2020.7），越新的版本其文档越欠缺，但要留神的是 4.5.1 版本是一个分水岭，因为从 4.5.1 之后该项目标自定义登录受权性能被剥离到一个独立我的项目 openNDS。

如果切换到 v4.5.1 版后碰到 libmicrohttpd 报组件过期异样，可在配置文件中增加字段 se_outdated_mhd 1 避开此异样。

参考文献

nodogsplash 的 github 地址

nodogsplash 的官网文档

captive-portal 和 rfc-7710 文献关联

Captive-Portal 的 wiki

树莓派搭建 wifi 热点

树莓派搭建 captive-portal