Configuring a Custom-Hosted Splash Page to Work with the Meraki Cloud

Configure Access Control

1. In the dashboard, navigate to Wireless > Configure > Access control.
2. Select the SSID you want to configure from the SSID drop-down. 
3. Under Security, choose Open (no encryption), or Pre-shared key (PSK). 
4. Under Splash page, choose Click-through or Sign-on with and choose one of the options from the drop-down menu.
5. Under the Advanced splash settings subsection, set Walled garden to Enabled and enter the public IP address of your web server. The address specified needs to be the public-facing IP address of the web server hosting the splash page, not the local LAN IP; the actual web page request comes from the dashboard, not the local devices.
6. Click Save.

Enabling a Custom-Hosted Splash page on the Meraki Cloud

1. In the dashboard, navigate to Wireless > Configure > Splash page.
2. Select the SSID you want to configure from the SSID drop-down.
3. Under Custom splash URL, select the radio button Or provide a URL where users will be redirected:
4. Enter the URL of your custom splash page (e.g. http://yourwebsite.com/yourscript.php).
5. Click Save changes.

Click-through based splash page

1. When a client connects to your network, a web browser is opened with an HTTP-based request (ie. http://google.com).
2. Assuming you have successfully completed the configuration on the Meraki cloud in the steps above the Meraki access points (AP) in your network will intercept this request and redirect the user through the Meraki cloud to the custom URL you specified. The user should be directed to a URL similar to the following string:

 http://yourwebsite.com/clickthrough....xx:xx:xx:xx:xx 

Assuming you have correctly added the web server's IP to the walled garden, the user will be viewing the splash page. Note the extra parameters appended to the URL. It is critical that your web server detects and makes use of these parameters, as they indicate how to grant access. You might choose to store these parameters in a session or otherwise save them for later use.

3. At this point, you can interact with the user however you wish. You might require them to agree to your terms of service, complete a form, or watch an advertisement. It is important to note that the user can fetch any web content within your walled garden.
4. Once you are prepared to grant access to the user, you must forward certain parameters you can gather from the URL in step 2 above. Specifically, you must forward the user to the following URL: 

GET['base_grant_url'] + "?continue_url=" + GET['user_continue_url']

Where the following parameters are extracted from the user’s original query or specified by you:

• base_grant_url = https://n##.network-auth.com/splash/grant
• user_continue_url = http://google.com

 

In the case of the example above the assembled URL would be:

https://n##.network-auth.com/splash/...p://google.com

Note: Your URL may be different than the above example. It is dynamic and you should therefore never hard-code the grant URL.

5. The Meraki cloud grants access on the AP and redirects the user to continue to the URL (ie. http://www.google.com).
6. Advanced: Network operators can optionally specify the length of the session they are granting. To do so include an extra GET parameter with name "duration."

For example:

GET['base_grant_url'] + "?continue_url=" + GET['user_continue_url'] + "&duration=3600" (to grant access for one hour).

For additional info, please reference our example Click-through Splash page code. The script is in its simplest form, but it's a working script and can be readily uploaded to your host for testing or use. 

Sign-on based splash page

1. When a client connects to your network a web browser is opened with an HTTP-based request (ie. http://google.com).
2. Assuming you have successfully completed the configuration on the Meraki cloud in the steps above the Meraki access points (AP) in your network will intercept this request and redirect the user through the cloud to the custom URL you specified. The user should be directed to a URL similar to the following string:

http://yourwebsite.com/clickthrough?continue_url=http%3A%2F%2Fgoogle.com...

3. Assuming you have correctly added the web server's IP address to your walled garden (step I-5), the user will be viewing your splash page (Note the extra parameters appended to the URL). It's critical that your web server detects and makes use of these parameters as they indicate how to grant access. You might choose to store these parameters in a session or otherwise save them for later use.

Note: If your browser enters an infinite redirect loop, check your walled garden settings and ensure your web server's IP was added to the walled garden.

 

4. At this point, you can interact with the user however you wish. You might require them to agree to your terms of service, complete a form, or watch an advertisement. It is important to note that the user can fetch any web content within your walled garden.
5. In order to collect logon credentials, you will need to create an HTML based form that collects and then submits these to the login URL. In its simplest form this could look similar to the code below:

<html>
    <head>
        <title>Internet Access Login</title>
    </head>
    <body>
        <h2>Internet Access Login</h2>   
        <form method=POST action="<? urldecode(GET['login_url']) ?>">
            <input type="hidden" name="success_url" value="<? urldecode(GET['continue_url']) ?>" />
            Username: <input type ="text" name="username" />
            Password: <input type ="text" name="password" />
            <input type="submit" value="Login" />
        </form>
    </body>
</html>

 

In the above example the code inside <? ?> is executed via the server-side. The login_url parameter is an opaque string used by the Meraki cloud for authentication and security. It is subject to change and should not be hard-coded.

6. The user will be prompted (per your custom-hosted page) to enter their credentials and then submit the form to the Meraki cloud.
7. The Meraki cloud will then send a RADIUS access-request message to the configured RADIUS server which will then receive an Access-accept message (assuming the account is valid and grants access to the AP as appropriate).
8. In a successful sign-on, the Meraki cloud redirects the user to the provided success URL. On failure, the user is instead redirected to the original captive portal URL. If the RADIUS server responds with an error the user will be presented with the error contained in the "error_message" parameter.