日常生活中常碰到一些商场或餐饮店提供一种非凡的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 updatesudo apt-get upgradesudo 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=wlan0driver=nl80211hw_mode=gchannel=6ieee80211n=1wmm_enabled=0macaddr_acl=0ignore_broadcast_ssid=0auth_algs=1wpa=2wpa_key_mgmt=WPA-PSKwpa_pairwise=TKIPrsn_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.natexit 0
启动wifi热点

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

sudo systemctl unmask hostapdsudo systemctl enable hostapdsudo systemctl start hostapdsudo 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.gitcd ./nodogsplashmakesudo make install

增加nodogsplash配置

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

sudo vi /etc/nodogsplash/nodogsplash.conf# ...# 文件内容如下：GatewayInterface wlan0GatewayAddress 192.168.220.1MaxClients 250AuthIdleTimeout 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 8080fasremoteip 192.168.220.1faspath /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