captive portal with apache on a raspberry pi

Question

I'm trying to make a captive portal with apache as a server and a raspberry pi on AP mode. I have some trouble trying to make the captive portal splash, I tried all tutorials on the internet and I can't make it.

My dhcpcd.conf

slaac private
interface wlan0
static ip_address=192.168.220.1/24
nohook wpa_supplicant

My dnsmasq.conf

interface=wlan0       
# Use interface wlan0  
address= /#/192.168.220.1

address=/connectivitycheck.gstatic.com/192.168.220.1
address=/www.gstatic.com/192.168.220.1

       # Use Cloudflare DNS  
dhcp-range=192.168.220.50,192.168.220.150,12h
dhcp-option=3,192.168.220.1
dhcp-option=6,192.168.220.1
server=8.8.8.8
log-queries
listen-address=127.0.0.1
 # IP range and lease time

My configuration for my server on apache is

<VirtualHost : 192.168.220.1:80 192.168.220.1:80>

        ServerName connectivitycheck.gstatic.com
    DocumentRoot /var/www/html/AP_mode

RewriteCond %{REQUEST_URI} !=/index.html
        RewriteRule ^(.*)$ http://192.168.220.1 [L]
        ErrorDocument 404 http://192.168.220.1


        RedirectMatch 302 /generate_204 http://192.168.220.1/AP_mode



ErrorLog ${APACHE_LOG_DIR}/android_error.log
CustomLog ${APACHE_LOG_DIR}/android_access.log combined
</VirtualHost>

thanks for your help guys!

• edit1->

The mechanism that i'm trying to build is a page who is display as a captive portal when the user connect to my raspberry pi who is in AP mode. In that page, the user has to put some information and the information will help tha raspberry pi in the futur( the management of the information is already okey) My only problem is that my page doesnt displat anything

here you can see the logs of the requests here

192.168.220.111 - - [13/Feb/2020:06:24:00 -0400] "GET /generate_204 HTTP/1.1" 302 554 "-" "Dalvik/2.1.0 (Linux; U; Android 9; SM-G965W Build/PPR1.180610.011)"
192.168.220.111 - - [13/Feb/2020:06:24:00 -0400] "GET /generate_204 HTTP/1.1" 302 554 "-" "Dalvik/2.1.0 (Linux; U; Android 9; SM-G965W Build/PPR1.180610.011)"
192.168.220.111 - - [13/Feb/2020:06:24:00 -0400] "GET /generate_204 HTTP/1.1" 302 554 "-" "Dalvik/2.1.0 (Linux; U; Android 9; SM-G965W Build/PPR1.180610.011)"
192.168.220.111 - - [13/Feb/2020:06:24:01 -0400] "GET /generate_204 HTTP/1.1" 302 554 "-" "Dalvik/2.1.0 (Linux; U; Android 9; SM-G965W Build/PPR1.180610.011)"
192.168.220.111 - - [13/Feb/2020:06:24:01 -0400] "GET /generate_204 HTTP/1.1" 302 554 "-" "Dalvik/2.1.0 (Linux; U; Android 9; SM-G965W Build/PPR1.180610.011)"

how you can see, there's the request of my phone who receive a 302 response, im suposed to recive a 204 have my captivep portal splash mode displaying -maybe the iptables rules are the problem? i dont use any for the moment but all request are supossed to be redirected to my apache page

Answer 1

At first, make sure you have configured the raspberry pi as a Wifi hotspot and check it on other devices. If other devices can connect to the AP of your raspberry pi and they get an IP address, follow this answer.

---

The apache.conf is the problem. Take a look at how the Splash page of a captive portal works!

Every operating system has its own different way of detecting Internet access. The mechanism is this basically:

GET/POST http://x.com/bar.html
If bar.html == [expected content] > Open Internet
If bar.html != [expected content] > Captive Portal
If bar.html[status] != SUCCESS > No Network  

Each device, also Android different manufactures, behaves differently. For example, look at the list below for different manufactures/devices:

Sony Xperia Z5:
connectivitycheck.gstatic.com:80
clients3.google.com:80
---------------------
Samsung Galaxy J3 2016:
172.217.21.14:80
connectivitycheck.android.com
---------------------
Samsung Galaxy J7 2015:
172.16.98.10:80
connectivitycheck.gstatic.com:80
---------------------
galaxy note4:
nothing!
---------------------
iOS 11:
captive.apple.com/hotspot-detect.html
---------------------
Windows 10:
www.msftconnecttest.com

I suggest making another apache config file for specific device/manufacture.

---

Create a directory for android in apache directory:

cd /var/www/html/
sudo mkdir android 

Create a simple index.html file that is going to appear on the splash page of the android device.

Create android.conf with touch/nano and copy the following code to create a "redirection rule" for Android devices.

sudo nano /etc/apache2/sites-enabled/android.conf  

Put these lines:

<VirtualHost *:80>

    Servername connectivitycheck.gstatic.com
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/android

    RedirectMatch 302 /generate_204 /index.html

    ErrorLog ${APACHE_LOG_DIR}/android_error.log
    CustomLog ${APACHE_LOG_DIR}/android_access.log combined

</VirtualHost>

Save file and exit.

Now, everything is done for android devices that are requesting to connectivitycheck.gstatic.com after connecting to a captive portal system.

Follow the procedure for other devices. Also, check THIS LINK out to get more information.

---

If the operating system is not important, you can install OpenWrt on your raspberry pi and then install and configure NoDogSplash as the captive portal. Check THIS LINK out to do it by OpenWrt.
Feel free to comment if you don't understand what's OpenWrt and how does it work as a Wifi hotspot and captive portal.